* {
    margin: 0;
    padding: 0;
    --color-background: #242629;
    --color-background-secondary: #16161a;
    --color-text-primary: #fffffe;
    --color-text-secondary: #94a1b2;
    --color-text-muted: rgb(90, 87, 87);
    --color-button-background: #7f5af0;
}

html,
body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    font-size: .8em;
}

.btn {
    background-color: var(--color-button-background);
    color: var(--color-text-primary);
    border: none;
    padding: 2.5%;
    font-size: 1em;
    border-radius: 5px;
}

    .btn[disabled] {
        background-color: var(--color-background);
        color: var(--color-text-muted);
    }

div.content {
    width: 80%;
    height: fit-content;
    margin: auto;
    border: 1px solid black;
    padding: 5%;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-background-secondary);
}

h1 {
    padding-bottom: 10%;
}

img {
    width: 50%;
    margin: auto auto 10% auto;
    opacity: .7;
    transition: opacity ease .2s;
}

    img:hover {
        opacity: 1;
    }

form#sso-login {
    width: 100%;
    display: flex;
}

    form#sso-login input[type=submit] {
        width: 100%;
        margin: auto auto;
    }

div.middle-divider {
    width: 100%;
    display: flex;
    margin: 5% 0;
}

    div.middle-divider * {
        flex: 1;
    }

    div.middle-divider hr {
        height: fit-content;
        margin: auto;
    }

        div.middle-divider hr:last-of-type {
            margin: auto 0 auto auto;
        }

    div.middle-divider p {
        font-size: 1em;
        text-align: center;
        margin: auto 5%;
    }

form#redeem {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

    form#redeem input[type=button] {
        width: 100%;
    }

    form#redeem input[type=text] {
        background-color: var(--color-background);
        outline: none;
        border: none;
        font-size: 1em;
        padding: 2.5%;
        color: var(--color-text-primary);
        text-align: center;
    }

div.content h1,
div.content p {
    color: var(--color-text-primary);
}

footer {
    display: flex;
    color: var(--color-text-secondary);
    font-size: 1em;
    background-color: var(--color-background-secondary);
    padding: 2%;
}

    footer a,
    footer p {
        text-decoration: none;
        opacity: .5;
        transition: all ease-in-out .2s;
        font-size: .5em;
    }

        footer a:hover,
        footer p:hover {
            opacity: 1;
        }

        footer a:visited {
            color: var(--color-text-secondary);
        }

    footer div {
        width: 33.3%;
        height: 100%;
        display: flex;
    }

        footer div:nth-of-type(2) * {
            margin: auto;
        }


        footer div:nth-of-type(3) {
            text-align: right;
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-right: 1%;
        }

@media screen and (min-width: 480px) {
    html,
    body {
        font-size: .9em;
    }

    div.content {
        width: 65%;
    }

    footer {
        padding: 1%;
    }

        footer a,
        footer p {
            font-size: .7em;
        }
}

@media screen and (min-width: 768px) {
    div.content {
        width: 50%;
    }

    footer {
        padding: 1%;
    }

        footer a,
        footer p {
            font-size: .8em;
        }
}

@media screen and (min-width: 992px) {
    html,
    body {
        font-size: 1em;
    }

    div.content {
        width: 25%;
    }
}