*{padding:0;margin:0;cursor:none;scroll-behavior:smooth;font-family:Roboto,sans-serif;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::-webkit-scrollbar-track{box-shadow:inset 0 0 2px #fff;border-radius:5px;background-color:#f5f5f5}::-webkit-scrollbar{width:7px;background-color:#f5f5f5}::-webkit-scrollbar-thumb{border-radius:5px;box-shadow:inset 0 0 2px #fff;background-color:#69696969}.wrapper{width:100vw;height:100vh;overflow-y:auto}.cursor{pointer-events:none}.cursor__ball{position:fixed;top:0;left:0;mix-blend-mode:difference;z-index:1000}.cursor__ball circle{fill:#f7f8fa}@media (hover:none){*{cursor:auto}.cursor{display:none}}.navbar{position:fixed;top:0;left:0;height:10vh;background-color:#fff;z-index:100;justify-content:space-around;align-items:center;box-shadow:0 0 10px rgba(0,0,0,.1)}.navbar,header{width:100%;display:flex}header{position:relative;flex-direction:column;justify-content:center;align-items:flex-start;margin-top:10vh;height:calc(100vh - 10%);background-color:#f5f5f5;background-blend-mode:multiply;filter:contrast(120%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='733' height='610.8' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.11'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");background-position:start;background-repeat:no-repeat;background-size:cover}header:after{background:linear-gradient(0deg,#fff,50%,transparent);bottom:0}header:after,header:before{content:"";height:10%;width:100%;position:absolute;left:0}header:before{background:linear-gradient(180deg,#fff,50%,transparent);top:0}header .side-white{z-index:-1;content:"";height:100%;width:100%;background:linear-gradient(90deg,#fff,transparent);position:absolute;top:0;left:0}header h1{position:relative;padding-left:1.5em;font-family:Roboto,sans-serif;font-size:calc(2.5em + 3vw);color:#353535;width:70%;height:70px;overflow:hidden}header h1 span{display:block;color:#353535;position:absolute}.line{width:80%;height:calc(3vw + 4.5em);position:relative;overflow:hidden;color:#353535}.line span{font-weight:700;padding-left:1.5em;position:absolute;font-size:calc(1.5em + 3vw);line-height:calc(5vw -.7em)}.primary{color:#ffc107}.scroll-down{position:absolute;bottom:10%;align-self:center;justify-self:flex-end;fill:#353535;font-family:Roboto,sans-serif;cursor:pointer;transition:all .3s ease-in-out;width:calc(2.5em + 3vw);height:calc(2.5em + 3vw);transform:scale(.001)}.main{width:100%;height:calc(100vh - 7em);padding-top:7em;flex-wrap:wrap;background-color:#fff}.main,.nav-link{display:flex;justify-content:center}.nav-link{width:calc(100% / 3);align-items:center}.navbar a{text-underline-offset:5px;text-decoration-thickness:2px;-webkit-text-decoration-color:#fff;text-decoration-color:#fff;text-transform:uppercase;letter-spacing:2px;font-size:calc(18px + (23 - 18) * ((100vw - 600px) / (1920 - 300)));font-family:Roboto,sans-serif;font-weight:700}.navbar a,.navbar a:hover{color:#353535;transition:color .4s ease-in-out,-webkit-text-decoration-color .4s ease-in-out;transition:text-decoration-color .4s ease-in-out,color .4s ease-in-out;transition:text-decoration-color .4s ease-in-out,color .4s ease-in-out,-webkit-text-decoration-color .4s ease-in-out}.navbar a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;-webkit-text-decoration-color:#353535;text-decoration-color:#353535}.menu{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#696969;z-index:100;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;transform:translateX(100%);transition:.3s}.menu.active{transform:translateX(0);transition:.3s}.close-menu{font-size:2em;position:absolute;top:1em;right:2em;color:#fff;cursor:pointer;z-index:1000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu nav{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:2em 3em}.menu nav a{text-underline-offset:5px;-webkit-text-decoration-color:#fff;text-decoration-color:#fff;text-transform:uppercase;letter-spacing:2px;font:700;font-size:1.5em;font-family:Roboto,sans-serif}.menu nav a,.menu nav a:hover{color:#fff;text-decoration:none;transition:color .4s ease-in-out,-webkit-text-decoration-color .4s ease-in-out;transition:text-decoration-color .4s ease-in-out,color .4s ease-in-out;transition:text-decoration-color .4s ease-in-out,color .4s ease-in-out,-webkit-text-decoration-color .4s ease-in-out}.menu nav a:hover{text-underline-offset:5px;text-decoration-thickness:1px;-webkit-text-decoration-color:#fff;text-decoration-color:#fff}.flip-card{background-color:transparent;padding:2em;width:calc((3vw + 10em) + 20vh + (1vw + 20px));height:calc((3vh + 20em) + 20vh + (1vw + 20px));border-radius:.5em;perspective:1000px}.flip-card-inner{position:relative;width:100%;height:100%;border-radius:inherit;text-align:center;transition:transform .8s;transform-style:preserve-3d;box-shadow:0 2px 4px 0 #afb6af,0 3px 10px 0 #caceca}.flip-card-back,.flip-card-front{position:absolute;width:100%;height:100%;border-radius:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:10000;transition:.3s}.flip-card-front{background-color:#fff;color:#353535;display:flex;flex-direction:column;justify-content:flex-start}.flip-card-front .skill-image{transition:.3s;height:70%;background-color:#696969;background-repeat:no-repeat;background-position:50%;background-size:cover;border-radius:.5em;margin:.5em;padding:.5em}.flip-card-front h1{position:absolute;width:90%;padding:.5em;font-size:calc(1.5em + (23 - 18) * ((100vw - 600px) / (1920 - 300)));background:hsla(0,0%,90%,.5);border-radius:.3em;bottom:10%;left:0;right:0;margin-left:auto;margin-right:auto;transition:.3s}.flip-card-front:hover h1{transition:.3s;background:hsla(0,0%,100%,.7)}.flip-card-front:hover .skill-image{transition:.3s;height:100%}.flip-card-back:hover,.flip-card-front:hover{box-shadow:0 8px 16px 0 #afb6af,0 3px 10px 0 #caceca;transition:.3s}.flip-card-back{background-color:#fff;color:#353535;transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center}.skill-details{padding-top:15%;padding-bottom:15%}.details,.skill-details{display:flex;flex-direction:column;width:100%;height:100%}.details{padding-top:10%;justify-content:space-evenly}.line-3{font-family:PT Sans,sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;margin:20px 0 0;position:relative;letter-spacing:6px}.line-3:after,.line-3:before{content:" ";position:absolute;width:50px;height:5px;border-top:1px solid #222;border-bottom:1px solid #222}.line-3:before{margin:7px 0 0 -60px}.line-3:after{margin:7px 0 0 10px}.line-6{font-family:Roboto Mono,sans-serif;color:#353535;font-size:17px;font-style:normal;font-weight:700;letter-spacing:4px}.line-6:after,.line-6:before{content:"";font-family:PT Sans,sans-serif;font-style:normal;font-weight:400;text-decoration:inherit;position:relative;font-size:16px;margin:0 10px;top:2px}.menu-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;justify-self:center;align-self:center}.menu-container a{width:auto;text-align:center;color:#fff;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:2px;-webkit-text-decoration-color:#353535;text-decoration-color:#353535;text-transform:uppercase;letter-spacing:2px;font:bolder;font-size:1.5em;font-family:Roboto,sans-serif;transition:color .4s ease-in-out,-webkit-text-decoration-color .4s ease-in-out;transition:text-decoration-color .4s ease-in-out,color .4s ease-in-out;transition:text-decoration-color .4s ease-in-out,color .4s ease-in-out,-webkit-text-decoration-color .4s ease-in-out}.menu-container div{width:100%;height:100%;margin:1em;display:flex;flex-direction:column;justify-items:center;justify-content:center;position:relative;overflow:hidden}.hvr-shutter-out-vertical{display:inline-block;vertical-align:middle;transform:translateZ(0);box-shadow:0 0 1px #696969;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;background:#696969;transition-property:color;transition-duration:.3s}.hvr-shutter-out-vertical:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:#353535;transform:scaleY(0);transform-origin:50%;transition-property:transform;transition-duration:.3s;transition-timing-function:ease-out}.hvr-shutter-out-vertical:active,.hvr-shutter-out-vertical:focus,.hvr-shutter-out-vertical:hover{color:#fff}.hvr-shutter-out-vertical:active:before,.hvr-shutter-out-vertical:focus:before,.hvr-shutter-out-vertical:hover:before{transform:scaleY(1)}span.ripple{position:absolute;border-radius:50%;transform:scale(0);-webkit-animation:ripple .6s linear;animation:ripple .6s linear;background-color:hsla(0,0%,100%,.7)}@-webkit-keyframes ripple{to{transform:scale(4);opacity:0}}@keyframes ripple{to{transform:scale(4);opacity:0}}