:root {
    --background-primary: #FFFFFF;
    --background-primary-50a: #FFFFFF50;
    --background-primary-75a: #FFFFFF75;
    --background-primary-90a: #FFFFFF90;

    --background-secondary: #000000;
    --background-secondary-50a: #00000050;
    --background-secondary-75a: #00000075;

    --titles-primary: #000000;
    --titles-secondary: #FFFFFF;

    --paragraph-primary: #000000;
    --paragraph-secondary: #FFFFFF;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

h1 {
    font-family: future-z;
}

h2 {
    font-family: future-z;
    font-size: 2.75em;

    @media screen and (max-width: 979px) {
        font-size: 2.25em;
    }

    @media screen and (max-width: 767px) {
        font-size: 1.75em;
    }
}

h3 {
    font-family: future-z;
}

h4 {
    font-family: future-z;
}

p {
    font-family: lato;
}


.button-wrapper {
    margin: .25% .5%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;

    a {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        position: relative;

        p {
            font-size: 1.1em !important;
            display: inline;
        }

        .primary-content {
            padding: .5em .75em;
            display: inline;
        }

        .secondary-content {
            padding: .5em .75em;
            height: 100%;
            width: 100%;
            display: inline;
            position: absolute;
            top: 100%;
            left: 0;
            transition: .35s ease;
        }
    }

    @media screen and (max-width: 979px) {
        margin: .5% .75%;
    }

    @media screen and (max-width: 767px) {
        margin: .5% 1%;
    }

    @media screen and (max-width: 480px) {
        margin: 1.25% 1.5%;
    }

    &:hover {
        .secondary-content {
            top: 0;
        }
    }
}

.btn-primary {
    border: 2px solid var(--background-secondary);

    .primary-content {
        background-color: var(--background-secondary);

        p {
            color: var(--titles-secondary) !important;
        }
    }

    .secondary-content {
        background-color: var(--background-primary);

        p {
            color: var(--titles-primary) !important;
        }
    }
}

.btn-secondary {
    border: 2px solid var(--background-primary);

    .primary-content {
        background-color: var(--background-primary);

        p {
            color: var(--titles-primary) !important;
        }
    }

    .secondary-content {
        background-color: var(--background-secondary);

        p {
            color: var(--titles-secondary) !important;
        }
    }
}


body {
    width: 100%;
    background-color: var(--background-primary);

    main {
        min-height: 93dvh;

        .section-secondary {
            background-color: var(--background-secondary);

            h1, h2, h3, h4 {
                color: var(--titles-secondary);
            }

            p {
                color: var(--paragraph-secondary);
            }
        }
    }
}