/*
Module Name= Dynamic Nav
Updated= 25.02.24 */

/*
=Nav Container
============================================= */
nav {
 width: 25rem;
 position: fixed;
 top: 0; bottom: 0; left: -25rem;
 overflow-y: scroll;
 scrollbar-width: none;
 transition: 0.5s ease-in-out;
}

input:checked ~ nav {
 background-color: rgb(248 248 248/ 0.9);
 left: 0;
}

@media (max-width: 574.98px) {
 input:checked ~ nav {
  width: 100vw;
 }
}

/*
=Nav Links
============================================= */
nav a {
 color: transparent;
 text-transform: uppercase;
 font-size: 72.5%;
 letter-spacing: 0.125rem;

 display: block;
 border-bottom: 0.1rem solid transparent;
 margin: 0 2rem;
 padding: 0.7rem 0;
 transition: 0.5s ease-in-out;
}

nav a:first-child { margin-top: 8rem; }
nav a:last-child  { margin-bottom: 3rem; }

input:checked ~ nav a {
 color: rgb(58 65 72);
 border-bottom-color: rgb(0 0 0/ 0.075);
}

input:checked ~ nav a:hover {
 color: rgb(255 45 0);
 padding-left: 0.5rem;
 transition: 0.1s ease-in;
}

nav a:first-child {
 border-top: 0.1rem solid transparent;
}

input:checked ~ nav a:first-child {
 border-top-color: rgb(0 0 0/ 0.075);
}

input:checked ~ nav a.red {
 color: rgb(255 45 0);
}

/* ========================================== */