:root {
    padding: 0;
    margin: 0;
    font-size: 9px;
    --heading: "Poppins", sans-serif;
    --regular: "Lato", sans-serif;
    --primary: white;
    --secondary: #322741;
    --primary-dark: #e6e6e6;
    --secondary-light: #3e3152;
    --accent: #d1b203;
    font-family: var(--regular);
}
* {
    box-sizing: border-box;
}
body {
    padding: 0;
    margin: 0;
    background-color: var(--primary-dark);
    color: black;
}

nav {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    font-size: 1.5rem;
    height: 4em;
    align-items: center;
    background-color: var(--secondary);
    font-family: var(--heading);
    color: var(--primary);
    padding: 1em 2em;
    gap: 2em;
    span {
        font-weight: 700;
        font-size: 1.5em;
        user-select: none;
    }
    ul {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        list-style: none;
        font-weight: 500;
        margin: 0;
        padding: 1em 2em;
        position: fixed;
        top: 4em;
        right: 0;
        border-left: 0.1em solid var(--secondary);
        border-bottom: 0.1em solid var(--secondary);
        background-color: var(--primary);
        color: var(--secondary);
        li {
            transition: color 0.2s ease-in-out;
        }
        li:hover {
            color: var(--accent)
        }
    }
    #nav-book {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.4em 0.53em;
        border: 0.1rem solid var(--accent);
        border-radius: 0.5em;
        color: var(--secondary);
        background-color: var(--accent);
        transition: transform 0.2s ease, opacity 0.1s ease-in-out;
        cursor: pointer;
        span {
            padding: 0;
            margin: 0;
            font-size: 1em;
            font-weight: 600;
        }
    }
    #nav-book:hover {
        transform: scale(1.1);
    }
    #nav-book:active {
        transform: scale(1);
        opacity: 0.5;
    }
    #nav-button {
        font-size: 2rem;
        transition: transform 0.2s ease, opacity 0.1s ease-in-out;
        cursor: pointer;
    }
    #nav-button:hover {color: var(--accent);}
}

a {
    text-decoration: none;
    color: inherit;
    margin: 0;
    padding: 0;
}
img {
    object-fit: contain;    
}

.hidden {display: none;}


@media (min-width: 481px) and (max-width: 768px) {
    :root {font-size: 12px;}
}

@media (min-width: 769px) and (max-width: 1024px) {
    :root {font-size: 14px;}
}
  
@media (min-width: 1025px) and (max-width: 1280px) {
    :root {font-size: 15px;}
    nav {
        font-size: 1rem;
        ul {
            display: flex !important;
            position: static;
            flex-direction: row;
            width: 50%;
            align-items: center;
            padding: 0;
            background-color: inherit;
            color: inherit;
            border: none;
        }
        #nav-button {display: none;}
    }
}

@media (min-width: 1281px) {
    :root {font-size: 16px;}
    nav {
        font-size: 1rem;
        ul {
            display: flex !important;
            position: static;
            flex-direction: row;
            width: 50%;
            align-items: center;
            padding: 0;
            background-color: inherit;
            color: inherit;
            border: none;
        }
        #nav-button {display: none;}
    }
}