:root{--main-background-color:#FFF8F0;--main-background-color-trans:rgba(255, 248, 240, 0.7);--main-text-color:#4C4F67;--button-text-color:#fff;--button-background-color:#968168;--link-text-color:var(--button-background-color);--unselected-background-color:#D8D8DD;--unselected-text-color:#4C4F67;--selected-background-color:#4C4F67;--selected-text-color:#D8D8DD;--heading-color:#4a6b59;--nav-background-color:#b6a591}html{font-size:16px}body{margin:0;font-family:sans-serif;overflow-x:hidden;background-color:var(--main-background-color);color:var(--main-text-color)}h1,h2,h3,h4,h5,h6{color:var(--heading-color)}section{width:90vw}nav{display:flex;align-items:center;justify-content:space-between;font-weight:700;padding:0 3rem;background-color:var(--nav-background-color)}nav li,nav ul{list-style-type:none;display:inline-block}nav ul{padding-left:0}nav li{margin:8px 16px}.nav-item{background-color:var(--unselected-background-color);color:var(--unselected-text-color);padding:.75em .5em;border-radius:.2em}.nav-item.selected,.nav-item.selected>.nav-link{background-color:var(--selected-background-color);color:var(--selected-text-color)}.nav-link{position:relative;text-decoration:none;color:var(--unselected-text-color);background-color:var(--unselected-background-color)}.nav-link:before{content:"";position:absolute;height:3px;background:var(--selected-background-color);bottom:-4px;right:0;width:0%;transition:.3s cubic-bezier(.47,0,.745,.715)}.nav-item.selected>.nav-link::before{background:var(--unselected-background-color)}.nav-link:hover:before{left:0;width:100%}.portfolio{padding:10vw;line-height:1.5;background-image:url(../img/circuit-tile-themed.jpg);background-size:cover}.grid-container{display:grid;grid-template-columns:repeat(auto-fill,10em);grid-auto-rows:minmax(5em,auto);gap:1em;width:100%}.grid-item{background-color:#b6a591;border-radius:.25em;padding:.25em}.grid-item:hover{transform:scale(1.02);box-shadow:2px 2px 2px 1px rgba(0,0,0,.2)}.item-head{display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;height:100%}.item-head>span{font-weight:bolder}.item-detail{background-color:#b6a591;opacity:0;overflow:hidden;width:0;height:0;z-index:3;border-radius:.25em;padding:1em;box-sizing:border-box}@media screen and (max-width:768px){section{height:auto}.portfolio{padding:5vw}}@media screen and (max-width:575px){section{height:auto}nav{width:100%;padding:0 1em;justify-content:center}nav li{margin:auto;margin-block-end:.25em}.item-detail{overflow:auto}}