@import url(https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;800&display=swap);* {padding: 0;margin: 0;}:root {--bg: #121525;--exp: #e5e5e5;--exp-date: #008fe6;--exp-handle: #008fe6;--work-color: #00acff;--work-color2: #008fe6;--work-color3: #121525;--text-color: #121525;--svg-background: #15a9d0;--image-opt: drop-shadow(0px 0px 9px #bbb6b6);--link-blog: #4169e1;}.newTheme {--bg: #5d2b51;--exp-date: #6b0162;--exp-handle: #6b0162;--exp: #e5e5e5;--work-color: #806e91;--work-color2: #6a5866;--work-color3: #5d2b51;--text-color: #4c1d42;--svg-background: #4c1d42;--image-opt: drop-shadow(0px 0px 9px #bbb6b6) hue-rotate(752deg) saturate(77%) contrast(90%);--link-blog: #5d2b51;}html {scroll-behavior: smooth;}body {padding: 0;margin: 0;font-family: Spartan, sans-serif;background: var(--bg);color: #fff;text-align: center;}.site-title {font-size: 20px;}.toggleWrapper {position: fixed;z-index: 1000000;bottom: 10%;right: 1%;}.toggleWrapper::before {content: "";position: absolute;height: 50px;width: 150px;left: -9px;bottom: -17px;background: #c1f0db;border-top-left-radius: 60px;border-bottom-left-radius: 60px;box-shadow: 1px 1px 17px -3px grey;}.outer {background-color: var(--bg);color: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;height: 100vh;}.heading {font-size: 22px;font-weight: 400;}.keyboard {margin: 56px 0;display: flex;flex-direction: column;}.webDev {display: flex;text-transform: uppercase;position: absolute;left: 100px;top: 80px;}.webDevText {margin-left: 16px;display: flex;flex-direction: column;justify-content: space-evenly;}.row {display: flex;flex-direction: row;}.btn {border: 1px solid #fff;border-radius: 8px;padding: 16px;margin: 8px;width: 1em;}.themeText {position: absolute;top: -110px;height: 140px;width: 200px;left: -80px;filter: drop-shadow(0 0 10px grey);}.dup {display: flex;justify-content: space-between;flex-direction: column;padding-top: 4px;padding-bottom: 4px;}.tab {width: 3em;}.caps {width: 4em;}.return {width: 4em;}.shift {width: 6em;}.highlight {background: #fff;border: 1px solid #fff;}.active {animation: scaleUp 0.2s ease-in-out;}@keyframes scaleUp {0% {background-color: #d6d0d0;color: #121525;transform: scale(1);}50% {background-color: #d6d0d0;color: #121525;transform: scale(1.2);}100% {background-color: #d6d0d0;color: #121525;transform: scale(1);}}.high {animation: proxy 0.26s infinite ease-in-out;}@keyframes proxy {0% {transform: translate(-2px, 2px);}25% {transform: translate(2px, -2px);}50% {transform: translate(2px, 2px);}100% {transform: translate(-2px, -2px);}}#speed {font-size: 42px;position: absolute;top: 40px;opacity: 0.5;}.bottomText {position: absolute;bottom: 0;opacity: 0.5;right: 0;margin: 10px;display: none;}.downArrow {fill: #fff;height: 37px;width: 40px;position: absolute;bottom: 0;margin-bottom: 16px;left: calc(50% - 20px);animation: bounce 0.8s infinite ease-in-out;cursor: pointer;}@keyframes bounce {0% {transform: translateY(4px);}50% {transform: translateY(0);}100% {transform: translateY(5px);}}.borderL {border-bottom: 2px solid #fff;border-left: 2px solid #fff;}.borderR {border-bottom: 2px solid #fff;border-right: 2px solid #fff;}header {position: fixed;top: 0;left: 0;width: calc(100% - 200px);padding: 40px 100px;z-index: 50;display: flex;justify-content: space-between;align-items: center;transition: 0.5s;}@keyframes headl {0% {transform: translateY(-100px);}100% {transform: translateY(0);}}header.sticky {background: #fff;padding: 20px 100px;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);animation: headl 0.5s ease-in-out;}header .logo {color: #fff;font-size: 24px;text-transform: uppercase;text-decoration: none;font-weight: 700;letter-spacing: 2px;cursor: pointer;}header.sticky .logo {color: var(--text-color);}header ul {position: relative;display: flex;}header ul li {position: relative;list-style: none;}header ul li a {position: relative;display: inline-block;margin: 0 15px;color: #fff;text-decoration: none;}header.sticky ul li a {color: var(--text-color);}.main {position: relative;overflow-y: hidden;padding-top: 150px;padding: 100px;background: #e5e5e5;}.about {color: #121525;font-size: 34px;font-weight: 400;}.about-section {margin-bottom: 100px;display: flex;justify-content: space-around;align-items: center;margin-top: 100px;}.about-left {color: var(--text-color);text-align: justify;width: 60%;font-size: 16px;line-height: 1.4;border: 1px solid var(--exp-handle);border-radius: 40px;padding: 40px;box-sizing: border-box;}.about-left::before {content: "";position: absolute;height: 250px;width: 250px;background: #bbbbbe;right: -184px;z-index: -1;top: calc(50% - 120px);border-radius: 50%;}.imageClass {width: 26%;filter: var(--image-opt);}.name {font-size: 22px;font-weight: 600;}.linkClass {text-decoration: none;position: relative;font-size: 20px;font-weight: 800;color: var(--link-blog);overflow: hidden;background: linear-gradient( to right, var(--bg), var(--bg) 50%, var(--link-blog) 50% );background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%;background-position: 100%;transition: background-position 275ms ease;text-decoration: none;}.linkClass:hover {background-position: 0 100%;}.experience {font-size: 34px;font-weight: 400;}#experience {background: var(--exp);position: relative;padding: 60px;}#experience::before {content: "";position: absolute;height: 400px;width: 100%;left: 0;bottom: -436px;background-color: var(--work-color);transform: skewY(11deg);z-index: 3;}.expWave > path:nth-of-type(1) {fill: #e5e5e5;}.circleSym > path:nth-of-type(1) {fill: var(--bg);}.pointer {background: #fff;height: 10px;width: 10px;left: 0;top: 7px;transform: rotate(45deg);border-radius: 2px;}div#contact::before {content: "";position: absolute;height: 400px;width: 100%;left: 0;top: -360px;background: var(--work-color);z-index: 3;}.contact-form {padding-top: 50px;width: 60%;display: flex;flex-direction: column;text-align: left;margin: auto;}input[type="text"], select, textarea {width: 100%;padding: 12px;border: 1px solid #fff;border-radius: 4px;box-sizing: border-box;margin-top: 6px;margin-bottom: 16px;resize: vertical;outline: 0;}input[type="reset"], input[type="submit"] {background-color: #fff;color: var(--text-color);padding: 12px 20px;font-size: 16px;border: none;border-radius: 4px;cursor: pointer;margin-right: 20px;outline: 0;}input[type="submit"]:hover {background-color: #ccc;}input[type="reset"]:hover {background-color: #ccc;}.contact-icons {width: auto;background: #eee;margin-top: 80px;display: flex;justify-content: center;color: var(--text-color);font-size: 16px;text-transform: uppercase;font-weight: 100;padding: 30px;position: relative;}.contact-icon-class {height: 30px;width: 30px;fill: var(--text-color);transition: all 0.3s ease-in-out;}.contact-icons-wrapper {border-radius: 50%;display: flex;z-index: 1;flex-direction: column;align-items: center;cursor: pointer;padding: 16px;box-shadow: 0 0 4px -1px grey;margin: 0 16px;transition: all 0.3s ease-in-out;background-position: 100% 0;background-size: 200% 100%;transition: all 0.25s ease-in;}.contact-icons-wrapper:hover .whiteIcon {fill: #fff;transition: all 0.3s ease-in-out;}.linkedin {background-image: linear-gradient( to left, transparent, transparent 50%, #0377b5 50%, #0377b5 );}.gmail {background-image: linear-gradient( to left, transparent, transparent 50%, #e94034 50%, #e94034 );}.whatsapp {background-image: linear-gradient( to left, transparent, transparent 50%, #4ec15b 50%, #4ec15b );}.wordpress {background-image: linear-gradient( to left, transparent, transparent 50%, #207195 50%, #207195 );}.codepen {background-image: linear-gradient( to left, transparent, transparent 50%, #000 50%, #000 );}.codepen:hover, .gmail:hover, .linkedin:hover, .whatsapp:hover, .wordpress:hover {background-position: 0 0;transform: scale(1.2);}#contact {background: var(--bg);padding-top: 180px;position: relative;}.copyright {background: #eee;color: var(--text-color);padding-top: 16px;padding-bottom: 20px;}.connect {position: absolute;left: 8%;background: #eee;padding: 20px;top: -28px;font-size: 20px;font-weight: 500;transition: 0.5s;}#work {background: #e5e5e5;overflow-x: hidden;position: relative;padding-top: 120px;background-image: url(../work-bg.jpeg);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;}#work::before {content: "";position: absolute;background: #e5e5e5;width: 100%;height: 200px;left: 0;top: 0;}.workHeading {z-index: 5;position: absolute;top: 30px;left: 100px;font-size: 60px;font-weight: 700;color: #fff;text-transform: uppercase;}.contactHeading {z-index: 5;position: absolute;top: 90px;left: 20%;font-size: 60px;font-weight: 700;color: #fff;text-transform: uppercase;letter-spacing: -1px;}.workh {left: 10%;}.workOuter {display: flex;flex-wrap: wrap;justify-content: center;padding: 80px 80px 40px 80px;}.workSection {padding-bottom: 0;}.workWrapper {padding: 0 50px 100px 50px;z-index: 5;}.mobile-outer {color: #121525;height: 500px;width: 300px;border: 6px solid #e5e5e5;background: var(--work-color3);cursor: pointer;transition: 0.5s ease-in-out;}.mobile-inner {height: 90%;width: 100%;position: relative;background: linear-gradient( 44deg, var(--work-color) 0, var(--work-color) 48%, var(--work-color2) 48%, var(--work-color2) 100% );}.mobile-inner:after {content: "";background-color: #eee;height: 30px;width: 30px;border-radius: 50%;position: absolute;bottom: -40px;left: calc(50% - 15px);}.mobile-screen {height: 260px;width: 260px;background: #eee;transition: 0.5s ease-in-out;}.mobile-screen-cv {width: 100%;background: #eee;transition: 0.5s ease-in-out;}.mobile-text {position: absolute;bottom: 0;color: #fff;text-align: left;left: 16px;padding-right: 30px;font-size: 22px;}.mediumLogo {height: 60px;filter: invert(1);position: absolute;left: 0;}.mobile-outer:hover {transition: transform 0.6s ease-in-out;}.mobile-outer:hover .mobile-screen {transform: scalex(1.1) scaleY(1.1);transition: transform 0.6s ease-in-out;}.mobile-outer:hover .mobile-screen-cv {transform: scalex(1.1) scaleY(1.1);transition: transform 0.6s ease-in-out;}.mobile-image {height: 260px;width: calc(100% - 40px);background: #eee;position: absolute;top: 80px;left: 20px;overflow: hidden;transition: 0.6s ease-in-out;}.cv {height: calc(100% - 100px);}.outflow {position: absolute;height: 100%;width: 100%;top: 0;opacity: 0.8;transition: background-color 0.6s ease-in-out;}.mobile-outer:hover .outflow {background-color: #272626;transition: background-color 0.6s ease-in-out;}.outflowIcon {fill: transparent;position: absolute;height: 30px;top: 45%;left: 45%;transition: fill 0.6s ease-in-out;}.mobile-outer:hover .outflowIcon {fill: #fff;transition: fill 0.6s ease-in-out;}.cvText {text-transform: uppercase;font-size: 24px;letter-spacing: -1px;padding-top: 26px;color: #fff;font-weight: 600;}.mobile-header {height: 60px;width: 100%;position: fixed;background: #e5e5e5;z-index: 30;box-shadow: 0 0 15px -4px #7d7777;}.mobile-header-title {color: #131626;font-size: 21px;height: 100%;align-items: center;display: flex;justify-content: center;}#menu {z-index: 2;}#menu-bar {transform: translate(20px, 22px);width: 36px;height: 40px;}.bar {height: 4px;width: 100%;background: #131626;border-radius: 2px;transition: 0.3s ease;}#bar1 {transform: translateY(-5px);}#bar3 {transform: translateY(5px);}.nav {transition: 0.3s ease;display: none;}.nav ul {padding: 20px 22px;}.nav li {list-style: none;padding: 12px 0;}.nav li a {color: #fff;font-size: 20px;text-decoration: none;}.nav li a:hover {font-weight: 700;}#menu, .menu-bg {top: 0;left: 0;position: absolute;text-align: left;}.menu-bg {z-index: 1;width: 0;height: 0;background: #131626;border-radius: 50%;box-shadow: 7px 9px 0 -7px #eee;transition: 0.3s ease;}.change {display: block;}.change .bar {background-color: #fff;}.change #bar1 {transform: translateY(4px) rotateZ(-45deg);}.change #bar2 {opacity: 0;}.change #bar3 {transform: translateY(-6px) rotateZ(45deg);}.change-bg {width: 300px;height: 300px;transform: translate(-47%, -8%);}@media only screen and (max-width: 950px) {#home, header {display: none;}.cv {overflow-y: hidden;}.cvText {font-size: 24px;}}@media only screen and (min-width: 950px) {.mobile-header {display: none;}}@media only screen and (max-width: 600px) {.main {padding: 100px 16px 20px 16px;overflow: hidden;}.imageClass {width: 200px;height: 200px;}.about-section {flex-direction: column-reverse;margin-top: 40px;margin-bottom: 0;}.about-left {width: 100%;padding: 16px;padding-top: 70px;margin-top: -50px;text-align: left;}.about-left::after {content: "";position: absolute;height: 200px;width: 200px;background: #e5e5e5;top: -90px;transform: rotate(45deg);left: calc(50% - 100px);clip-path: ellipse(160px 140px at 10% 20%);}.contact-icons {flex-wrap: wrap;padding-top: 40px;}.contact-icons-wrapper {margin-bottom: 16px;}.contact-form {width: 90%;}#experience {padding: 100px 16px 50px 16px;}.workOuter {padding-top: 20px;}.leftMargin {padding-left: 1650px;}.expWave {display: none;}.contactHeading {left: 16px;top: 85px;font-size: 40px;}.circleSym {right: -220px !important;}.expNew {font-size: 30px !important;}.toggleWrapper {display: none;}}a:link {text-decoration: none !important;}.symb {position: absolute;top: 0;left: 0;}.expNew {font-size: 60px;font-weight: 700;color: var(--bg);text-transform: uppercase;letter-spacing: -1px;margin-bottom: 60px;}.aboutNew {color: var(--bg);}input[type="checkbox"] {appearance: none;width: 80px;height: 8px;background: #444;border-radius: 5px;position: relative;outline: 0;cursor: pointer;}input[type="checkbox"]:after, input[type="checkbox"]:before {position: absolute;content: "";transition: all 0.25s;}input[type="checkbox"]:before {width: 20px;height: 20px;background: #ccc;border: 5px solid #666;border-radius: 50%;top: 50%;left: 0;transform: translateY(-50%);}input[type="checkbox"]:after {width: 25px;height: 25px;background: #666;border-radius: 50%;top: 50%;left: 2px;transform: scale(1) translateY(-50%);transform-origin: 50% 50%;}input[type="checkbox"]:checked:before {left: calc(100% - 28px);}input[type="checkbox"]:checked:after {left: 75px;transform: scale(0);}.menu2 {display: block;position: absolute;top: 4px;left: 10px;height: 50px;width: 50px;border-radius: 50%;z-index: 20;cursor: pointer;-webkit-tap-highlight-color: transparent;}.menu__line {display: block;position: absolute;left: 50%;transform: translateX(-50%);width: 30px;height: 4px;background-color: #2e3f60;border-radius: 13px;transition-duration: 0.4s;-webkit-tap-highlight-color: transparent;}.menu__line:nth-child(1) {top: 14px;}.menu__line:nth-child(2) {top: 23px;}.menu__line:nth-child(3) {bottom: 14px;}.menu2.active {background-color: rgba(0, 0, 0, 0);box-shadow: none;}.menu2.active .menu__line:nth-child(1) {transform: translate(-12px, 9px) rotate(-45deg);background-color: #ffffffc4;}.menu2.active .menu__line:nth-child(2) {transition-duration: 0s;opacity: 0;}.menu2.active .menu__line:nth-child(3) {transform: translate(-12px, -9px) rotate(45deg);background-color: #ffffffc4;}.nav1 {display: block;position: absolute;top: 15px;left: -800px;background-color: #000;height: 50px;width: 50px;border-radius: 50%;z-index: 10;transition-duration: 0.4s;}.nav1.open {background-color: rgba(0, 0, 0, 0.86);width: 60%;height: 100vh;position: absolute;left: -15px;top: 0;border-radius: 0;display: flex;justify-content: center;align-items: center;border-top-right-radius: 50px;border-bottom-right-radius: 50px;}.nav__list {display: none;}.nav__list.show {display: flex;flex-direction: column;list-style: none;margin: 0;padding: 0;}.nav__item {display: flex;align-items: center;justify-content: center;background-color: transparent;width: 100%;opacity: 0;animation-name: fadein;animation-duration: 1s;animation-fill-mode: forwards;}.nav__item:nth-child(1) {animation-delay: 0.2s;}.nav__item:nth-child(2) {animation-delay: 0.3s;}.nav__item:nth-child(3) {animation-delay: 0.4s;}.nav__item:nth-child(4) {animation-delay: 0.5s;}.nav__item:not(:last-child) {margin-bottom: 32px;}.nav__link {-webkit-tap-highlight-color: transparent;font-size: 24px;letter-spacing: 0.1em;text-decoration: none;color: #fff;}@keyframes fadein {0% {opacity: 0;transform: translateY(24px);}100% {opacity: 1;}}.timeline {position: relative;width: 100%;max-width: 1140px;margin: 0 auto;padding: 15px 0;}.timeline::after {content: "";position: absolute;width: 2px;background: var(--exp-handle);top: 0;bottom: 0;left: 50%;margin-left: -1px;}.container {box-sizing: border-box;padding: 15px 30px;position: relative;background: inherit;width: 50%;}.container.left {left: 0;}.container.right {left: 50%;}.container::after {content: "";position: absolute;width: 16px;height: 16px;top: calc(50% - 7px);right: -8px;transform: rotate(45deg);background: var(--exp-handle);z-index: 1;}.container.right::after {left: -8px;}.container::before {content: "";position: absolute;width: 50px;height: 2px;top: calc(50%);right: 8px;background: var(--exp-handle);z-index: 1;}.container.right::before {left: 8px;}.container .date {position: absolute;display: inline-block;top: calc(50% - 5px);text-align: center;font-size: 14px;font-weight: 700;color: var(--exp-date);text-transform: uppercase;letter-spacing: 1px;z-index: 1;}.container.left .date {right: -200px;}.container.right .date {left: -208px;}.container .content {padding: 30px 90px 30px 30px;background: #fff;position: relative;text-align: left;}.container.right .content {padding: 30px 30px 30px 90px;}.container .content h2 {margin: 0 0 10px 0;font-size: 18px;font-weight: 400;color: var(--bg);}.container .content p {margin: 0;font-size: 16px;line-height: 22px;color: #000;}.img-oyo {height: 60px;position: absolute;top: calc(50% - 30px);right: 50px;z-index: 1;}.img-verzeo {height: 70px;position: absolute;top: calc(50% - 35px);right: 50px;z-index: 1;}.img-right {left: 50px;}.more {display: none;}.exp-text-wrapper {display: flex;flex-wrap: wrap;margin-bottom: 10px;}.date-handle {right: -216px !important;}.exp-text {background: var(--exp-handle);padding: 8px;margin-right: 10px;margin-bottom: 10px;font-size: 8px;font-weight: 600;}@media (max-width: 767.98px) {.timeline {overflow: hidden;}.img-hid {display: none;}.timeline::after {left: 10px;}.container {width: 100%;padding-left: 120px;padding-right: 30px;}.container.right {left: 0;padding: 0 0 40px 40px;}.container.left {left: 0;padding: 0 0 40px 40px;}.container.left::after, .container.right::after {left: 2px;}.container.left::before, .container.right::before {left: 10px;width: 30px;}.container.left .date, .container.right .date {left: 62px;right: 0;top: 20px;text-align: left;}.container.left .content, .container.right .content {padding: 50px 20px 30px 20px;}}