:root {
    /* Reused Values */
    --bg-dark: #110a1a;
    --light-font-color: #fffaf1;
    --spacing: 8px;
    --sg-green-color: #248993;
    --sg-yellow-color: #FFAE1E;
    --sg-red-color: #FF585B;
    --sg-light-green: #d7fbe0;
    --sg-dark-green: #44888e;

    --success-color: var(--sg-green-color);
    --error-color: var(--sg-red-color);
    --forbidden-color: var(--sg-yellow-color);

    /* Property values */
    --background-color: var(--bg-dark);
    --text-color: var(--light-font-color);
    --logo-size: 200px;
}

/* Normal weight */
@font-face {
    font-family: "F37Bolton";
    src: /* best-practice: compressed web formats first */ url("https://sound-games.b-cdn.net/fonts/F37Bolton-Book.woff2") format("woff2"),
    url("https://sound-games.b-cdn.net/fonts/F37Bolton-Book.ttf") format("truetype"); /* fallback */
    font-weight: 400; /* regular */
    font-style: normal;
    font-display: swap;
}

/*  Medium (600)  */
@font-face {
    font-family: "F37Bolton";
    src: url("https://sound-games.b-cdn.net/fonts/F37Bolton-Medium.woff2") format("woff2"),
    url("https://sound-games.b-cdn.net/fonts/F37Bolton-Medium.ttf") format("truetype");
    font-weight: 600; /* medium */
    font-style: normal;
    font-display: swap;
}

/*  Bold (700)  */
@font-face {
    font-family: "F37Bolton";
    src: url("https://sound-games.b-cdn.net/fonts/F37Bolton-Bold.woff2") format("woff2"),
    url("https://sound-games.b-cdn.net/fonts/F37Bolton-Bold.ttf") format("truetype");
    font-weight: 700; /* bold */
    font-style: normal;
    font-display: swap;
}

html,
body {
    width: 100%;
    height: 100%;

}

body {
    background: var(--background-color);
    color: var(--text-color);
    font-family: "F37Bolton", "Helvetica", sans-serif;
}

@media (orientation: landscape) {
    .logo-container {
        --logo-size: 50px;
    }
}
.logo-container > img {
    width: var(--logo-size);
    height: var(--logo-size);
}


.main-container {
    padding: calc(5 * var(--spacing)) 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: calc(4 * var(--spacing));
}

.message-container {
    text-align: center;

    h1 {
        color: var(--tint-color);
        font-size: 2rem;
        font-weight: 400;
        margin: 0 0 calc(2 * var(--spacing)) 0;
    }

    a, a:active, a:hover, a:visited {
        color: var(--tint-color);
        text-decoration: none;
    }


    .message-content {
        font-size: 1.2em;
        margin: 0 0 calc(4 * var(--spacing)) 0;
    }

    .link-button {
        border: 2px solid var(--button-tint);
        color: var(--button-tint);
        border-radius: 10vh;
        display: inline-block;
        font-weight: bold;
        padding: calc(var(--spacing) / 1) calc(4 * var(--spacing));
        background-color: hsl(from var(--button-tint) h s l/10%);
    }

    .link-button, .link-button:active, .link-button:hover, .link-button:visited {
        color: var(--button-tint);
        text-decoration: none;
    }

    .link-button:hover {
        background-color: hsl(from var(--button-tint) h s l/20%);
    }

    p:not(.error-contact) {
        font-size: 1.2em;
    }
}

.success {
    --button-tint: var(--light-font-color);
    --tint-color: var(--sg-green-color);
}

.not-found, .error {
    --tint-color: var(--sg-red-color);
    --button-tint: var(--sg-red-color);
}

.forbidden {
    --tint-color: var(--sg-yellow-color);
    --button-tint: var(--sg-yellow-color);
}

.forbidden .logo-container img {
    filter: blur(5px);
}

.submit-container {
    text-align: center;
}

.form-container {
    width: 100%;
}

form button[type="submit"] {
    --bs-btn-hover-bg: var(--sg-dark-green);
    --bs-btn-hover-color: var(--sg-light-green);

    --bs-btn-bg: var(--sg-light-green);
    --bs-btn-color: var(--sg-dark-green);
    border: none;

    padding-left: calc(2 * var(--spacing));
    padding-right: calc(2 * var(--spacing));
    width: 100%;
}

.form-field {
    --bs-secondary-color: var(--light-font-color);
    margin-bottom: var(--spacing);
}

@media (width < 650px) {
    .main-container {
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }
}

@media (width >= 650px) {
    .content {
        max-width: 650px;
    }
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottom-links {
    text-align: center;
    margin-top: calc(10 * var(--spacing));
    display: flex;
    gap: var(--spacing);
    align-items: center;
    justify-content: center;

    a, a:active, a:hover, a:visited {
        color: var(--text-color);
        text-decoration: none;
    }
}

h1 {
    margin-bottom: calc(4 * var(--spacing));
}