@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);body.dark-mode .cloud{background:#999}.cloud{background:#fafafa;box-shadow:4px 4px 0 rgba(0,0,0,.05);border-radius:100px;position:absolute;animation-name:cloud-scroll;animation-iteration-count:infinite;animation-timing-function:linear;left:-300px;opacity:.9}.cloud::after,.cloud::before{content:"";position:absolute;display:inline-block;background:inherit;border-radius:50%}.cloud::before{width:50%;height:150%;top:-50%;left:38%}.cloud::after{width:30%;height:90%;top:-20%;left:20%}#airplane{position:absolute;top:32px;right:-250px;animation-name:plane-scroll;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:45s;z-index:2;filter:drop-shadow(1px 1px 1px rgba(0, 0, 0, .2))}#cloud1{width:280px;height:96px;top:8%;animation-duration:90s;z-index:5}#cloud2{width:175px;height:60px;top:5%;animation-duration:120s;animation-delay:-85s;z-index:4}#cloud3{width:125px;height:40px;top:6%;animation-duration:150s;animation-delay:-50s;z-index:3}#cloud4{width:60px;height:20px;top:5%;animation-duration:180s;animation-delay:-90s;z-index:2}#cloud5{width:30px;height:10px;top:2%;animation-duration:220s;animation-delay:-50s;z-index:1}@keyframes cloud-scroll{to{transform:translateX(calc(100vw + 350px))}}@keyframes plane-scroll{to{transform:translateX(calc((100vw + 650px) * -1))}}body.dark-mode .sun{transform:translateX(400px)}.sun{width:28rem;height:28rem;position:absolute;top:-12%;right:-5%;background:radial-gradient(transparent 50%,#fff),radial-gradient(yellow,transparent 70%);-webkit-mask-image:radial-gradient(black 40%,transparent 65%);mask-image:radial-gradient(black 40%,transparent 65%);border-radius:50%;z-index:1;transition:transform .2s ease-in}.sun::after,.sun::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:center;border-radius:50%;-webkit-mask-image:radial-gradient(black 40%,transparent 65%);mask-image:radial-gradient(black 40%,transparent 65%)}.sun::before{background:repeating-conic-gradient(from 0deg,#ff0 0deg 20deg,transparent 20deg 40deg);animation:scale 5s ease-out infinite}.sun::after{background:radial-gradient(orange,#ff0 27%,transparent calc(29%) 100%),radial-gradient(gold,transparent 70%),repeating-conic-gradient(from 0deg,gold 0deg 5deg,transparent 5deg 10deg);transform:rotate(15deg);animation:rotate 360s linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes scale{0%{transform:scale(1)}20%{transform:scale(1.2)}40%{transform:scale(.8)}60%{transform:scale(1.1)}70%{transform:scale(.9)}100%{transform:scale(1)}}body.dark-mode .moon{transform:translateY(300px)}.moon{width:28rem;height:28rem;position:absolute;top:-410px;right:-5%;-webkit-mask-image:radial-gradient(black 40%,transparent 65%);mask-image:radial-gradient(black 40%,transparent 65%);border-radius:50%;z-index:1;transition:transform .2s ease-in}.moon::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:center;border-radius:50%;-webkit-mask-image:radial-gradient(black 40%,transparent 65%);mask-image:radial-gradient(black 40%,transparent 65%);background:radial-gradient(#ccc 0,#f0f0f0 27%,transparent calc(29%) 100%),radial-gradient(#fff,transparent 70%)}#starry-sky{z-index:0;position:absolute;top:0;left:0;width:100vw;height:250px;background-color:transparent;background-image:radial-gradient(white,rgba(255,255,255,.2) 3px,transparent 30px),radial-gradient(white,rgba(255,255,255,.125) 2px,transparent 20px),radial-gradient(white,rgba(255,255,255,.1) 1px,transparent 15px),radial-gradient(rgba(255,255,255,.4),rgba(255,255,255,.15) 2px,transparent 25px);background-size:580px 580px,340px 340px,270px 270px,225px 225px;background-position:-150px -100px,50px 0,0 -100px,-70px -10px;opacity:0;transition:opacity .4s ease-in}body.dark-mode #starry-sky{opacity:1}html{box-sizing:border-box;overflow-x:hidden;font-family:Poppins,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#324e72}@media screen and (max-width:1399px){html{font-size:15px}}@media screen and (max-width:799px){html{font-size:14px}}*,::after,::before{box-sizing:inherit}::selection{background:#324e72;color:#fff}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:rgba(0,0,0,.1)}::-webkit-scrollbar-thumb{background:#324e72;border-radius:0 1rem 1rem 0}.hidden{display:none!important}.transparent{opacity:0!important}@media screen and (max-width:599px){.hide-sm{display:none!important}}.show-sm{display:none!important}@media screen and (max-width:599px){.show-sm{display:flex!important}}body{margin:0;overflow-x:hidden}body.dark-mode #app{background:linear-gradient(to right top,#02071e,#000017)}body.dark-mode hr{background:rgba(255,255,255,.05)}body.dark-mode #airplane{display:none}body.dark-mode .side-nav-toggle{background:#c5f1f3;color:#324e72}body.dark-mode footer{background:#111;color:#fff}body.dark-mode a{color:#c5f1f3}body.dark-mode .card{background:#111}body.dark-mode ::-webkit-scrollbar-track{background:rgba(255,255,255,.25)}body.dark-mode ::-webkit-scrollbar-thumb{background:#c5f1f3}body.dark-mode #dark-mode-toggle{border-color:#fff}body.dark-mode .side-card{background:#111;position:relative}body.dark-mode .side-card h4,body.dark-mode .side-card p,body.dark-mode .side-card ul.sections.li{color:#fff}body.dark-mode .side-card ul.sections li{color:#c5f1f3}body.dark-mode .side-card ul.sections li::after{background:#c5f1f3}body.dark-mode .side-card ul.sections li.active,body.dark-mode .side-card ul.sections li:focus,body.dark-mode .side-card ul.sections li:hover{background:rgba(255,255,255,.05)}body.dark-mode .side-card ul.sections li img{filter:invert(1)}body.dark-mode .side-card .social-links a{filter:invert(1)}body.dark-mode .content-area>div{background:linear-gradient(to right bottom,rgba(100,100,100,.5),rgba(100,100,100,.25));color:#fff}body.dark-mode .content-area>div h1{color:#c5f1f3}body.dark-mode .content-area>div h1::after{background:rgba(255,255,255,.05)}body.dark-mode .content-area>div img:is([alt="Github logo"],[alt="Vercel logo"]){filter:invert(1)}body.dark-mode .content-area>div #contact-area form{background:#111}body.dark-mode .content-area>div #contact-area form input,body.dark-mode .content-area>div #contact-area form textarea{background:#444;color:#fff}body.dark-mode .content-area>div #contact-area form input:focus,body.dark-mode .content-area>div #contact-area form textarea:focus{border:2px solid #c5f1f3}hr{width:100%;border:none;height:2px;min-height:2px;background:rgba(0,0,0,.05)}.cloud,.skills-list-card,footer,form,hr,input,textarea{transition:background .3s ease-out}a{font-weight:600;color:#324e72;display:inline-flex}h1,h4,li,p{transition:color .3s ease-out}.card{background:#fff;border-radius:.5rem;padding:1.5rem;box-shadow:0 2px 6px -1px rgba(0,0,0,.2);margin-bottom:2rem}#app{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 36px);background:linear-gradient(to right top,#65dfc9,#6cdbeb);padding-top:3rem;position:relative}.side-nav-toggle{content:"";position:absolute;top:50%;left:100%;transform:translateY(-50%);width:24px;height:200px;border-radius:0 8px 8px 0;background:#324e72;color:#c5f1f3;display:flex;align-items:center;justify-content:center;cursor:pointer}.window{width:90%;max-width:1280px;height:calc(100vh - 108px);max-height:800px;border-radius:1rem;display:flex;overflow:hidden;z-index:100}.side-card{width:320px;padding:2rem;display:flex;flex-direction:column;align-items:center;background:#fff;z-index:10;box-shadow:2px 0 10px 0 rgba(0,0,0,.05);text-align:center;position:relative;transition:background .3s ease-out}.side-card.mobile{position:absolute!important;left:0;top:0;height:100vh;transform:translateX(-100%);transition:background .3s ease-out,transform .3s ease-out;padding-top:4rem;width:300px!important;z-index:1000}.side-card.mobile.toggled{transform:translateX(0)}.side-card.mobile img.portrait{height:64px;width:64px}.side-card .dark-mode-toggle{position:absolute;width:42px;height:42px;top:.75rem;left:.75rem;font-size:1.5rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px -1px rgba(0,0,0,.2);background:#444;border:3px solid #111;border-radius:50%;cursor:pointer;transition:all .15s ease-in;border-color:#000}.side-card .dark-mode-toggle:hover{filter:brightness(1.2);transform:scale(1.15)}.side-card img.portrait{border-radius:50%;width:125px;height:125px;filter:hue-rotate(365deg) brightness(.95)}.side-card h4{color:#111;margin:.5rem 0;font-size:1.5rem}.side-card p{color:#111;margin-top:0}.side-card ul.sections{list-style:none;font-size:1.5rem;padding-inline-start:0;text-align:center;width:100%}.side-card ul.sections li{font-weight:500;margin-bottom:2rem;padding:.5rem 1.5rem;position:relative;display:flex;align-items:center;height:3.25rem;border-radius:.5rem;outline:0}.side-card ul.sections li::after{content:"";width:100%;height:2px;background:#324e72;position:absolute;bottom:1px;left:0;transform:scaleX(0);transition:.15s transform linear}.side-card ul.sections li.active,.side-card ul.sections li:focus,.side-card ul.sections li:hover{cursor:pointer;background:#f4f4f4}.side-card ul.sections li.active::after,.side-card ul.sections li:focus::after,.side-card ul.sections li:hover::after{transform:scaleX(1)}.side-card ul.sections li.active{font-weight:700}.side-card ul.sections li img{width:32px;height:32px;margin-right:2rem}.side-card ul.sections li span{width:100%;text-align:left}.side-card .social-links{display:flex;align-items:flex-end;justify-content:space-evenly;width:100%;height:100%}.side-card .social-links a{transition:transform .2s ease-in-out;text-decoration:none}.side-card .social-links a:hover{transform:translateY(-4px)}.window .content-area{width:100%;position:relative;color:#111}.window .content-area>div{width:100%;height:100%;padding:2rem;background:linear-gradient(to right bottom,rgba(255,255,255,.7),rgba(255,255,255,.3));backdrop-filter:blur(16px);transition:left .3s cubic-bezier(.45,.82,.81,.92);position:absolute;border-radius:0 1rem 1rem 0;left:-100%;overflow:auto}.window .content-area>div.shown{left:0}.window .content-area>div h1{font-size:3rem;margin:0;position:relative;margin-bottom:3rem;color:#324e72}.window .content-area>div h1::after{content:"";position:absolute;left:0;bottom:-24px;width:280px;height:4px;background:rgba(0,0,0,.05);border-radius:100px}.window .content-area>div #about-content{display:grid;grid-auto-flow:column;gap:2rem}@media screen and (max-width:1279px){.window .content-area>div #about-content .about-illustration{display:none}}.window .content-area>div #skills-content ul.skills-list{margin:0;padding-inline-start:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:space-around}.window .content-area>div #skills-content ul.skills-list img{width:64px;height:64px}.window .content-area>div #skills-content ul.skills-list li{width:96px;text-align:center;margin-top:1rem}.window .content-area>div #skills-content ul.skills-list h5{margin:0;font-size:1rem}.window .content-area>div #projects-area .project-container{display:flex;flex-direction:row}@media screen and (max-width:959px){.window .content-area>div #projects-area .project-container{flex-direction:column}}.window .content-area>div #projects-area .project-container .details{width:100%;max-width:650px}.window .content-area>div #projects-area .project-container .details>a{font-size:1.5rem;font-weight:600}.window .content-area>div #projects-area .project-container img{width:40%}.window .content-area>div #contact-area form{position:relative;padding:32px 24px;display:flex;justify-content:center;flex-wrap:wrap;background:#fff;border-radius:1rem;box-shadow:0 2px 6px -1px rgba(0,0,0,.2);transition:.3s opacity ease-in}.window .content-area>div #contact-area form .input-wrapper{margin:.75rem 0;width:100%}.window .content-area>div #contact-area form label{display:block;font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.window .content-area>div #contact-area form input{background:#f4f4f4;border:2px solid transparent;border-radius:.5rem;font-size:1.2rem;outline:0;width:100%;padding:.75rem}.window .content-area>div #contact-area form input:focus{border:2px solid #324e72}.window .content-area>div #contact-area form textarea{outline:0;background:#f4f4f4;width:100%;border:2px solid transparent;border-radius:.5rem;resize:none;font-size:1.2rem;padding:.75rem}.window .content-area>div #contact-area form textarea:focus{border:2px solid #324e72}.window .content-area>div #contact-area form button{background:#324e72;border-width:3px;border-style:solid;border-color:#324e72;color:#fff;font-size:18px;text-transform:uppercase;transition:.2s border-color ease-in-out;border-radius:6px;padding:16px 48px;font-weight:700;outline:0;margin-top:16px}.window .content-area>div #contact-area form button:focus,.window .content-area>div #contact-area form button:hover{cursor:pointer;filter:brightness(1.25);box-shadow:0 2px 6px -1px rgba(0,0,0,.2)}.window .content-area>div #contact-area form #errorMsg{width:100%;display:none;text-align:center;color:#ed0a0a}.window .content-area>div #contact-area #form-post-msg{width:100%;padding:2rem;font-size:1.5rem;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:.3s opacity ease-in}footer{background:#fff;font-weight:600;color:#111;height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;width:100%}