#preloader{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#252525;z-index:9999;transition:opacity 2s ease-out;opacity:1;pointer-events:none}#preloader.fade-out{opacity:0}body,html{background-color:#252525;width:100vw;height:100vh;overflow:auto}*{box-sizing:border-box;margin:0;padding:0}ul{list-style:none;margin:0;padding:0}a{text-decoration:none;color:inherit}.container{max-width:100%;margin:0 11rem}h2{font-size:4rem;font-family:Roboto Flex,sans-serif;font-weight:400;margin-bottom:3rem;color:#78b7ff}button{font-family:Space Mono,monospace;border:none;text-decoration:none}button:hover{cursor:pointer}@media screen and (max-width: 1400px){.container{max-width:1320px;margin:0 8rem}}@media screen and (max-width: 1200px){.container{max-width:1140px;margin:0 6rem}}@media screen and (max-width: 992px){.container{max-width:960px;margin:0 4rem}}@media screen and (max-width: 768px){.container{max-width:720px;margin:0 3rem}}@media screen and (max-width: 576px){.container{max-width:540px;margin:0 2rem}}nav{position:absolute;top:0;left:0;right:0;padding-top:.3rem;z-index:10}nav ul{display:flex;justify-content:center;align-items:center;height:4rem;width:20%;margin:0 auto;padding:0;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background-color:#fffdfd33;border-radius:5px;box-shadow:#242424d0 0 5px 5px;transition:color .5s ease,background-color .3s ease}nav li{font-size:1.5rem;list-style:none;padding:0 1rem}nav button{font-size:1.5rem;background-color:transparent;text-align:center;position:relative;transition:color .3s ease;color:#a5a5a5;cursor:pointer;border:none;padding:0;-webkit-tap-highlight-color:transparent;outline:none}nav button:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:3px;background-color:#78b7ff;transition:width .3s ease-in-out}@media (hover: hover) and (pointer: fine){nav button:hover{color:#d9d9d9}nav li:hover button:after{width:100%}}nav button.active{color:#d9d9d9}nav button.active:after{width:100%}nav button:focus:not(.active){color:#a5a5a5}nav button:focus:not(.active):after{width:0}@media screen and (max-width: 1440px){nav ul{width:25%}}@media screen and (max-width: 1200px){nav ul{width:30%}}@media screen and (max-width: 920px){nav ul{width:40%}}@media screen and (max-width: 610px){nav ul{width:60%}}@media screen and (max-width: 430px){nav ul{width:80%}}.hero{background-position:center top;background-size:cover;height:100vh;display:flex;justify-content:center;align-items:center;position:relative}.hero h1{color:#78b7ff;font-size:7rem;font-family:Roboto Flex,sans-serif;font-weight:400}.hero p{color:#a5a5a5;font-family:Space Mono,monospace;font-size:3rem}p>span{color:#d9d9d9}.arrow-box{display:flex;align-items:center;justify-content:center;position:absolute;bottom:5rem;left:50%;height:3.5rem;width:3.5rem;transform:translate(-50%);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#fffdfd33;border-radius:50%;box-shadow:#242424d0 0 5px 5px}.arrow{display:flex;justify-content:center;align-items:center}@media screen and (max-width: 920px){.hero h1{font-size:6rem}.hero p{font-size:2.8rem}}@media screen and (max-width: 610px){.hero h1{font-size:5rem}.hero p{font-size:2.3rem}}@media screen and (max-width: 430px){.hero h1{font-size:3rem}.hero p{font-size:1.8rem}}#about{padding:5rem 0;width:100%}#about h2{color:#78b7ff}#about p{color:#a5a5a5;font-family:Space Mono,monospace;margin:1.5rem 0;font-size:1.2rem}#about p>span{color:#d9d9d9}.about-text{padding-bottom:3rem;margin-bottom:3rem;border-bottom:#78b7ff 2px solid}.stack-type{display:flex;gap:2rem;width:100%;margin:3rem 0}.tech-icons{width:60%;display:flex;justify-content:start;align-items:center}.tech-icons ul{display:flex;justify-content:start;flex-wrap:wrap;gap:2rem;align-items:center;color:#d9d9d9;font-family:Space Mono,monospace}.tech-line{width:40%;display:flex;align-items:center}.tech-line h3{color:#d9d9d9;font-family:Space Mono,monospace;font-size:2rem;font-weight:400;width:50%}.line-point{width:1rem;height:1rem;border-radius:50%;background-color:#78b7ff}.line{width:50%;height:.3rem;margin-right:.5rem;background-color:#78b7ff}@media screen and (max-width: 1440px){.tech-icons,.tech-line{width:50%}}@media screen and (max-width: 920px){.stack-type{flex-wrap:wrap;margin-bottom:4rem}.tech-icons{width:100%;justify-content:start}.tech-line{width:100%}.tech-line h3{text-align:center}}@media screen and (max-width: 610px){.tech-line h3{font-size:1.8rem}}@media screen and (max-width: 430px){.tech-line h3{font-size:1.5rem}}#works{background-color:#444;width:100%;padding:5rem 0}.projects-row{display:flex;flex-wrap:wrap;gap:1rem}.project-col{display:flex;width:calc(50% - 1rem);height:500px}.project{display:flex;flex-direction:column;position:relative;width:100%}.image-container{position:relative;width:100%;height:100%;overflow:hidden}.image-container img{width:100%;height:100%;object-fit:cover;transition:filter .3s ease,transform .3s ease;transform:scale(1)}.image-container img:hover{transform:scale(1.05)}.buttons{margin:.7rem 0;display:flex;justify-content:space-evenly;align-items:center}.buttons button{padding:.3rem 2rem;font-size:1rem;background-color:#d9d9d9;color:#252525;transition:background-color .1s ease,color .3s ease}.demo-button:hover{background-color:#78b7ff;color:#d9d9d9}.github-button:hover{background-color:#252525;color:#d9d9d9}@media screen and (max-width: 610px){.project-col{width:100%}}footer{background-color:#161618;width:100%;height:3rem;font-family:Space Mono,monospace;display:flex;justify-content:center;align-items:center;color:#d9d9d9}footer span{color:#78b7ff}@media screen and (max-width: 610px){.footer-text{display:flex;flex-direction:column;align-items:center}}#contacts{padding:2rem 0;width:100%}.contacts-text{display:flex;flex-direction:column;align-items:center}.contacts-text h2{margin-bottom:1rem}.contacts-text .email-link{display:flex;justify-content:center;align-items:center;font-size:1rem;font-family:Space Mono,monospace;color:#d9d9d9;padding:.5rem 1rem;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background-color:#fffdfd33;border-radius:5px;box-shadow:#242424d0 0 5px 5px;margin-bottom:1rem}.email-link a{margin-left:.5rem}.social-links{margin:1rem 0}.social-links a{margin:0 1rem}