@import url(/data/font/Lexend-Regular.ttf);

:root {
    --background: #231f29;
    --light-background: #584e64;
    --text: #cac1d6;
    --accent: #72529e;
}

.header {
    margin-top: -1vh;
    margin-left: -8px;
    margin-right: -8px;
    margin-bottom: 52px;
    padding-top: 20px;

    background-color: var(--light-background);
    padding: 14px;
}

.header-container {
    margin: auto !important;
    max-width: 75vw;
}

.header h2 {
    font-size: 52px;
    padding-bottom: 12px;
}

.header a {
    margin-right: 76px;

    background-image: linear-gradient(var(--text), var(--text));
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0% 3px;

    transition: background-size 0.25s;

    text-decoration: none;
    color: var(--text);
}

.header a:hover {
    background-size: 100% 3px;
}

.header * {
    margin: 0;
}

@media only screen and (max-width: 1200px) {
    .header {
        text-align: center;
    }

    .header h2 {
        font-size: 10vw;
    }

    .header a {
        margin-left: 3vw;
        margin-right: 3vw;
    }
}

.centered-container {
    margin-inline: auto;
    max-width: 75vw;
}

.light-container {
    padding-top: 18px;
    padding-bottom: 18px;

    background-color: var(--light-background);
    border-radius: 4px;
}

.light-container a {
    color: var(--background);
}

.light-container p {
    max-width: 95%;
    padding: 18px;
    margin: auto;
}

.button {
    padding: 8px;
    border-radius: 12px;
    border-style: none;

    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 24px;

    background-color: var(--accent);
    color: var(--text);
    transition: color 0.15s;
}

.button:hover {
    color: var(--background);
}

body {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    background-color: var(--background);
    color: var(--text);
    font-size: 24px;
}

a {
    color: var(--accent);
}

hr {
    color: var(--light-background);
    width: 75vw;
}