@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";.home-wrapper{width:100%;overflow:hidden}.home-content{display:flex;width:100%;max-width:100%;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.aurora-container{position:absolute;top:0;width:100%;height:50%;z-index:0}.dots-h-c{position:absolute;top:50%;right:0;transform:translateY(-50%) rotate(90deg);filter:drop-shadow(0 0 3px #e0e0e0) drop-shadow(0 0 1px #e0e0e0);z-index:-1}.dots-v-c{position:absolute;filter:drop-shadow(0 0 3px #e0e0e0) drop-shadow(0 0 1px #e0e0e0);right:50%;top:-80%;object-fit:cover;z-index:-1}.fade,.cbj,.cbj-p,.cbj-h{opacity:0}.hero{display:flex;position:relative;align-items:center;justify-content:center;width:100%;overflow:hidden;height:100vh;border-radius:0 0 10vw 10vw;padding-bottom:20vh;background:linear-gradient(to bottom,#252525 20%,#353535 80%);max-width:100%}.hero .hero-title{display:flex;align-items:start;justify-content:space-between;width:80%;position:absolute;font-family:Orbitron;top:40%;transform:translateY(-50%);cursor:default;z-index:2}.hero .hero-title .hero-title-text{width:40%;font-size:clamp(18px,2.5vw,60px);color:#e0e0e0;text-align:center;font-weight:1000}.hero .hero-title .hero-title-description{width:40%;font-family:Roboto Mono;font-size:clamp(10px,1.5vw,40px);margin-top:8%;text-align:center;color:#b0b0b0;font-weight:400}@media (max-width: 768px){.hero{border-radius:0 0 20vw 20vw}.hero .hero-title{top:20%;flex-direction:column}.hero .hero-title .hero-title-text{width:100%;font-size:clamp(18px,4vw,60px)}.hero .hero-title .hero-title-description{display:flex;flex-direction:column;align-items:center;width:100%;font-size:clamp(10px,2vw,40px);margin-top:5%}}.about{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100vh;max-width:100%}.about .author{width:auto;max-height:80%;object-fit:contain;border-radius:50%;border-right:solid .3vmax #b0b0b0;border-bottom:solid .2vmax #b0b0b0;filter:grayscale(20%) brightness(.7)}.about .about-title{position:absolute;top:45%;right:50%;transform:translateY(-50%);opacity:0;max-width:500px;font-size:clamp(16px,3vw,26px);color:#e0e0e0;font-family:Orbitron;width:40%;cursor:default}.about .about-title em{display:block;margin-top:2%;color:#b0b0b0;font-family:Roboto Mono;font-size:clamp(10px,1vw,16px);width:70%}.about .about-title .signature{display:flex;justify-self:center;stroke:#e0e0e0;stroke-width:2px;margin-top:20px;width:28%;height:auto}.about .about-description{position:absolute;top:65%;left:57%;transform:translateY(-50%);max-width:500px;font-size:clamp(12px,1.2vw,18px);color:#e0e0e0;font-family:Roboto Mono;text-align:center;opacity:0;width:40%;cursor:default}.about .about-description em{display:block;margin-top:2%;color:#b0b0b0;font-family:Roboto Mono;font-size:clamp(8px,1vw,14px)}.about .about-description h2{font-family:Orbitron;margin-bottom:2%}@media (max-width: 768px){.about .author{max-height:50%}.about .about-title{top:40%}.about .about-title .signature{width:35%}}@media (max-width: 480px){.about .author{margin-bottom:15%}.about .about-title{top:30%;left:5%}.about .about-title .signature{width:60%}.about .about-description{display:flex;flex-direction:column;align-items:center;top:75%;left:5%;width:90%}}.skills{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;width:100%;height:100vh;max-width:100%}.skills .skills-title{text-align:center;font-size:clamp(16px,3vw,26px);color:#e0e0e0;font-family:Orbitron;cursor:default}.skills .skills-title em{display:block;color:#b0b0b0;font-family:Roboto Mono;font-size:clamp(10px,1vw,16px)}.skills .skills-description{font-size:clamp(12px,1.2vw,18px);color:#e0e0e0;font-family:Roboto Mono;max-width:1000px;text-align:center;padding:1% 10%;cursor:default}.skills .skills-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:100%;max-width:1000px;padding:1% 5% 0%;width:80%;gap:2%;cursor:default}.skills .skills-list .skill-item{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;padding:1%;transition:transform .3s ease}.skills .skills-list .skill-item:hover .skill-icon{color:#e0e0e0;-webkit-backdrop-filter:drop-shadow(0 0 2px rgba(0,0,0,.2));backdrop-filter:drop-shadow(0 0 2px rgba(0,0,0,.2))}.skills .skills-list .skill-item:hover .skill-name{color:#e0e0e0;text-shadow:0 0 2px rgba(0,0,0,.2)}.skills .skills-list .skill-item .skill-icon{font-size:clamp(35px,5vw,55px);color:#e0e0e0}.skills .skills-list .skill-item .skill-name{font-family:Orbitron;font-size:clamp(10px,1.2vw,22px);color:#b0b0b0;margin-top:0}.projects{display:flex;align-items:center;justify-content:start;position:relative;height:100vh;width:100%;max-width:100%}.projects .page-slider{display:flex;position:absolute;bottom:5%;width:100%;align-items:center;justify-content:center;max-width:100%}.projects .page-slider .dot{width:clamp(10px,1vw,18px);height:clamp(10px,1vw,18px);border-radius:50%;margin:5px;background-color:#b0b0b0;transition:all .2s ease-in-out}.projects .page-slider .dot:hover{transform:scale(1.2)}.projects .page-slider .dot.active{transform:scale(1.4);background-color:#e0e0e0}.projects .horizontal-wrapper{display:flex;width:auto;height:100vh;overflow-x:scroll;scrollbar-width:none}.projects .page{display:flex;position:relative;flex:0 0 100%;flex-direction:row;align-items:center;justify-content:center;overflow:hidden;width:100%;height:100%;max-width:100%}.projects .page .project-info{display:flex;flex-direction:column;padding:1%;width:50%}.projects .page .project-info .project-info-header{display:flex;align-items:center}.projects .page .project-info .project-info-header .logo{width:20%;max-width:150px;margin-right:3%;filter:drop-shadow(0 0 10px rgba(224,224,224,.7))}.projects .page .project-present{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;margin-top:3%;margin-right:3%;max-width:40%}.projects .page .project-present .phone{display:flex;aspect-ratio:9/19.3;align-items:center;justify-content:center;position:relative;width:100%;max-height:80%}.projects .page .project-present .phone .screen{width:100%;height:100%;border:solid 2px black;object-fit:cover}.projects .page .project-present .phone .border{position:absolute;width:105%;height:105%}.projects .page .project-present .pc{position:relative;height:auto;width:auto;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}.projects .page .project-present .pc.multi{margin:4%;max-height:39%}.projects .page .project-present .pc .screen{width:100%;height:100%;object-fit:cover;border:solid 2px black}.projects .page .project-present .pc .border{position:absolute;top:-3%;height:115%;width:122%}.projects .page .projects-title{font-size:clamp(16px,3vw,26px);color:#e0e0e0;font-family:Orbitron;max-width:1000px;cursor:default;text-align:center}.projects .page .projects-title em{display:block;color:#b0b0b0;font-family:Roboto Mono;font-size:clamp(10px,1vw,16px)}.projects .page .projects-title.l{text-align:left}.projects .page .projects-description{display:flex;flex-direction:column;align-items:center;font-size:clamp(12px,1.2vw,18px);color:#e0e0e0;font-family:Roboto Mono;max-width:1000px;text-align:center;padding:1% 10%;cursor:default}.projects .page .projects-description.l{gap:1%;text-align:left;padding:1% 3%;align-items:flex-start}.projects .page .projects-description.l p{margin-top:2%}.projects .page .projects-description.l span{font-weight:700}@media (max-width: 768px){.projects .page .project-info{width:95%;height:35%}.projects .page.w{flex-direction:column-reverse}.projects .page.w .project-present{height:50%;width:100%;max-width:80%;margin-right:0;margin-top:0;gap:1.5%}.projects .page.w .project-present .pc{max-width:100%;max-height:92%}.projects .page.w .project-present.m{margin-bottom:3%}.projects .page.w .project-present.m .multi{max-height:50%;margin:0}.projects .page.w .project-present.m .multi img{display:none}}@media (max-width: 480px){.projects .page{flex-direction:column-reverse}.projects .page .project-info{width:95%;height:45%}.projects .page .project-present{height:45%}.projects .page.w .project-present{height:35%}}.contacts{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;width:100%;height:100vh;max-width:100%}.contacts .contacts-title{text-align:center;font-size:clamp(16px,3vw,26px);color:#e0e0e0;font-family:Orbitron;cursor:default}.contacts .contacts-title em{display:block;color:#b0b0b0;font-family:Roboto Mono;font-size:clamp(10px,1vw,16px)}.contacts .contacts-description{font-size:clamp(12px,1.2vw,18px);color:#e0e0e0;font-family:Roboto Mono;max-width:1000px;text-align:center;padding:1% 10%;cursor:default}.contacts .social{display:flex}.contacts footer{display:flex;position:absolute;bottom:0;align-items:center;justify-content:space-around;width:100%;max-width:100%;font-size:clamp(10px,1vw,16px);background-color:#252525;color:#e0e0e0;font-family:Roboto Mono}.contacts footer .logo{position:relative;font-family:Orbitron;font-size:5vmin;width:10%;font-weight:700;color:#e0e0e0;text-decoration:none;cursor:pointer}.contacts footer .social{display:flex;width:10%;gap:5%}.nav-wrapper{display:flex;justify-content:center;position:fixed;top:0;left:0;height:8%;max-height:80px;width:100vw;z-index:50}.nav-wrapper .nav{display:flex;flex-direction:row;width:10%;height:100%;justify-content:center;flex-wrap:wrap;align-items:center;border:solid .1vmax #e0e0e0;border-radius:3vmax;margin:1%;padding:0 3%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;box-shadow:0 0 1vmax #e0e0e033,inset 0 0 1vmax #e0e0e04d}.nav-wrapper .nav-logo{font-family:Orbitron;position:relative;font-size:clamp(1rem,1.5vw,1.5rem);font-weight:700;color:#e0e0e0;text-decoration:none;cursor:pointer}.nav-wrapper .nav-logo:hover:before{width:120%}.nav-wrapper .nav-logo:before{content:"";display:flex;width:0%;height:.5vmin;background:linear-gradient(to right,#0074a6,#27f2f7,#e700ff,#ffc90e 90%);position:absolute;right:50%;top:50%;transform:translate(50%,-50%) rotate(-3deg);transition:all .3s ease-in-out}.nav-wrapper .nav-links{display:flex;align-items:center;flex-direction:row}.nav-wrapper .nav-links .nav-link{font-family:Orbitron;position:relative;margin-right:2vmin;font-size:clamp(1rem,2.2vw,1rem);color:#e0e0e0;font-weight:700;cursor:pointer}.nav-wrapper .nav-links .nav-link:last-child{margin-right:0}.nav-wrapper .nav-links .nav-link:hover:before{width:100%}.nav-wrapper .nav-links .nav-link:before{content:"";display:flex;width:0;height:.2vmax;background:linear-gradient(to right,#0074a6,#27f2f7,#e700ff,#ffc90e 90%);position:absolute;right:50%;bottom:-20%;transform:translate(50%);border-radius:50%;transition:all .3s ease-in-out}.nav-wrapper .nav-links .nav-link.accent{padding:1vmin 1.5vmin;border:solid .1vmax #e0e0e0;border-radius:100px}.nav-wrapper .nav-links .nav-link.accent:before{content:none}.nav-wrapper .nav-links .nav-link.accent:hover{box-shadow:0 0 1vmax #e0e0e04d,inset 0 0 1vmax #e0e0e04d}.nav-wrapper .menu-btn{display:none;align-items:center;justify-content:center;font-size:clamp(2rem,2vw,5rem);color:#e0e0e0;cursor:pointer}@media (max-width: 768px){.nav-wrapper{max-height:40px;height:auto}.nav-wrapper .nav-links{display:none;flex-direction:column;justify-content:space-around;flex:1 1 100%;height:80%;margin-top:5%}.nav-wrapper .nav-links .nav-link{margin:0;font-size:clamp(16px,3vw,26px)}.nav-wrapper .menu-btn{display:flex}}.sidebar-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;top:0%;height:100%;right:.5%;opacity:1;z-index:80}.sidebar-wrapper .progressbar-wrapper{display:flex;flex-direction:column;width:100%;position:relative}.sidebar-wrapper .progressbar-wrapper .progressbar-section{display:block;align-items:center;justify-content:center;padding:20% 0%;margin-right:1vmin}.sidebar-wrapper .progressbar-wrapper .progressbar-section p{font-family:Orbitron;font-size:clamp(10px,1.2vw,22px);color:#b0b0b0;font-weight:700;text-shadow:0 0 1px black;cursor:pointer}.sidebar-wrapper .progressbar-wrapper .progressbar{display:block;overflow:hidden;position:absolute;height:0%;top:0;pointer-events:none;transition:all .8s ease-in-out}.sidebar-wrapper .progressbar-wrapper .progressbar p{color:#e0e0e0}.sidebar-wrapper .progressbar-wrapper .progressbar:before{content:"";display:block;width:30%;height:100%;background:#e0e0e0b3;position:absolute;left:105%;transform:translate(-50%);border-radius:50px;z-index:-1}.sidebar-wrapper .scroll-btn{display:flex;align-items:center;justify-content:center;position:absolute;font-size:clamp(10px,1.2vw,22px);font-family:Orbitron;color:#b0b0b0;cursor:pointer;writing-mode:vertical-rl;text-orientation:mixed}.sidebar-wrapper .scroll-btn.top{top:10%}.sidebar-wrapper .scroll-btn.bottom{bottom:10%}.sidebar-wrapper .scroll-btn .arrow{font-size:clamp(16px,3vw,26px);transition:all .2s ease-in-out}.sidebar-wrapper .scroll-btn:hover{color:#e0e0e0}.sidebar-wrapper .scroll-btn:hover .down{transform:translateY(30%)}.sidebar-wrapper .scroll-btn:hover .up{transform:translateY(-30%)}.loading{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;height:100vh;width:100vw;background-color:#212121;z-index:1000}.loading.hidden{display:none}.loading .loader-logo{font-family:Orbitron;position:relative;font-size:clamp(70px,6vw,100px);font-weight:700;opacity:0;padding:.5%;color:#e0e0e0;background-color:#212121;overflow:hidden;text-decoration:none}.loading .loader-logo.load:before{content:"";display:flex;width:0%;height:clamp(6px,4.5vw,8px);background:linear-gradient(to right,#0074a6,#27f2f7,#e700ff,#ffc90e 90%);position:absolute;left:50%;top:50%;transform:translate(-50%,50%) rotate(-3deg);animation:loading 1.2s infinite;transition:all .3s ease-in-out}@keyframes loading{50%{width:120%}}html{width:100%;overflow-x:hidden;scroll-behavior:auto;scrollbar-width:none}img,video{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:auto}body{margin:0;padding:0;width:100%;background:#212121;overflow-x:hidden;-webkit-user-select:none;user-select:none}a{text-decoration:none}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;text-shadow:0 0 3px #212121}.App{display:flex;flex-direction:column;align-items:center}button{background:transparent;border:none}.jelly-text-word{display:inline-block;word-break:normal;-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;white-space:nowrap}.jelly-text-word .jelly-space{display:inline-block;width:1vw}.jelly-text-word .jelly-char{display:inline-block}.jelly-text-word .jelly-char.jelly{animation:jellyEffect .6s ease-in-out;transform-origin:50% 60%}.code{position:absolute;object-fit:fill;width:35vw;height:50vh;max-width:500px;max-height:500px;filter:blur(5px);opacity:.9;z-index:-1}.code.l{left:0;top:0;transform:translateY(-50%)}.code.d{left:0;bottom:0;transform:translateY(50%)}.code.r{right:0;top:0;transform:translateY(-50%) rotateY(180deg)}@media (max-width: 768px){.code{width:60vw;height:35vh}}.circular-text-container{display:flex;position:relative;align-items:center;justify-content:center;margin:10px;width:clamp(50px,5.2vw,80px);height:clamp(50px,5.2vw,80px);border:solid 1px;border-radius:50%;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);font-size:clamp(16px,1.8vw,26px);filter:drop-shadow(0 0 5px rgba(224,224,224,.2));z-index:3}.circular-text-container .circular-text{margin:0 auto;border-radius:50%;width:clamp(50px,5.2vw,80px);position:absolute;height:clamp(50px,5.2vw,80px);font-family:Orbitron;font-weight:900;text-align:center;cursor:pointer;transform-origin:50% 50%;text-shadow:0 0 1px black;-webkit-transform-origin:50% 50%}.circular-text-container .circular-text span{position:absolute;display:inline-block;border-radius:50%;inset:0;font-size:clamp(10px,1vw,16px);transition:all .5s cubic-bezier(0,0,0,1)}.circular-text-container .icon{display:flex;pointer-events:none;border:solid 1px;padding:4px;filter:drop-shadow(0 0 10px rgba(0,0,0,.3));border-radius:50%}.circular-text-container .arrow{transition:all .3s ease-in-out}.circular-text-container.bl{color:#27f2f7;border-color:#27f2f7}.circular-text-container.bd{color:#0074a6;border-color:#0074a6}.circular-text-container.p{color:#e700ff;border-color:#e700ff}.circular-text-container.o{color:#ffc90e;border-color:#ffc90e}.circular-text-container:hover .arrow{transform-origin:50% 50%;transform:rotate(45deg)}.object{position:absolute;object-fit:fill;width:clamp(80px,8vw,150px);height:clamp(80px,8vw,150px);z-index:-1}@keyframes jellyEffect{40%{transform:scaleX(1.1) scaleY(.8);font-weight:1000}60%{transform:scaleX(.7) scaleY(1.3);font-weight:600}80%{transform:scaleX(1.1) scaleY(.9);font-weight:900}to{transform:scaleX(1) scaleY(1);font-weight:800}}
