@import "https://fonts.googleapis.com/css2?family=Cal+Sans&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}h1,h2,h3,h4,h5,h6{font-family:Cal Sans,sans-serif}p,a,li{font-family:Lato,sans-serif}.app-container{background-color:#fcfcfc;flex-direction:column;align-items:center;width:100%;display:flex}.app-container .app{flex-direction:column;align-items:center;width:100%;max-width:1300px;padding:1%;display:flex}.app-container-dark{background-color:#292929}.highlight{padding-right:3%;transition:all .1s;display:inline-block}.highlight:hover{transform:translateY(-10px)}.inline-link{background-color:#292929;border-radius:2px;padding:1px 5px}.inline-link .highlight-link{background:linear-gradient(16deg,#c7ffb4 0%,#ff98db 100%);color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:700;transition:all .1s;display:inline-block}.inline-link .highlight-link:hover{transform:translateY(-3px)}.bold{font-weight:700}.link{color:#292929;font-size:1rem;text-decoration:none}.nav-container{justify-content:end;align-items:center;gap:2%;width:100%;display:flex}.nav-container .navbar{border-radius:5px;justify-content:space-around;align-items:center;width:25%;height:40px;display:flex}.nav-container .navbar a{font-size:1rem;text-decoration:none}.hero{width:100%;padding-top:10%;display:flex}.hero .hero-left{flex:1}.hero .hero-left h1{color:#292929;background:linear-gradient(16deg,#c7ffb4 0%,#ff98db 100%);border-radius:10px;width:73%;padding-left:1%;font-size:6rem}.hero .hero-left h2,.hero .hero-left h3{font-size:4rem}.hero .hero-left .links{align-items:end;gap:3%;height:50px;display:flex}.hero .hero-right,.hero .hero-right video{position:relative}.hero .hero-right .shadow{filter:blur(5px);opacity:.3;background:linear-gradient(16deg,#c7ffb4 0%,#ff98db 100%);border-radius:100%;width:200px;height:40px;animation-name:shadow-width;animation-duration:4.5s;animation-iteration-count:infinite;position:absolute;top:100%;left:0%;transform:translate(85%,-130%)}.work-container{width:100%;padding-top:7%}.work-container .project-cards-container{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:2%;width:100%;padding-top:5%;display:grid}.work-container h3{font-size:3rem}.project-card{background:#fcfcfc;border:3px solid #000;border-radius:14px;height:400px;margin:1%;padding:2%;transition:all .2s;position:relative;scale:1}.project-card:hover{scale:1.1}.project-card img{border-radius:10px;width:100%;height:100%}.project-card .overlay{color:#fcfcfc;border-radius:10px;flex-direction:column;justify-content:space-between;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0%;left:0%}.project-card .overlay .notch{background-color:#fcfcfc;border-radius:10px;justify-content:center;align-items:center;width:10%;height:30px;display:flex}.project-card .overlay .notch .cam{background:linear-gradient(16deg,#c7ffb4 0%,#ff98db 100%);border-radius:100%;width:10px;height:10px}.project-card .overlay .icon-bar{background:linear-gradient(16deg,#c7ffb4 0%,#ff98db 100%);border-radius:10px;justify-content:center;align-items:center;gap:10%;width:50%;height:45px;margin-bottom:20px;display:flex}.project-card-name{opacity:0;background:#fcfcfc;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:10%;width:50%;height:45px;margin-bottom:20px;display:flex;overflow:hidden;transform:translateY(-10px)}.project-card-name h4{color:#292929;font-size:2rem}.contact-container{justify-content:end;width:100%;padding-top:15%;display:flex}.contact-container .contact-left,.contact-container .contact-left video{position:relative}.contact-container .contact-left .shadow{filter:blur(5px);opacity:.3;background:linear-gradient(16deg,#c7ffb4 0%,#ff98db 100%);border-radius:100%;width:200px;height:40px;animation-name:shadow-width;animation-duration:4.5s;animation-iteration-count:infinite;position:absolute;top:100%;left:0%;transform:translate(85%,-130%)}.contact-container .lets-work{flex-direction:column;align-items:end;gap:5%;height:400px;display:flex}.contact-container .lets-work .content{flex-direction:column;justify-content:center;align-items:end;width:100%;display:flex}.contact-container .lets-work .content h4{text-align:end;background:linear-gradient(16deg,#c7ffb4 0%,#ff98db 100%);border-radius:10px;font-size:6rem}.contact-container .lets-work .content p{text-align:end;width:75%;font-size:1.6rem}.contact-container .lets-work .socials{justify-content:end;gap:2%;width:75%;height:50px;display:flex}.contact-container .lets-work .cv{justify-content:end;gap:2%;width:35%;height:50px;display:flex}.about-container{width:100%;height:fit-content;padding-top:10%}.about-container h3{font-size:3rem}.about-container .content-grid{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:5%;height:fit-content;padding-top:2.5%;display:grid}.about-container .content-grid .text-block{flex-direction:column;gap:7.5%;width:100%;padding:5% 0%;display:flex}.about-container .content-grid .text-block h4{color:#292929;border-radius:10px;width:80%;padding:1% 0%;font-size:2rem}.about-container .content-grid .text-block p{text-align:justify;font-size:1.1rem}.about-container .content-grid .text-block .links{flex-wrap:wrap;justify-content:space-between;gap:20% 10%;width:80%;display:flex}.about-container .content-grid .text-block-large{width:80%;padding:2% 0%}.about-container .content-grid .text-block-large p{text-align:justify;font-size:3.5rem}.icon-button{border-radius:5px;width:35px;height:35px;transition:all .1s}.icon-button:hover{background-color:#c7ffb4;border-top:1px solid #c7ffb4;border-left:1px solid #c7ffb4;border-right:1px solid #c7ffb4;height:37px;padding-bottom:.25%;transform:translateY(-1px)}.icon-button .button{background-color:#292929;border:none;border-radius:5px;outline:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.icon-button .button:hover{background:linear-gradient(16deg,#c7ffb4 0%,#ff98db 100%)}.icon-button .button img{filter:invert();width:50%;height:50%}.icon-button-large{width:55px;height:55px}.icon-button-large:hover{height:60px;padding-bottom:1%;transform:translateY(-3px)}.linkable-icon-button .icon-button .button{cursor:pointer}.button-container{border-radius:5px;width:150px;height:40px;transition:all .1s}.button-container:hover{background-color:#c7ffb4;border-top:1px solid #c7ffb4;border-left:1px solid #c7ffb4;border-right:1px solid #c7ffb4;height:45px;padding-bottom:1%;transform:translateY(-3px)}.button-container:active{background-color:#c7ffb4;border-top:1px solid #c7ffb4;border-left:1px solid #c7ffb4;border-right:1px solid #c7ffb4;height:40px;padding-bottom:0%;transform:translateY(1px)}.button-container .button{cursor:pointer;color:#fcfcfc;background-color:#292929;border:none;border-radius:5px;outline:none;width:100%;height:100%}.button-container .button p{font-size:1.1rem}.button-container .button:hover{background:linear-gradient(16deg,#c7ffb4 0%,#ff98db 100%)}.button-container .button:active{background:linear-gradient(192deg,#c7ffb4 0%,#ff98db 100%);box-shadow:inset 0 1px #c7ffb4}@keyframes shadow-width{0%{width:200px}50%{width:190px}to{width:200px}}@media only screen and (width<=800px){.nav-container{z-index:3;background-color:#292929;border-radius:10px;justify-content:center;width:95%;position:fixed;top:100%;transform:translateY(-150%)}.nav-container .navbar{width:100%}.nav-container .navbar a{color:#fcfcfc}.hero{flex-direction:column}.hero .hero-left h1{text-align:center;width:100%;font-size:3rem}.hero .hero-left h2,.hero .hero-left h3{text-align:center;font-size:2rem}.hero .hero-left .links{justify-content:center}.hero .hero-right .shadow{transform:translate(47%,-130%)}.work-container .project-cards-container{grid-template-rows:1fr 1fr 1fr 1fr;grid-template-columns:1fr;padding-bottom:20%}.work-container .project-cards-container .project-card{height:225px}.work-container .project-cards-container .project-card .overlay .notch{width:20%;height:20px}.about-container .content-grid{grid-template-rows:2fr 2fr 1fr 2fr;grid-template-columns:1fr;gap:1%;padding-bottom:20%}.about-container .content-grid .text-block-large{width:100%}.about-container .content-grid .text-block-large p{font-size:3rem}.contact-container .contact-left{display:none}.contact-container .lets-work{height:auto;padding-bottom:40%}.contact-container .lets-work .content{align-items:center}.contact-container .lets-work .content h4{font-size:3rem}.contact-container .lets-work .content p{text-align:center}.contact-container .lets-work .socials,.contact-container .lets-work .cv{justify-content:center;width:100%}.contact-container .lets-work .go-back{justify-content:center;width:100%;display:flex}}