:root {
    --main-color: #0ac21cb4;
    --header-color: rgba(92, 88, 88, 0.58);
    --body-color: #010101;
    --secondary-color: #133efa;
    --main-font: 'Roboto', sans-serif;
}
body {
    background-color: var(--body-color);
    color: var(--main-color);
    font: 14pt var(--main-font);
}
header {
    display: flexbox;
    background-color: var(--header-color);
    border: solid var(--main-color) 2px;
    border-radius: 15px;
    margin: 5px;
    animation: header-border-animation 3.5s linear infinite;
}
@keyframes header-border-animation {
    0% {
        border-color: linear-gradient(90deg, rgba(17, 241, 73, 0.5), rgba(36, 213, 20, 0.5));
        border-radius: 15px;
        box-shadow: 0 0 1px rgba(7, 234, 7, 0.5);
    }
    25% {
        border-color: linear-gradient(90deg, rgba(13, 179, 68, 0.5), rgba(17, 173, 72, 0.5));
        border-radius: 35px;
        box-shadow: 0 0 1px 1 rgba(40, 195, 40, 0.5);
    }
    50% {
        border-color: linear-gradient(90deg, rgba(8, 98, 43, 0.5), rgb(26, 130, 63));
        border-radius: 25px;
        box-shadow: 0 0 1px 1 rgb(20, 167, 20);
    }
    75% {
        border-color: linear-gradient(90deg, rgba(125, 223, 158, 0.5), rgba(7, 158, 12, 0.5));
        border-radius: 55px;
        box-shadow: 0 0 1px 1 rgba(49, 199, 49, 0.5);
    }
    100% {
        border-color: linear-gradient(90deg, rgba(10, 236, 47, 0.5), rgba(36, 129, 37, 0.5));
        border-radius: 15px;
        box-shadow: 0 0 1px 1 rgb(101, 233, 101);
    }
}
/* Navigation Bar */
ul[id="nav-bar"] {
    display: grid;
    justify-content: center;
    list-style: none;
    grid-template-columns: repeat(4, max-content);
    grid-template-rows: auto;
    padding: .4vh .2vw;
    margin: auto;
    margin-left: 35vw;
}

/* Small Desktop devices (between 768px and 1024px) */
@media (max-width: 1024px) and (min-width: 800px) {
    ul[id="nav-bar"] {
        grid-template-columns: repeat(4, max-content);
        grid-template-rows: auto;
        justify-content: center;

        margin-left: 20vw; /* Adjust margin for better fit */
    }
}

/* Large Tablet devices (less than 1024px) */
@media (max-width: 800px) {
    ul[id="nav-bar"] {
        grid-template-columns: repeat(4, max-content);
        grid-template-rows: auto;
        margin-left: 4vw; /* Adjust margin for better fit */
    }
}

/* Navigation Bar List Boxes */
ul[id="nav-bar"] li {
    display: block;
    text-align: center;
    border-left: solid grey 1px;
    border-right: solid grey 1px;
    width: 120px;
    height: max-content;
    padding: 10px 10px;
    margin: 5px 0;
    text-decoration: none;
    color: white;
    font-size: 1.1em;
    font-weight: 700;
    animation: nav-button-animation 4s linear;
}
@keyframes nav-button-animation {
    0% {

    }
    25% {

    }
    50% {

    }
    75% {

    }
    100% {
 
    }
}
ul[id="nav-bar"] li:hover {
    background: linear-gradient(90deg, rgba(69, 114, 251, 0.5), rgba(0, 162, 255, 0.5));
}
/* Navigation Bar List Item */
ul[id="nav-bar"] li a {
    border-bottom: var(--secondary-color) dotted 2px;
    text-decoration: none;
    color: var(--main-color);
    padding: auto;
}
/* New Apps */
nav[id="new-apps"] {
    display: flex;
    border: solid 1px var(--secondary-color);
    width: 30vw;
    height: 70vh;
    margin: 3vh 5vw;
    padding: 15px;
}
nav[id="new-apps"] a {
    border: solid var(--main-color) 1vmin;
    border-radius: 15px;
    margin: 5px;
    font-size: 2vw;
    font: 2vw var(--main-font);
    padding: 10px 55px;
    text-decoration: none;
    color: var(--main-color);
}
/* Mobile devices (less than 625px) */
@media (max-width: 625px) {
    ul[id="nav-bar"] {
        display: flexbox;
        box-sizing: border-box;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
    }
    ul[id="nav-bar"] li {
        display: inline-flex;
        border-left: none;
        justify-content: center;
        width: 140px;
        font-size: 3vh;
        border-right: none;
        border-top: solid grey 1px;
        border-bottom: solid grey 1px;
        margin: auto;
        padding: 1vh 15vw;
    }
    nav[id="new-apps"] {
        margin: 30px 5vw;
    }
}
/* Mobile devices (less than 450px) 
@media (max-width: 450px) {
    ul[id="nav-bar"] {
        
    }
    ul[id="nav-bar"] li {

    }
    ul[id="nav-bar"] li a {
        
    }
    nav[id="new-apps"] {
        
    }
}
*/