@import"https://fonts.cdnfonts.com/css/roboto";@import"https://fonts.googleapis.com/css2?family=Teko";.navbar{height:60px;width:100%;display:flex;flex-flow:row;align-items:center;justify-content:space-between;padding:10px 20px;position:fixed;top:0;z-index:100;background-color:#3e364980;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 2px 5px #0006}.navbar .logo-svg{height:40px;width:auto;transition:.2s}.navbar .logo-svg:hover{filter:brightness(120%)}.navbar .theme-label{height:40px;width:80px;position:relative;display:flex;justify-content:space-between;background-color:#111013;border-radius:5px}.navbar .theme-label input{height:100%;aspect-ratio:1/1;opacity:0;cursor:pointer;position:absolute;left:0;top:0;z-index:2}.navbar .theme-label input:nth-child(3){left:auto;right:0}.navbar .theme-label .radio-icon{align-self:center;height:90%;aspect-ratio:1/1;padding:5%;z-index:1;display:flex;align-items:center;justify-content:center}.navbar .theme-label .radio-icon svg{height:80%;width:100%;scale:80%}.navbar .theme-label .slider{height:100%;aspect-ratio:1/1;position:absolute;background-color:#6471b4;border-radius:5px;transition:.2s;z-index:0}[color-theme=light] .navbar{background-color:#d0d7fb80}[color-theme=light] .navbar .logo-svg .logo{fill:#683fa6;stroke:#683fa6}[color-theme=light] .navbar .theme-label{background-color:#b0b9e8}[color-theme=light] .navbar .theme-label .slider{background-color:#9060d7}@media screen and not (max-width:1024px){.navbar{height:10vh;padding:.5vh 1vh}.navbar .logo-svg{height:6vh}.navbar .theme-label{height:5vh;width:10vh}}main{padding:80px 20px 20px;display:flex;flex-flow:column;align-items:center;gap:20px}main>*{width:95%;padding:10px;background-color:#3e364980;border-radius:5px;border:1px solid #32439a}main .intro{display:flex;flex-flow:column;gap:10px;scroll-margin-block:80px}main .intro p{margin-left:20px;width:80%}main .tool-set{display:flex;flex-flow:column}main .tool-set .icons{width:80%;align-self:center;margin-bottom:5px;display:flex;flex-flow:row wrap;justify-content:space-between;gap:20px}main .tool-set .icons .tool-item{justify-self:center;text-align:center;position:relative;min-width:100px;width:15%;max-width:200px}main .tool-set .icons .tool-item svg{width:80%;height:80%;filter:saturate(0) brightness(90%);transition:.2s}main .tool-set .icons .tool-item svg:hover{filter:saturate(100%) brightness(1)}main .tool-set .icons .tool-item h2{font-size:2vw;align-self:flex-end;justify-self:center;text-wrap:nowrap}main .projects{display:flex;flex-flow:column;justify-content:space-around;gap:10px}main .projects .project-item{width:85%;max-width:75vw;min-height:30vh;padding:10px;display:flex;flex-flow:row wrap;gap:10px;background-color:#111013;border:1px solid #32439a;border-radius:5px}main .projects .project-item:nth-child(3),main .projects .project-item:nth-child(5){align-self:flex-end}main .projects .project-item .project-img{min-width:200px;min-height:200px;flex:1 1;background-size:cover;background-repeat:no-repeat;background-position:0 0;border:1px solid #32439a;border-radius:5px}main .projects .project-item .project-dis{flex:1 1;min-width:270px;max-width:35vw;display:flex;flex-flow:column;gap:5px}main .more-info{display:flex;justify-content:center}main .more-info .col-1{width:100%}main .more-info .col-1 p{justify-self:center;max-width:80vw}[color-theme=light] main>*{background-color:#d0d7fb80;border:1px solid #9060d7}[color-theme=light] main .projects .project-item{background-color:#b0b9e8;border:1px solid #9060d7}[color-theme=light] main .projects .project-item .project-img{border:1px solid #9060d7}[color-theme=light] main .more-info .col-2 .artwork{background-color:#b0b9e8;border:1px solid #9060d7}@media screen and not (min-width:420px){main{padding:80px 5px 5px}main>*{width:100%}main .projects .project-item{max-width:none;width:100%;align-self:center}}@media screen and not (min-width:750px){main .intro p{margin:0;width:100%}main .projects .project-item .project-dis{max-width:none}}@media screen and not (min-width:1025px){main .tool-set .icons .tool-item h2{font-size:2rem}}@media screen and not (max-width:1024px){main{padding:11vh 15vh 1vh}main .intro{scroll-margin-block:11vh}}*{box-sizing:border-box;margin:0;padding:0}* :focus{outline:solid 2px #6471b4}html{scrollbar-color:#6471b4 #3e3649;scrollbar-width:thin;scroll-behavior:smooth}body{color:#fffc;background-color:#111013;font-family:helvetica,roboto;font-size:1.5vw}footer{justify-self:center;width:fit-content;margin-bottom:10px;padding:5px;font-size:1rem;border-bottom:1px solid #6471b4}h1,h2,h3{font-family:Teko,Franklin Gothic Medium,Arial,sans-serif;color:#6471b4;font-display:swap;font-size:3.7vw}button{min-height:40px;min-width:80px;width:fit-content;margin:0 4px;padding:4px;color:#fffc;font-size:1.2rem;border:none;border-radius:5px;transition:.2s;cursor:pointer}button:hover,button:focus{filter:brightness(1.3)}.first-btn{background-color:#32439a}.second-btn{background-color:#6471b4}a{color:#6471b4;text-decoration:none}a:hover{filter:brightness(140%)}.bg-effect{width:100%;height:100%}.bg-effect .partical{position:fixed;height:auto;aspect-ratio:1/1;filter:blur(1px);clip-path:polygon(100% 50%,65% 35%,50% 0,35% 35%,0 50%,35% 65%,50% 100%,65% 65%);opacity:.9;background-color:#80aaff;animation:flicker linear infinite;z-index:-10}@keyframes flicker{0%{opacity:.9}50%{opacity:.1}to{opacity:.9}}[color-theme=light]{scrollbar-color:#32439a #d0d7fb}[color-theme=light] *{outline-color:#683fa6}[color-theme=light] .bg-effect{display:none}[color-theme=light] .bg-effect .partical{animation-play-state:paused}[color-theme=light] body{background-color:#b0b9e8;color:#000000b3}[color-theme=light] footer{border-bottom:1px solid #9060d7}[color-theme=light] h1,[color-theme=light] h2,[color-theme=light] h3{color:#683fa6}[color-theme=light] .first-btn{background-color:#683fa6}[color-theme=light] .first-btn:before{background-color:#683fa680}[color-theme=light] .second-btn{background-color:#9060d7}[color-theme=light] .second-btn:before{background-color:#683fa680}[color-theme=light] a{color:#683fa6}@media screen and not (min-width:1025px){body{font-size:1.5rem}h1,h2,h3{font-size:3rem}}