@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";:root{--bg-light: hsl(0, 0%, 95%);--bg-white: hsl(0, 0%, 100%);--bg-dark: hsl(0, 0%, 90%);--text-dark: hsl(0, 0%, 30%);--text-light: hsl(0, 0%, 50%);--border-light: hsl(0, 0%, 80%);--light: hsl(0, 0%, 90%);--dark: hsla(0, 0%, 80%, .6);--font-family: "Inter", sans-serif;--gradient: linear-gradient(150deg, hsl(0, 0%, 80%) 0%, hsl(0, 0%, 30%) 50%, hsl(0, 0%, 15%) 100%)}*{padding:0;margin:0;box-sizing:border-box}body{scroll-behavior:smooth;max-width:100%;overflow-x:hidden;background-color:var(--bg-light);font-family:var(--font-family)}.header{display:flex;justify-content:space-around;align-items:center;padding:20px 0;-webkit-user-select:none;user-select:none;transition:4s;position:sticky;top:0;z-index:9999}.profile{background:var(--bg-white);border-radius:50%;width:50px;aspect-ratio:1/1;place-content:center;cursor:pointer;text-align:center;box-shadow:1px 1px 20px var(--dark),-1px -1px 20px var(--light)}.profile>h3{font-size:1.8rem;font-weight:500}.menu-mb{display:none}.menu{display:block;cursor:pointer;background:var(--bg-white);border-radius:50%;width:50px;aspect-ratio:1/1;place-content:center;text-align:center;box-shadow:1px 1px 20px var(--dark),-1px -1px 20px var(--light)}nav>ul{display:flex;justify-content:space-around;align-items:center;list-style:none;gap:20px;background-color:var(--bg-light);border-radius:30px;box-shadow:1px 1px 20px var(--dark),-1px -1px 20px var(--light);padding:.3em}nav>ul>li{padding:.5em 1em}nav>ul>li>a{text-decoration:none;color:var(--text-light);font-size:1.2rem;transition:color .3s ease}nav>ul>li.active{background-color:#fff;font-weight:700;border-radius:30px}nav>ul>li.active>a{color:var(--text-dark)}main.container{width:90vw;max-width:1300px;margin:0 auto}main>.intro{font-size:16px;margin-top:10em;text-align:center;position:relative}.intro>h1{font-size:4em;background-image:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.intro>h6{color:#666;font-size:1em;padding:2em 0}.intro>h6>svg{color:var(--text-light)}.intro>p{max-width:600px;margin:0 auto;color:var(--text-light);font-weight:500;font-size:1.1em}.intro>div{z-index:-1;position:absolute}@keyframes start1{0%{transform:translate(-30px,30px) scale(.5) rotate(0)}to{transform:translate(0) scale(1) rotate(30deg)}}@keyframes start2{0%{transform:translate(40px,-40px) scale(.2) rotate(0)}to{transform:translate(0) scale(1) rotate(40deg)}}@keyframes start3{0%{transform:translate(40px,40px) scale(.2) rotate(0)}to{transform:translate(0) scale(1) rotate(40deg)}}.intro>div:nth-child(1){width:20px;height:20px;background-color:#33333380;border-radius:4px;animation:start1 1.5s ease-in-out 1;transform:translate(0) scale(1) rotate(30deg);left:10%;top:40%}.intro>div:nth-child(4){width:20px;height:20px;background-color:#80808080;border-radius:4px;animation:start2 2.5s ease-in-out 1;transform:translate(0) scale(1) rotate(40deg);right:10%;top:-10%}.intro>div:nth-child(6){width:18px;height:18px;background-color:#666666b3;border-radius:3px;animation:start1 1.5s ease-in-out 1;transform:rotate(30deg);left:40%;top:50%}.intro>div:nth-child(5){width:15px;height:15px;background-color:#4d4d4db3;border-radius:3px;transform:rotate(40deg);animation:start2 1.5s ease-in-out 1;right:10%;top:60%}.intro>div:nth-child(3){width:10px;height:10px;background-color:#80808080;border-radius:3px;animation:start1 1.5s ease-in-out 1;transform:rotate(30deg);left:50%;top:-10%}.intro>div:nth-child(2){width:8px;height:8px;animation:start3 1.5s ease-in-out 1;background-color:#33333380;border-radius:2px;transform:translate(0) scale(1) rotate(40deg);left:20%;top:-20%}@media (max-width: 550px){.menu{display:none}.menu-mb{display:block;background:var(--bg-white);border-radius:50%;width:50px;aspect-ratio:1/1;place-content:center;text-align:center;box-shadow:1px 1px 20px var(--dark),-1px -1px 20px var(--light)}nav{display:none}main>.intro{font-size:10px;margin-top:5em}.intro>p{max-width:300px}.intro>div:nth-child(6){display:none}}
