@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');

:root {
    --col-pri: #007acc;
    --col-sec: #004d00;
    --col-pri-l1: #66a3ff;
    --col-pri-l2: #cce0ff;
    --col-pri-d1: #00509e;
    --col-pri-d2: #003366;
    --col-sec-l1: #007a33;
    --col-sec-l1: #c6dfd0;

    --col-txt-dark: #141414;
    --col-txt-light: #e2e2e2;

    --col-glass-bg: #ffffff4f;
    --col-glass-border: #ffffff45;
}

/* Global definnitions */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Didact Gothic", serif;
}

html {
    font-size: 10px;
}

.txt-center {
    text-align: center;
}

.txt-left {
    text-align: left;
}

.txt-right {
    text-align: right;
}

.txt-justify {
    text-align: justify;
}

.flip {
    transform: rotate(180deg);
}

/* Menu Button */
.menu-button {
    position: relative;
    height: 40px;
    width: 40px;
    color: var(--col-txt-light);

    .menu-toggle {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        opacity: 0;
    }

    .menu-open {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        font-size: 4rem;
        opacity: 1;
        transition: opacity 300ms ease-in-out;
    }

    .menu-close {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        font-size: 4rem;
        opacity: 0;
        transition: opacity 300ms ease-in-out;
    }

    .menu-toggle:checked ~ .menu-open {
        opacity: 0;
        transition: opacity 300ms ease-in-out;
    }

    .menu-toggle:checked ~ .menu-close {
        opacity: 1;
        transition: opacity 300ms ease-in-out;
    }

}