/* Reset */
html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* Fonts */
@font-face {
    font-family: Neutralface;
    src: url("/NeutralFace.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Neutralface;
    src: url("/NeutralFace-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Utils */
.show-on-parent-hover {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

*:hover > .show-on-parent-hover {
    opacity: 1;
}

@media (width <= 600px) {
    .desktop {
        display: none;
    }
}

@media (width > 600px) {
    .mobile {
        display: none;
    }
}

@media (hover: none) {
    .show-if-hover-none {
        opacity: 1;
    }
}

/* Colors */
body {
    --red: #bd0000;
    --offwhite: #e6e6e8;
    --navy: #1e2344;
    background-color: var(--navy);
    color: var(--offwhite);
    font-family: Neutralface, sans-serif;
}

a {
    color: var(--offwhite);
    font-weight: bold;
    text-decoration: none;
}

a:visited {
    color: var(--offwhite);
}

input {
    color: var(--navy);
}