body{margin:0;background-color:#000;font-family:Arial;padding-bottom:50px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#444;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#444}.header-option{color:#fff;position:relative;cursor:pointer}.header-option:after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0%;transition:width .15s;background:#fff}.header-option:hover:after{width:100%}.active:after{width:100%}.header{width:100%;box-sizing:border-box;display:flex;justify-content:space-around;align-items:center;padding:12px 22px;height:72px;position:relative;font-size:18px;max-width:1200px;position:sticky;z-index:100;top:0;background:#000;animation:headerAppear .4s ease-out forwards}@keyframes headerAppear{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.header:after{content:"";position:absolute;left:0;bottom:0;background:#181a20;width:100%;height:1px}.web-link{background-color:#141414;display:inline-flex;justify-content:center;align-items:center;text-decoration:none;padding:10px 13px;border-radius:7px;transition:width 2s;gap:0;transition:gap .5s}.web-link:hover{gap:8px}.web-link img{width:23px;height:23px;background-color:#367ca5}.web-link span{color:#fff;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s}.web-link:hover span{max-width:100px}.scroll-wrapper{overflow:hidden;width:100%;position:relative}.scroll-track{display:flex;gap:20px;width:max-content;animation:scroll 25s linear infinite;will-change:transform}.scroll-item{background:#141414;padding:20px;border-radius:12px;min-width:200px;color:#fff;display:flex;justify-content:start;align-items:center;gap:14px;cursor:pointer}.scroll-item img{width:35px}@keyframes scroll{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}.scroll-wrapper:hover .scroll-track{animation-play-state:paused}.content{color:#fff}.introduction-1{animation:introductionAppear .6s ease-out forwards;animation-delay:.6s;opacity:0}.introduction-1 span{display:block}.hello-message{color:#367ca5;font-size:40px;margin:0}.my-nickname{margin:0;color:#fff;font-size:100px}.introduction-2{font-size:40px;color:#8f9094;margin:30px 0 0;animation:introductionAppear .6s ease-out forwards;animation-delay:.8s;opacity:0}.white{color:#fff;margin-right:5px}.introduction-3{margin-top:50px;animation:introductionAppear .6s ease-out forwards;animation-delay:1s;opacity:0}.introduction-3 span{display:block;color:#8f9094;font-size:25px}.react-logo{width:25px;margin-right:10px;margin-left:5px}.contacts{margin-top:50px;animation:introductionAppear .6s ease-out forwards;animation-delay:1.2s;opacity:0}.about-me{display:flex;justify-content:space-between;gap:40px;margin:120px 0 0;width:100%;align-items:center;opacity:0;transform:translateY(20px)}.about-me.show{animation:downAppear 1s ease-out forwards}.about-me div{flex:0 0 50%}.about-me img{flex:0 0 50%;width:100%;max-width:350px;aspect-ratio:1 / 1;object-fit:cover;border-radius:50%}.about-me div p{color:#8f9094;font-size:17px}.what-do-i-use{opacity:0;transform:translateY(20px);margin-top:120px}.what-do-i-use.show{animation:downAppear 1s ease-out forwards;animation-delay:.2s}.what-do-i-use h2{margin-bottom:50px}@media(max-width:768px){.about-me{flex-direction:column;justify-content:center}.about-me div{width:100%}.about-me img{width:250px;height:250px;margin-top:20px}}@keyframes introductionAppear{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes downAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page{display:flex;justify-content:center;flex-direction:column;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;position:relative}