html,body{margin:0;padding:0;font-family:Playfair Display,serif;font-optical-sizing:auto;font-style:normal;max-width:100%}pre,code{white-space:pre-wrap!important;word-break:break-word!important}.nav{width:100%;display:flex;justify-content:space-between;padding:10px 20px;margin:0;position:fixed;top:0;left:0;box-sizing:border-box;z-index:100}.nav a{text-decoration:none;color:#000}.hero{max-width:100%;height:100vh;display:flex;position:relative;justify-content:center;align-items:center}.hero-title{position:relative;width:auto;margin:0;padding:0}.hero-title h2{position:absolute;top:-5vmin;left:-10vmin;font-size:13vmin}.hero-title h4{font-size:3.5vmin;font-weight:100;font-style:italic;margin:0;position:relative;bottom:22vmin;text-align:right}#hero-title-main{font-family:WindSong,cursive;font-weight:400;font-style:normal;font-size:25vmin}.slider-wrapper{position:relative;width:100%;margin:auto;height:100vh;perspective:1000px;overflow-x:hidden;background:linear-gradient(180deg,#e6ebf2,#cfd8e6 40%,#1f2a38)}.background-title{position:absolute;top:5%;font-family:Teko;left:50%;transform:translate(-50%,-50%);font-size:15vmin;font-weight:800;color:#f5f5f7da;letter-spacing:.1em;z-index:0;-webkit-user-select:none;user-select:none;overflow-x:hidden;text-shadow:40px 30px 3px rgba(0,0,0,.027)}.slider{display:grid;place-items:center;overflow:hidden;height:100vh;position:relative}.slider-track{display:flex;width:720vmin;animation:scroll 50s linear infinite}.slide{height:35vmin;width:55vmin;display:flex;align-items:center;padding:5vmin;perspective:100px;opacity:.7}.slide video{width:100%;border:1px solid rgba(0,0,0,.476);border-top:none;border-left:none;box-shadow:5px 8px 10px #00000027;border-radius:8px;transition:transform .5s ease,box-shadow .5s ease}.slide:hover{transform:translateZ(20vmin);opacity:1}.slide:hover video{transition:.5s ease-in-out;transform:scale(1.3);z-index:5;position:relative;box-shadow:15px 15px 20px #00000053;border:2px solid ghostwhite}.slider-track:hover{animation-play-state:paused}.gradient{position:absolute;top:0;bottom:0;width:20%;z-index:2;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,rgb(1,22,39) 40%,transparent 100%);mask-image:linear-gradient(to bottom,rgb(1,22,39) 40%,transparent 100%);mask-mode:alpha}.gradient.left{left:0;background:linear-gradient(to right,#f5f5f7,#fff0)}.gradient.right{right:0;background:linear-gradient(to left,#f5f5f7,#01162700)}.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:#ffffff79;border:none;font-size:2vmin;cursor:pointer;padding:2vmin;border-radius:50%}.arrow.left{left:2%}.arrow.right{right:2%}.arrow:hover{transition:.3s ease;font-size:3vmin}@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-360vmin)}}.projects-main{background-color:#f5f5f7;width:100%;padding:8vmin 0}.projects-title{font-weight:100;margin:0 18vmin;font-size:3vmin;font-style:italic;left:-4vmin;position:relative}.projects{display:flex;flex-wrap:wrap;justify-content:center;gap:15vmin;position:relative}.demo{padding:5vmin}.linea{position:absolute;border:1px solid grey;top:-10vmin;left:0;bottom:0;margin:13vmin}.box{position:relative;width:60vmin;height:30vmin}.box img{position:absolute;width:100%;top:0;z-index:10}.card-title{position:relative;transform:translateZ(30px);padding:2vmin;font-family:Teko;right:7vmin;width:25vmin;font-size:3.5vmin;border-top-right-radius:30px;top:2%;background-color:#1601801b;z-index:11;color:#f8f8ff;text-shadow:10px 10px 10px #00000030;border-bottom:3px solid transparent;border-image:linear-gradient(to right,#f8f8ff51 1%,#000 60%) 1;box-shadow:10px 10px 10px #0000002d}.card-number{position:absolute;bottom:0;right:0;padding:.5vmin;margin:0}.box-contents{position:absolute;inset:0;background:url(https://source.unsplash.com/300x300/?cat) 50% 50% / cover no-repeat;box-shadow:0 0 4.5vmin #0000004d;transition:.5s ease}.hover-point{position:absolute;z-index:2;width:calc(100% / 3);height:calc(100% / 3);z-index:15}.hover-point:nth-child(1){top:0;left:0}.hover-point:nth-child(2){top:0;left:calc(100% / 3)}.hover-point:nth-child(3){top:0;right:0}.hover-point:nth-child(4){top:calc(100% / 3);left:0}.hover-point:nth-child(5){top:calc(100% / 3);right:0}.hover-point:nth-child(6){bottom:0;left:0}.hover-point:nth-child(7){bottom:0;left:calc(100% / 3)}.hover-point:nth-child(8){bottom:0;right:0}.hover-point:nth-child(1):hover~.box-contents{box-shadow:15px 15px 50px #0000004d;transform-origin:right top;transform:perspective(1000px) rotateX(10deg) rotateY(-10deg) rotate(2deg)}.hover-point:nth-child(2):hover~.box-contents{box-shadow:0 15px 50px #0000004d;transform-origin:center top;transform:perspective(1000px) rotateX(10deg)}.hover-point:nth-child(3):hover~.box-contents{box-shadow:-15px 15px 50px #0000004d;transform-origin:left top;transform:perspective(1000px) rotateX(10deg) rotateY(10deg) rotate(-2deg)}.hover-point:nth-child(4):hover~.box-contents{box-shadow:15px 5px 50px #0000004d;transform-origin:left center;transform:perspective(1000px) rotateY(-10deg)}.hover-point:nth-child(5):hover~.box-contents{box-shadow:-15px 5px 50px #0000004d;transform-origin:right center;transform:perspective(1000px) rotateY(10deg)}.hover-point:nth-child(6):hover~.box-contents{box-shadow:15px -15px 50px #0000004d;transform-origin:right bottom;transform:perspective(1000px) rotateX(-10deg) rotateY(-10deg) rotate(-2deg)}.hover-point:nth-child(7):hover~.box-contents{box-shadow:0 -15px 50px #0000004d;transform-origin:center bottom;transform:perspective(1000px) rotateX(-10deg)}.hover-point:nth-child(8):hover~.box-contents{box-shadow:-15px -15px 50px #0000004d;transform-origin:left bottom;transform:perspective(1000px) rotateX(-10deg) rotateY(10deg) rotate(2deg)}input[type=checkbox]:checked~.box .hover-point{counter-increment:point}input[type=checkbox]:checked~.box .hover-point:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);content:counter(point);color:#fff;font-size:1.5rem}input[type=checkbox]:checked~.box .hover-point:nth-child(1){background:#2ecc7180}input[type=checkbox]:checked~.box .hover-point:nth-child(2){background:#3498db80}input[type=checkbox]:checked~.box .hover-point:nth-child(3){background:#9b59b680}input[type=checkbox]:checked~.box .hover-point:nth-child(4){background:#f1c40f80}input[type=checkbox]:checked~.box .hover-point:nth-child(5){background:#e67e2280}input[type=checkbox]:checked~.box .hover-point:nth-child(6){background:#e74c3c80}input[type=checkbox]:checked~.box .hover-point:nth-child(7){background:#1abc9c80}input[type=checkbox]:checked~.box .hover-point:nth-child(8){background:#95a5a680}.box{margin-top:2em}.skills{background-color:#011627}#skills-title{color:#637777;font-weight:100;font-size:3vmin;font-style:italic;position:relative;margin-right:auto;transform:translate(100%)}