section{height:100vh;display:flex;align-items:center;justify-content:center}.logo{position:fixed;top:1rem;left:3rem;z-index:10}.logo div{font-size:2.5rem;position:absolute;top:1rem;left:1rem;width:3rem;height:3rem;display:flex;justify-content:center;align-items:center}.logo div span{position:relative}.logo div.hidden{border:1px solid var(--logo-color);color:var(--background-color);transform:rotate(45deg);transition:transform .3s ease-in-out;background-color:var(--background-color)}.logo div.visible{z-index:2}.logo a:hover div.hidden{transform:rotate(90deg)}nav{position:fixed;right:2rem;height:100vh;display:flex;flex-direction:column;justify-content:center}nav ul li{list-style:none}nav ul li a img.nav-icon{width:1rem;height:1rem;margin:.8rem 1rem;transform:rotate(45deg);transition:transform .3s ease}nav ul li a:hover img.nav-icon{transform:rotate(90deg);transform:scale(1.5)}@media (max-width: 400px){nav{display:none}}@media (min-width: 401px) and (max-width: 800px){nav{display:none}}@media (min-width: 801px) and (max-width: 1200px){nav{display:none}}#home{align-items:center;text-align:center;display:flex;flex-direction:column;justify-content:center;height:100vh}.home-pretitle{margin:0;display:inline-block}#home p{font-size:1.5rem;max-width:45%;margin-top:1rem}@media (max-width: 400px){#home p{font-size:1.3rem}}@media (min-width: 401px) and (max-width: 800px){#home h1{font-size:5rem}#home p{font-size:1.3rem}}@media (min-width: 801px) and (max-width: 1200px){#home{max-width:100%}}#about{display:flex;justify-content:center;align-items:center;height:100vh}#about h2{font-size:3rem;color:var(--heading-color)}#about p{max-width:40rem}.about-container{width:42.5rem;margin-bottom:5rem}.row-two{display:flex;justify-content:space-between}.prof-pic,.img-shadow,.img-border{width:18rem;height:18rem;position:absolute}.img-shadow{background:var(--shadow-color)}.prof-pic{filter:grayscale(100%);transition:transform .3s ease-in-out;z-index:1}.left:hover .prof-pic{transform:translate(.7rem,-.7rem)}.img-border{border:2px solid var(--img-border-color);transform:translate(.7rem,-.7rem);z-index:2}.left{width:18rem;display:flex;justify-content:center;align-items:center;margin-top:6rem}.right{display:flex;flex-direction:column;align-items:end}.tech-list{display:flex;justify-content:space-around}@media (max-width: 400px){#about{width:20rem}.about-container{width:70%}.row-two{flex-direction:column-reverse;align-items:end}.prof-pic,.img-shadow,.img-border{width:15rem;height:15rem;position:absolute}.left{margin-top:10rem}.right{align-items:start}}@media (min-width: 401px) and (max-width: 800px){.about-container{width:65%}.row-two{flex-direction:column-reverse}.left{margin-top:13rem}.right{align-items:start}}#projects{display:flex;justify-content:center;height:100vh;align-items:center}.projects-container{display:flex;flex-direction:column;align-items:center;width:60rem}#projects h2{font-weight:400;font-size:1.2rem;color:var(--heading-color)}.project-gallery{display:flex;justify-content:space-between;max-width:100%;padding:0;margin:0}.project-gallery li{list-style:none}.project-card{width:23%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background-color:var(--project-card-color);color:var(--project-text-color);padding:1rem 2rem;margin:2rem 1rem;text-align:center}.project-card:hover{background-color:var(--project-card-hover-color)}.project-title{font-size:1.9rem}.project-desc{font-size:1.2rem;width:90%}.project-btn{display:flex;align-items:center;justify-content:center;background-color:inherit;margin:3rem 0 5rem;position:relative;width:10rem}.project-btn button{text-transform:uppercase;border:1px solid var(--project-button-color);background-color:inherit;color:var(--project-button-color);font-family:Space Mono,"Monospace",Courier New;font-size:1rem;position:absolute;z-index:2;top:0;width:10rem;height:3rem;transition:transform .2s ease-in-out}.btn-shadow{background-color:var(--project-button-color);position:absolute;top:0;z-index:1;width:10rem;height:3rem}.project-btn:hover button{transform:translate(.2rem,-.2rem)}.resume-btn-container{display:flex;justify-content:center}.resume-btn{border:none;background-color:inherit;font-family:Space Mono,"Monospace",Courier New;font-weight:700;font-size:1.2rem;padding:0;color:var(--resume-button-color)}.arrow-icon{width:1.7rem;height:1.7rem;padding:0 .5rem;margin:0;transition:transform .1s ease-in-out}.resume-btn:after{content:"";display:block;border-bottom:2px solid var(--resume-button-color);transform:scaleX(0);transition:transform .3s ease-in-out}.resume-btn:hover:after{transform:scaleX(1)}.resume-btn:hover+.arrow-icon{transform:translate(.5rem)}@media (max-width: 400px){.section-projects{margin:40rem 0 20rem;overflow:visible}.projects-container{width:20rem}.project-gallery{flex-direction:column}.project-card{width:12rem;max-height:70%}.project-title{font-size:1.5rem}.project-desc{font-size:1rem}}@media (min-width: 401px) and (max-width: 800px){.section-projects{margin:40rem 0 20rem}.projects-container{width:30rem}.project-gallery{flex-direction:column}.project-card{width:16rem}}@media (min-width: 801px) and (max-width: 1200px){.projects-container{width:50rem}.project-title{font-size:1.7rem}.project-desc{font-size:1rem}}#contact{display:flex;justify-content:center;align-items:center}.contact-container{display:flex;flex-direction:column;align-items:center}.socials img{width:2rem;height:2rem;margin:2rem .5rem;transition:transform .2s ease-in-out}.socials a{width:2rem;height:2rem}.socials img:hover{transform:translateY(-.35rem)}.contact-pretitle{margin:0}.contact-header{font-size:4rem;margin:0;color:var(--heading-color)}.contact-message{font-size:1.3rem;width:35rem;text-align:center}.email-btn-container{display:flex;align-items:center;justify-content:center;background-color:inherit;margin:5rem 0;position:relative;width:12rem}.email-btn{text-transform:uppercase;border:1px solid var(--email-button-color);background-color:var(--background-color);color:var(--email-button-color);font-family:Space Mono,"Monospace",Courier New;font-size:1.2rem;z-index:2;transition:transform .2s ease-in-out}.email-btn-shadow{background-color:var(--email-button-color);z-index:1}.email-btn,.email-btn-shadow{width:12rem;height:4rem;position:absolute}.email-btn:hover{transform:translate(.3rem,-.3rem)}@media (max-width: 400px){.contact-header{font-size:3rem}.contact-message{width:18rem}}@media (min-width: 401px) and (max-width: 800px){.contact-message{width:17rem}}#footer{height:6vh;background-color:var(--footer-background-color);display:flex;align-items:center;justify-content:center;width:100%}.footer-text{font-size:.8rem;color:var(--footer-text-color)}#header{display:flex;justify-content:space-between;align-items:center}.dark-mode-icon{width:2.8rem;height:2.8rem;position:fixed;right:2rem;top:2rem;z-index:2;transition:transform .3s ease-in-out;background:var(--background-color);border-radius:5rem}.dark-mode-icon:hover{cursor:pointer}.rotate{transform:rotate(180deg)}:root{--background-color: #e2dcdc;--text-color: #000;--heading-color: #000;--scroll-color: #000;--logo-color: #000;--img-border-color: #fff;--shadow-color: #000;--project-text-color: #fff;--project-card-color: #545454;--project-card-hover-color: #272727;--project-button-color: #fff;--resume-button-color: #272727;--email-button-color: #000;--footer-background-color: #272727;--footer-text-color: #fff}:root[data-theme=dark]{--background-color: #272727;--text-color: #cac9c9;--heading-color: #e2dcdc;--scroll-color: #fff;--logo-color: #e2dcdc;--img-border-color: #e2dcdc;--shadow-color: #e2dcdc;--project-text-color: #000;--project-card-color: #c5bdbd;--project-card-hover-color: #e2dcdc;--project-button-color: #000;--resume-button-color: #e2dcdc;--email-button-color: #cac9c9;--footer-background-color: #cac9c9;--footer-text-color: #000}:root{background-color:var(--background-color);color:var(--text-color);font-family:Space Mono,"Monospace",Courier New;font-weight:400}html{scroll-behavior:smooth}body{margin:0}.main-font{font-family:Playfair Display,Georgia,Times New Roman,Times,serif}h1{font-weight:700;font-size:8rem;margin:0;color:var(--heading-color)}h3{font-weight:400}.pretitle{font-size:1.2rem}p{margin:0}a{color:inherit;text-decoration:none}@media (max-width: 400px){h1{font-size:4rem}.pretitle{font-size:1rem}}