:root{--color-gray-d:#18151a;--color-gray-m:#27222b;--color-green-d:#52ebad;--color-green-m:#9bf3d0;--color-green-l:#ccfae8;--color-purple-d:#8b50eb;--color-purple-m:#b892f2;--color-purple-l:#ddccfa;--color-red-d:#eb5252;--color-red-m:#f39b9b;--color-red-l:#facccc;--color-main:#fff;--color-h1:var(--color-green-d);--color-h2:var(--color-green-d);--color-h3:var(--color-main);--color-anchor:var(--color-purple-m);--color-anchor-active:var(--color-red-m);--color-body-background:var(--color-gray-d);--color-section-background:var(--color-gray-m);color:var(--color-main)}body{background-color:var(--color-body-background);margin:0;font-family:Verdana,Tahoma,sans-serif;font-size:16px}h1{color:var(--color-h1)}h2{color:var(--color-h2);text-align:center;margin:0 0 10px;font-size:35px}h3{color:var(--color-h3)}a,a:visited{color:var(--color-anchor)}a:hover,a:focus,a:active{color:var(--color-anchor-active)}#root{grid-template-rows:min-content min-content auto min-content;grid-template-areas:"nav""header""main""footer";min-height:100vh;display:grid;position:relative}section{scroll-margin-top:50px}.med-background{background-color:var(--color-section-background);border-radius:30px;padding:15px}header{grid-area:header;justify-self:center}header h1{text-align:center;background-color:var(--color-gray-m);border:4px solid var(--color-green-d);border-radius:100px;width:max-content;min-width:17ch;max-width:70vw;margin:25px 0 0;padding:10px 20px;font-size:22px}nav{background-color:var(--color-gray-m);border-bottom:4px solid var(--color-purple-m);z-index:100;grid-area:nav;margin-top:-3px;position:sticky;top:0}nav ul{justify-content:center;gap:10px;margin:0;padding:0;list-style:none;display:flex}nav a{text-align:center;padding:7px 0 5px;font-size:12px;text-decoration:none;display:block}nav a:hover,nav a:focus,nav a:active{border-bottom:4px solid var(--color-red-m);margin-bottom:-4px}main{grid-area:main;grid-template-areas:"bio""featured""projects";justify-self:center;gap:20px;max-width:1400px;margin:20px;display:grid}#about-me{grid-area:bio;grid-template-rows:min-content auto;display:grid}#about-me div{flex-direction:column;gap:10px;padding-top:30px;padding-bottom:30px;display:flex}#about-me p{text-indent:2em;min-width:20ch;margin:0 0 0 5px;font-size:18px}.project{grid-template-rows:min-content min-content auto auto auto min-content;grid-template-areas:"title""image""tags""description""role""link";align-items:center;gap:10px;display:grid}.project h3{text-align:center;grid-area:title;justify-self:center;width:fit-content;margin:0;font-size:20px}.project img{aspect-ratio:16/9;object-fit:contain;grid-area:image;place-self:center;max-width:90%;height:175px;margin:0;display:block}.project ul{flex-flow:wrap;grid-area:tags;justify-content:center;gap:10px;margin:0;padding:0;list-style:none;display:flex}.project ul>li{flex:0 0 fit-content;color:var(--color-green-l);border:2px solid var(--color-green-m);border-radius:100px;height:min-content;padding:3px 6px;font-size:13px;display:block}.project p{text-indent:2em;margin:0;padding-left:10px}.project p.description{grid-area:description}.project p.role{grid-area:role}.project a{border:2px solid var(--color-purple-m);text-align:center;border-radius:100px;grid-area:link;justify-self:center;width:fit-content;margin:0;padding:3px 30px;font-size:20px;text-decoration:none;display:block}.project a:hover,.project a:focus,.project a:active{border-color:var(--color-red-m)}#featured-project{grid-area:featured;grid-template-rows:min-content auto;display:grid}#featured-project .project img{aspect-ratio:0;object-fit:cover;width:90%;height:100%;max-height:none}#other-projects{grid-area:projects;justify-self:center;max-width:1300px}#other-projects>ul{flex-flow:wrap;justify-content:center;gap:20px;padding:0;list-style:none;display:flex}#other-projects>ul>li{flex:400px;max-width:600px;display:flex}#other-projects>ul>li>*{align-self:stretch;width:100%}footer{background-color:var(--color-gray-m);border-top:4px solid var(--color-purple-m);grid-area:footer}footer ul{justify-content:center;gap:10px;margin:0;padding:0;list-style:none;display:flex}footer a{text-align:center;padding:5px 0;font-size:12px;text-decoration:none;display:block}footer a:hover,footer a:focus,footer a:active{border-top:4px solid var(--color-red-m);margin-top:-4px}@media only screen and (width>=340px){nav ul,footer ul{gap:15px}}@media only screen and (width>=410px){header h1{font-size:28px}nav a,footer a{font-size:15px}}@media only screen and (width>=475px){header h1{font-size:35px}nav ul{gap:25px}nav a{padding:7px 5px 5px}footer ul{gap:25px}footer a{padding:5px}}@media only screen and (width>=550px){header h1{font-size:40px}.project h3{width:max-content}}@media only screen and (width>=660px){nav ul{gap:50px}nav a{padding:7px 10px 5px;font-size:18px}footer ul{gap:50px}footer a{padding:5px 10px;font-size:18px}}@media only screen and (width>=900px){main{grid-template-columns:1fr 2fr;grid-template-areas:"bio featured""projects projects"}#featured-project .project img{width:100%}}@media only screen and (width>=1000px){#featured-project .project{grid-template:"image title"1fr"image tags"min-content"image description"min-content"image role"min-content"image link"1fr/5fr 4fr;align-content:center}#featured-project .project h3{align-self:end}#featured-project .project img{height:90%}#featured-project .project a{align-self:start}}