header{position:fixed;width:100dvw;padding:2rem 4rem;display:flex;justify-content:space-between;background-image:linear-gradient(#000 70%,#00000000);z-index:500;nav{height:100%;display:flex;ul{list-style:none;display:flex;gap:2rem;li{font-size:1.2rem}}}}#hamburger{background-color:transparent;border:none;display:none;height:100%;img{height:100%}}#cis-wrapper{max-height:4rem;display:flex;align-items:center;gap:1rem;z-index:1000;img{max-height:100%;max-width:10rem}span{font-size:1.4rem;font-weight:300;padding:0}}@media (max-width:768px){header{padding:2rem;height:6.2rem}header>nav>ul{position:fixed;display:none;background-color:var(--background);width:100dvw;height:100dvh;top:0;left:0;z-index:99;padding:2rem;flex-direction:column;align-items:end;justify-content:center}header>nav>ul.active{display:flex}header>nav>ul>li{font-size:3rem}#hamburger{display:block;z-index:1000}#cis-wrapper{max-height:4rem;display:flex;gap:1rem;z-index:1000;img{max-height:100%;max-width:12rem}span{font-size:1.6rem;font-weight:300;padding:0}}}footer{bottom:0;padding:2rem 4rem;width:100%}#main-site-back-link{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.05em;width:max-content;margin-bottom:.5em}#copy-right{text-align:right;display:block;width:100%;font-size:.8rem}#project-style{li{font-size:1.2rem;letter-spacing:.05em}h2{font-weight:500}}#feat-img{aspect-ratio:16/9;object-fit:cover;object-position:center}#main-title{font-size:3rem;text-align:center;font-weight:500;margin-top:2rem}#project-skill-point{text-align:center;width:100%;display:block}.code-wrap{margin:2rem auto;h3{font-weight:400;font-style:italic}}.imgs{display:grid;grid-gap:.5rem;gap:.5rem;justify-content:space-between;align-items:stretch;img{height:100%;width:100%;object-fit:cover}}.yt-iframe{border:none!important;max-height:90dvh!important;width:360px;height:640px}.video-grid{display:grid;grid-template-columns:auto 1fr;grid-gap:2rem 6rem;gap:2rem 6rem;div{max-width:480px;min-width:50px}div,iframe{margin:auto}}.video-grid-reverse{grid-template-columns:1fr auto;grid-template-areas:"text img"}@media (max-width:996px){.video-grid{grid-template-columns:1fr}.video-grid-reverse{grid-template-areas:"img" "text"}}.img-dis-wrap{position:relative;span{width:100%;padding-top:5em;text-align:center;display:block;position:absolute;bottom:0;background-image:linear-gradient(0deg,#000,#00000000)}}#buttons{display:flex;list-style:none;justify-content:space-around;gap:1rem;margin-top:4rem;margin-bottom:2rem}#buttons>li{border-bottom:2px solid var(--border);flex-grow:1;padding-bottom:.5rem;transition:all .2s}#skill-tab{position:relative}#skill-tab>ul>li>button{background-color:transparent;border:none;cursor:pointer;font-size:1rem;letter-spacing:.08em;font-weight:600;width:100%}.skill-detail{list-style:none;width:100%;display:none}.skill-detail>li{padding:2rem;background-color:var(--block);margin:.5rem;border-radius:6px}.skill-detail>li>p{padding-bottom:.5rem;line-height:1.8em}#landing{height:80dvh;min-height:500px;position:relative}#landing>div{display:grid;height:100%;grid-gap:2rem;gap:2rem;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);grid-template-areas:"context context context context" "context context context context" "title title title ..." "... ... ... skills"}@media (max-width:768px){#landing>div{grid-template-areas:"context context context context" "context context context context" "title title title title" "... ... skills skills"}}#site-title-wrap{grid-area:title}#site-tech{grid-area:skills}#site-title-wrap>div{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:1.5rem;img{max-height:2.5rem;width:max-content;object-fit:contain;object-position:left}span{font-size:3rem;padding:0;font-weight:300}}#site-tech{margin-left:auto;max-width:500px;bottom:25%;background-color:var(--block);padding:2rem;border-radius:6px;height:max-content;span{color:var(--text-dim);width:100%;display:block;text-align:center}}#skills-wrap{display:flex;align-items:center;justify-content:space-evenly;gap:1rem;margin-bottom:1rem;img{width:40%;min-width:50px;max-width:100px;opacity:.7}}#username-input{font-style:italic}#context-wrap{position:relative;grid-area:context}#lab-text,#username{opacity:.7;position:absolute;right:0;text-align:right;padding:0;transition:top .5s,opacity .5s;background:-webkit-linear-gradient(var(--text),var(--background));-webkit-background-clip:text;-webkit-text-fill-color:transparent}#username{font-size:8rem;margin:0;padding:0}#lab-text{font-weight:300;font-size:4rem;transform:translateY(8rem)}@media (max-width:996px){#username{font-size:6rem}#lab-text{font-weight:300;font-size:3rem;transform:translateY(6rem)}}@media (max-width:768px){#username{font-size:4rem}#lab-text{font-weight:300;font-size:2rem;transform:translateY(4rem)}}.swap-out{opacity:0!important}.project-card{display:grid;background-color:var(--block);border-radius:6px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.project-card>div{padding:min(2rem,10%);display:flex;flex-direction:column;justify-content:center;height:max-content;margin-top:auto;margin-bottom:auto}.project-card>img{width:100%;object-fit:cover;aspect-ratio:1/1}#cards{display:flex;flex-direction:column;gap:1rem}