@font-face{font-family:Montserrat;src:url(../fonts/Montserrat-Regular.ttf);font-display:swap}@font-face{font-family:Starout;src:url(../fonts/Starjhol.ttf);font-display:swap}*,::after,::before{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}:root{--prim-color:#ffffff;--grey-color:#050505;--l-grey-color:#252525;--bg:black;--bar:85%;--speed:2s}body{position:relative;background-color:var(--bg);color:#f0f8ff;font-family:Montserrat,Arial,Helvetica,sans-serif;width:100vw;padding:0}h2{line-height:3em}h3{line-height:.9em;font-weight:500;font-size:1.2em;position:relative;margin-bottom:20px;text-align:center}p{font-size:1.5em;text-align:center}p.sub{margin-top:5px;font-size:1.1em}p.small{margin-top:5px;margin-bottom:10px;font-size:.8em;text-align:left}button{margin-top:20px}li{list-style:none;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;overflow-y:hidden;margin-bottom:10px;padding:10px;-webkit-transition:.6s all ease;transition:.6s all ease;background-color:transparent;border-bottom:1px solid var(--prim-color);text-align:left}li:hover{background-color:#4444}main{position:relative;padding:0}main section{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;text-align:center;padding:5em 10%;width:100%;padding-top:30px}#loading-page{height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100vw;position:fixed;top:0;left:0;background-color:#000;z-index:99999}#loading-page svg path{fill:#ffffff00;stroke:#fff;stroke-width:.08;stroke-linecap:butt;stroke-dasharray:40;stroke-dashoffset:40;-webkit-animation:name-fillup 5s ease infinite alternate forwards;animation:name-fillup 5s ease infinite alternate forwards}#loading-page .progress-bar{outline:1px solid #fff;width:40%;height:10px;overflow:hidden;position:relative}#loading-page .progress-bar::before{content:"";position:absolute;top:0;width:100%;height:100%;background-color:#fff;-webkit-transition:1s all ease;transition:1s all ease;-webkit-animation:bar-fillup var(--speed) ease forwards;animation:bar-fillup var(--speed) ease forwards}header{color:var(--prim-color);height:10vh;background-color:var(--bg);position:-webkit-sticky;position:sticky;top:0;z-index:10;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0 10%;width:100%}header .name{line-height:.9em;font-family:Starout,Montserrat,Arial;font-weight:500}header .side-ham{position:relative}header .side-ham .line{position:absolute;content:"";display:block;width:70%;background-color:var(--prim-color);height:2px;-webkit-transition:.4s ease-out width;transition:.4s ease-out width}header .side-ham .line:nth-of-type(1){top:0;left:0}header .side-ham .line:nth-of-type(2){right:0;bottom:0}header .side-ham:hover .line{width:100%}#intro-sect{position:relative;height:90vh;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}#intro-sect .heading{position:relative;top:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(300px) scale(.8) translateY(-50%);transform:perspective(300px) scale(.8) translateY(-50%)}#intro-sect .heading h1{font-family:Starout,Audiowide,Montserrat,Arial,Helvetica,sans-serif;line-height:.9em;font-weight:100;color:#f0f8ff;font-size:3.5em;text-align:center;-ms-grid-column-align:center;justify-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}#intro-sect .heading h1:nth-of-type(1){-webkit-transform:scale3d(.7,1.8,2.8) rotate3d(1,0,0,45deg);transform:scale3d(.7,1.8,2.8) rotate3d(1,0,0,45deg)}#intro-sect .heading h1:nth-of-type(2){-webkit-transform:scale3d(1,1.6,2.8) rotate3d(1,0,0,45deg);transform:scale3d(1,1.6,2.8) rotate3d(1,0,0,45deg)}#intro-sect .bg{position:absolute;z-index:-1;height:100%}#intro-sect .bg canvas{display:block}#intro-sect .cta-btn{top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;width:150px;height:50px;z-index:40;padding:0;position:relative}#intro-sect .cta-btn p{text-align:center;position:absolute;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}#about-sect .sub{margin-top:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:50px}#projects-sect nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;gap:4px;margin-bottom:20px}#projects-sect nav input{display:none}#projects-sect nav input:checked+label{border-bottom:1px solid #fff}#projects-sect nav input:active+label{background-color:#111}#projects-sect nav label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center;font-size:.6em;padding:5px;-webkit-transition:.4s all ease;transition:.4s all ease}#projects-sect nav label:hover{background-color:#090909}#projects-sect ul{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(1000px);transform:perspective(1000px);margin:40px 0;padding:0;display:-ms-grid;display:grid;-ms-grid-columns:(minmax(280px,1fr)) [auto-fit];grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-rows:420px;gap:5px}@media screen and (min-width:700px){#projects-sect ul{grid-auto-rows:480px}}#projects-sect li.project{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-transition:.6s all ease;transition:.6s all ease;-webkit-transform:translate3d(0,2px,20px);transform:translate3d(0,2px,20px);height:100%;border-radius:5px;border:none}#projects-sect li.project img{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;background-color:transparent;border:none;margin-bottom:10px;-webkit-box-flex:3;-ms-flex:3;flex:3;width:120px}#projects-sect li.project .project-desc{-webkit-box-flex:2;-ms-flex:2;flex:2;width:100%;max-width:70%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}#projects-sect li.project .project-desc p{text-align:center}#contact-sect{height:90vh}.skill-grid{margin:0;margin-top:40px;padding:0;display:-ms-grid;display:grid;-ms-grid-columns:(minmax(80px,1fr)) [auto-fit];grid-template-columns:repeat(auto-fit,minmax(80px,1fr));grid-auto-rows:80px;gap:5px}.skill-grid div{background-color:transparent;-webkit-transition:1s all;transition:1s all;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.skill-grid div:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.blue-text{color:var(--prim-color);padding:0;margin:0}.hide{height:100vh;overflow:hidden}@-webkit-keyframes name-fillup{0%{stroke-dasharray:40}100%{stroke-width:0;fill:#ffffffff;stroke-dasharray:80}}@keyframes name-fillup{0%{stroke-dasharray:40}100%{stroke-width:0;fill:#ffffffff;stroke-dasharray:80}}@-webkit-keyframes bar-fillup{0%{width:0%}100%{width:var(--bar)}}@keyframes bar-fillup{0%{width:0%}100%{width:var(--bar)}}.filled::before{-webkit-animation-play-state:paused;animation-play-state:paused;width:100%}.scale-out-center{-webkit-animation:scale-out-center .5s cubic-bezier(.55,.085,.68,.53) both;animation:scale-out-center .5s cubic-bezier(.55,.085,.68,.53) both}@-webkit-keyframes scale-out-center{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);opacity:1}}@keyframes scale-out-center{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);opacity:1}}