@import 'root.css';

* {
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navbar {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
}

.topNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rightNav {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 20px;
    z-index: 1;
}

.rightNav a {
    color: var(--primary-text-color);
}

.hamburgerButton {
    display: none;
}

.closeRightNav {
    display: none;
}

.bottomNav .date {
    color: var(--secondary-text-color);
    font-size: 10px;
    margin: 0;
    text-align: right;
    width: 100%;
}

.bottomNav {
    width: 100%;
    background-color: var(--secondary-color);
    padding: 5px;
    display: flex;
    justify-content: center;
}

.bottomNav .date, .topNav {
    width: 960px;
}

@media (max-width: 992px) {
    .topNav, .bottomNav .date {
        width: 80%;
    }
}

@media (max-width: 576px) {
    .topNav {
        position: relative;
    }

    .topNav, .bottomNav .date {
        width: 100%;
    }

    .bottomNav {
        padding-right: 40px;
    }

    .leftNav {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .rightNav {
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        background-color: black;
        height: 100vh;
        flex-direction: column;
        transition: width 0.5s;
    }

    .rightNav a {
        color: transparent;
    }

    .rightNav.rightNavShow {
        display: flex;
        width: 50%;
    }

    .rightNav.rightNavShow * {
        color: white;
    }

    .rightNav > div {
        padding: 10px 20px;
    }

    .hamburgerButton {
        display: block;
        position: absolute;
        right: 0;
        color: white;
        font-size: 48px;
        margin-right: 40px;
        cursor: pointer;
    }

    .closeRightNav {
        display: block;
        position: absolute;
        right: 0;
        cursor: pointer;
        font-size: 20px;
    }
}