:root{font-size:15px}::-webkit-scrollbar{display:none}@keyframes spinLeftHalf{0%{transform:rotate(45deg) rotate3d(1,1,0,0);z-index:11}50%{transform:rotate(45deg) rotate3d(1,1,0,180deg);z-index:9}to{transform:rotate(45deg) rotate3d(1,1,0,355deg);z-index:9}}@keyframes spinRightHalf{0%{transform:rotate(45deg) rotate3d(1,1,0,0);z-index:9}50%{transform:rotate(45deg) rotate3d(1,1,0,180deg);z-index:9}to{transform:rotate(45deg) rotate3d(1,1,0,355deg);z-index:11}}@keyframes dropIn{0%{opacity:0;transform:translateY(-20vh)}to{opacity:1;transform:none}}@keyframes mouse-appear{0%{opacity:0;transform:translate(-50%,5vh)}80%{opacity:1;transform:translate(-50%)}to{opacity:1;transform:translate(-50%)}}@keyframes mouse-disappear{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-10vh)}}@keyframes bounce{0%{opacity:1;transform:translate(-50%)}10%{opacity:1;transform:translate(-50%)}40%{opacity:1;transform:translate(-50%,50%)}to{opacity:1;transform:translate(-50%)}}@keyframes revealLinks{0%{opacity:0;transform:translateY(10vh)}80%{opacity:1;transform:translateY(-3vh)}to{opacity:1;transform:none}}@keyframes appear{0%{opacity:0;transform:translateY(5vh)}to{opacity:1;transform:translateY(0)}}*{margin:0;padding:0;box-sizing:border-box;color:#e6ffff;font-family:Montserrat,sans-serif}main{width:100%;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:#1a1a1a}section{position:relative;width:100%}h2{position:absolute;top:45%;left:max(2.75%,24px);transform:translate(-50%) rotate(-90deg);text-align:center;font-size:clamp(20px,3vw,50px);color:#1a1a1a}h3{color:#00a782;font-size:20px}.button-primary{width:145px;height:40px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:40px;padding:2px 5px;text-transform:uppercase;border:2px solid gray;border-radius:2px;background-color:transparent;cursor:pointer;opacity:0;color:gray;font-size:20px;font-weight:500;transition-duration:.3s;animation:.7s ease-in-out 2.1s appear forwards}.button-primary:hover{transition:.5s ease;border:2px solid rgb(0,167,130);color:#00a782;background-color:#000}.bg-triangle-top{width:100vw;height:0;border-top:20vh solid rgb(26,26,26);border-left:30vw solid transparent;border-right:70vw solid transparent;background-color:#e6ffff}.bg-triangle-bottom{width:100vw;height:0;border-bottom:20vh solid rgb(26,26,26);border-left:70vw solid transparent;border-right:30vw solid transparent;background-color:#e6ffff}.scroll-down{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;left:50%;top:60%;opacity:0;animation:1s ease-in-out 3s mouse-appear,infinite 3s ease 4s bounce}.scroll-down.disappear{animation:.5s ease mouse-disappear}.scroll-down .mouse{width:35px;height:35px}.scroll-down .arrows{width:15px;height:15px;transform:translateY(-2px)}.logo-container{width:70px;height:70px;display:flex;flex-direction:row;align-items:center;justify-content:center;position:fixed;top:1vw;left:1vw;z-index:10}.logo-container .logo{font-size:32px;font-weight:700;color:#e6ffff;text-shadow:0 0 4px rgb(26,26,26);z-index:10;cursor:pointer}.logo-container .box-left,.logo-container .box-right{width:50px;height:50px;align-self:center;justify-self:center;position:absolute;cursor:pointer}.logo-container .box-left{border-left:3px solid rgb(0,167,130);border-bottom:3px solid rgb(0,167,130);animation:spinLeftHalf 7s linear infinite}.logo-container .box-right{border-top:3px solid rgb(0,167,130);border-right:3px solid rgb(0,167,130);animation:spinRightHalf 7s linear infinite}.intro{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh}.intro ul{list-style-type:none}.intro ul li{display:inline-block;background:linear-gradient(180deg,#00a782 40%,#e6ffff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700;letter-spacing:1px;opacity:0;font-size:clamp(40px,10vw,150px);animation:dropIn .2s ease-in-out forwards}.intro ul li:nth-child(1){animation-delay:.4s}.intro ul li:nth-child(2){animation-delay:.5s}.intro ul li:nth-child(3){animation-delay:.6s}.intro ul li:nth-child(4){animation-delay:.7s}.intro ul li:nth-child(5){animation-delay:.8s}.intro ul li:nth-child(7){animation-delay:.9s}.intro ul li:nth-child(8){animation-delay:1s}.intro ul li:nth-child(9){animation-delay:1.1s}.intro ul li:nth-child(10){animation-delay:1.2s}.intro ul li:nth-child(11){animation-delay:1.3s}.intro ul li:nth-child(12){animation-delay:1.4s}.intro ul li:nth-child(13){animation-delay:1.5s}.intro ul li:nth-child(14){animation-delay:1.6s}.intro h1{letter-spacing:2px;opacity:0;font-size:30px;animation:.7s ease-in-out 1.8s appear forwards;cursor:default;text-transform:uppercase;margin-bottom:40px}.intro .intro-buttons-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:30px}.about{display:flex;flex-direction:row;align-items:center;justify-content:center;height:max(50vh,fit-content);padding:50px 0;background-color:#e6ffff}.about .about-container{display:flex;flex-direction:row;align-items:center;justify-content:center;max-width:1020px;width:100%;gap:20px;padding-left:max(70px,3vw);padding-right:max(50px,3vw);opacity:0}.about .about-container .about-img-container{width:200px;aspect-ratio:1;border-radius:50%;overflow:hidden}.about .about-container .about-img-container img{width:100%;object-fit:cover;transform:scale(1.1) translateY(5px)}.about .about-container .about-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;max-width:600px;width:100%}.about .about-container .about-info p{font-size:30px;font-weight:700;color:#1a1a1a;margin-bottom:10px}.about .about-container .about-info p span{color:#00a782;transition:.5s}.about .about-container .about-info p:nth-child(2),.about .about-container .about-info p:nth-child(3){font-size:20px}.about .about-container .about-info .about-skills{display:flex;flex-direction:row;align-items:center;justify-content:center;width:fit-content;flex-wrap:wrap;gap:5px}.about .about-container .about-info .about-skills div{width:50px;height:50px;display:flex;flex-direction:row;align-items:center;justify-content:center}.about .about-container .about-info .about-skills div img{width:100%;display:block;object-fit:contain;transition:.3s}.about .about-container .about-info .about-skills div img:hover{transform:scale(1.2);transition:.3s}.projects{display:flex;flex-direction:row;align-items:center;justify-content:center}.projects h2{color:#e6ffff}.projects .projects-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;opacity:0;padding:10vh 0;padding-left:max(50px,3vw);padding-right:max(30px,3vw);margin:0 auto}.projects .projects-container>div{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;gap:40px;padding:20px;margin-bottom:20px}.projects .projects-container>div .projects-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:300px;width:100%;aspect-ratio:1;gap:10px;padding:25px;border:solid 2px rgb(0,167,130);border-radius:50px;box-shadow:0 0 20px #00a782}.projects .projects-container>div .projects-tile .projects-chips{display:flex;flex-direction:row;align-items:center;justify-content:center;width:95%;flex-wrap:wrap;gap:10px;margin-top:auto}.projects .projects-container>div .projects-tile .projects-chips div{padding:3px;border:solid 1px rgb(230,255,255);border-radius:5px;font-size:12px}.projects .projects-container>div .projects-tile .projects-buttons{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;gap:20px}.projects .projects-container>div .projects-tile .projects-buttons .projects-github{width:35px;height:35px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:#00a782;border:none;border-radius:5px;transition:.3s;cursor:pointer}.projects .projects-container>div .projects-tile .projects-buttons .projects-github:hover{box-shadow:0 0 10px #00a782;transition:.3s}.projects .projects-container>div .projects-tile .projects-buttons .projects-github img{width:25px;height:25px;object-fit:contain}.projects .projects-container>div .projects-tile .projects-buttons .projects-link{width:fit-content;height:35px;padding:0 15px;background-color:#00a782;border:none;border-radius:5px;color:#1a1a1a;font-size:15px;font-weight:700;cursor:pointer;transition:.3s}.projects .projects-container>div .projects-tile .projects-buttons .projects-github:hover,.projects .projects-container>div .projects-tile .projects-buttons .projects-link:hover{box-shadow:0 0 12px #00a782;transition:.3s}.projects .projects-container .button-primary{width:300px;height:40px}.contact{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;padding:10vh 0;position:relative}.contact h2{color:#e6ffff}.contact .contact-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:500px;padding-left:max(50px,3vw);padding-right:max(30px,3vw)}.contact .contact-container .contact-title{color:#00a782;font-size:30px;margin-bottom:40px}.contact .contact-container .contact-title.hidden{opacity:0;transform:translate(-50px)}.contact .contact-container .contact-title.reveal{opacity:1;transform:none;transition:.3s ease-in;transition-delay:0s}.contact .contact-container .contact-form{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:40px;margin-bottom:40px}.contact .contact-container .contact-form.remove{display:none}.contact .contact-container .contact-form .hidden{opacity:0;transform:translate(-50px)}.contact .contact-container .contact-form .reveal{opacity:1;transform:none;transition:.3s ease-in}.contact .contact-container .contact-form .input{position:relative;width:100%}.contact .contact-container .contact-form .input input,.contact .contact-container .contact-form .input textarea{background-color:transparent;cursor:text;border:none;border-bottom:solid 2px rgb(0,167,130);outline:none;color:#00a782;font-weight:500}.contact .contact-container .contact-form .input input{width:100%;height:25px}.contact .contact-container .contact-form .input input:focus~span,.contact .contact-container .contact-form .input input:valid~span{color:#353535;transform:translateY(-18px)}.contact .contact-container .contact-form .input textarea{width:100%;height:60px;resize:none}.contact .contact-container .contact-form .input textarea:focus~span,.contact .contact-container .contact-form .input textarea:valid~span{color:#353535;transform:translateY(-55px)}.contact .contact-container .contact-form .input span{position:absolute;left:0;bottom:5px;color:#00a782;font-weight:500;pointer-events:none;transition:.5s}.contact .contact-container .contact-form .input textarea~span{bottom:10px}.contact .contact-container .contact-form .input.name.reveal{transition-delay:.2s}.contact .contact-container .contact-form .input.email.reveal{transition-delay:.4s}.contact .contact-container .contact-form .input.message.reveal{transition-delay:.6s}.contact .contact-container .contact-form .submit{width:70px;height:30px;border:1px solid rgb(0,167,130);border-radius:4px;cursor:pointer;font-weight:700;background-color:#1a1a1a;color:#00a782;transition:.3s}.contact .contact-container .contact-form .submit.reveal{transition-delay:.8s}.contact .contact-container .contact-form .submit:hover{transition:.3s;background-color:#00a782;color:#000}.contact .contact-container .confirmation{display:none;height:264px;margin-bottom:40px;font-size:20px;font-weight:700;color:#00a782;text-align:center}.contact .contact-container .confirmation.reveal{display:flex;flex-direction:column;align-items:center;justify-content:center}.contact .contact-container .contact-links{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:60px}.contact .contact-container .contact-links button{width:70px;height:70px;cursor:pointer;outline:none;border:none;background-color:transparent}.contact .contact-container .contact-links button.hidden{opacity:0;transform:translateY(10vh)}.contact .contact-container .contact-links button img{width:100%;display:block;transition:.3s transform}.contact .contact-container .contact-links button:hover img{transform:scale(1.2);transition:.3s transform}.contact .contact-container .contact-links .link-github.reveal{animation:.3s ease-in 1s forwards revealLinks}.contact .contact-container .contact-links .link-linkedin.reveal{animation:.3s ease-in 1.2s forwards revealLinks}.contact .contact-container .contact-links .link-resume.reveal{animation:.3s ease-in 1.4s forwards revealLinks}@media(max-width:1560px){.projects .projects-container>div{display:grid;grid-template-columns:repeat(2,300px)}.projects .projects-container>div .projects-tile{min-width:300px}}@media(max-width:1250px){.intro h1{font-size:clamp(20px,2.4vw,30px)}.intro .intro-buttons-container{gap:clamp(20px,2.4vw,30px)}.button-primary{width:clamp(120px,11.6vw,145px);height:clamp(35px,3.2vw,40px);font-size:clamp(15px,1.6vw,20px)}.projects .projects-container .button-primary{width:clamp(240px,24vw,300px);height:clamp(35px,3.2vw,40px);font-size:clamp(15px,1.6vw,20px)}}@media(max-width:1020px){.about .about-container{flex-direction:column}.about .about-container .about-info{max-width:435px}.about .about-container .about-info .about-skills{align-self:center}}@media(max-width:900px){.intro .intro-button-container .intro-button{gap:clamp(20px,4.44vw,40px);font-size:clamp(12px,1.7vw,20px)}}@media(max-width:775px){.projects .projects-container>div{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;overflow-x:auto;gap:30px}.projects .projects-container>div .projects-tile{min-width:250px;width:250px;aspect-ratio:.75}.projects .projects-container>div .projects-tile .projects-chips{width:100%}}@media(max-width:650px){.about .about-container .about-info .about-skills{display:grid;grid-template-columns:repeat(4,50px)}}@media(max-width:600px){.logo-container{top:10px;left:20px}}@media(max-width:500px){.about .about-container .about-info{align-items:center}.about .about-container .about-info p{text-align:center}.contact .contact-container .contact-links{gap:20px}}