@font-face {
    font-family: "JustSquare";
    src: url("/static/fonts/JustSquareNickname.ttf") format("truetype");
}

:root {
    --site-color: 58, 71, 176;
}

html,
body {
    margin: 0;
    width: 100%;
    font-family: "JustSquare";
    color: white;
    font-size: 1.25rem;
}

.background {
    z-index: -999;
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    background: no-repeat center center;
    background-size: cover;
}

.background_image {
    background-image: url("../img/backgrounds/Loading_Assault2.png");
}

.background_gradient {
    z-index: -998;
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 80%,
        rgba(var(--site-color), 0.5) 100%
    );
}

nav {
    height: 68px;
    border: 2px solid rgb(var(--site-color));
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0),
        rgba(var(--site-color), 0.25)
    );
    display: flex;
}

nav img {
    height: 100%;
}

.buttons {
    display: flex;
    align-items: center;
    flex-grow: 1;
    margin-right: 4px;
}

nav .buttons {
    justify-content: right;
}

.secondary_nav .buttons {
    align-items: center;
    justify-content: center;
}

.button_holder {
    position: relative;
    margin: 0 4px 0 4px;
    display: flex;
    background-color: rgb(var(--site-color));
}

.buttons a {
    border-image: url("../img/buttons/btn_white.png") 7 fill;
    border-image-width: 7px;
    display: block;
    width: 60px;
    height: 60px;
    mix-blend-mode: multiply;
}

.secondary_nav .buttons a {
    width: 180px;
}

.secondary_nav .button_holder span {
    position: absolute;
    inset: 0;
    pointer-events: none;
    top: 53%;
    text-align: center;
    transform: translate(0%, -50%);

    text-shadow:
        -2px -2px 0 black,
        2px -2px 0 black,
        -2px 2px 0 black,
        2px 2px 0 black;
}

.logo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.youtube {
    background: url("../img/logos/youtube.png") center / contain no-repeat;
    width: 50px;
    height: 50px;
}

.discord {
    background: url("../img/logos/Discord.png") center / contain no-repeat;
    width: 30px;
    height: 30px;
}

.highlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    left: 50%;
    top: 2px;
    transform: translate(-50%, 0%);
    border-image: url("../img/buttons/WhiteBtnButtonHighlight.png") 6 fill;
    border-image-repeat: no-repeat;
    border-image-width: 6px;
    width: 56px;
    height: 12px;
}

.secondary_nav .highlight,
.downloads .highlight {
    width: calc(100% - 4px);
}

h2 {
    text-align: center;

    text-shadow:
        -2px -2px 0 black,
        2px -2px 0 black,
        -2px 2px 0 black,
        2px 2px 0 black;
}

.separator {
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgb(var(--site-color)) 30%,
        rgb(var(--site-color)) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    width: 512px;
    height: 4px;
    margin: auto;
}

p {
    text-align: center;

    text-shadow:
        -2px -2px 0 black,
        2px -2px 0 black,
        -2px 2px 0 black,
        2px 2px 0 black;
}

.downloads .buttons {
    flex-direction: column;
}

.downloads .buttons .button_holder {
    margin: 1rem 0 1rem 0;
}

.downloads .buttons span {
    text-align: left;
}

.downloads .buttons span:not(.contents .info span) {
    margin-left: 1rem;
}

.downloads .buttons a {
    width: 400px;
    height: 86px;
}

.contents {
    display: flex;
    position: absolute;
    inset: 0;
    pointer-events: none;
    justify-content: center;
}

.contents span {
    height: 1.25rem;
    text-shadow:
        -2px -2px 0 black,
        2px -2px 0 black,
        -2px 2px 0 black,
        2px 2px 0 black;
}

.contents .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.css_is_weird {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.css_is_weird img {
    image-rendering: pixelated;
    width: 56px;
    height: 50px;
}

.css_is_weird.text {
    flex-grow: 1;
}

.css_is_weird.image {
    flex-grow: 0;
    margin-right: 1rem;
}

.contents .info span {
    text-align: right;
    margin-right: 1rem;
}