/* Palette */

:root {
    --theme: #2196f3;
    --theme-accent: #424242;
    --theme-dark: #1976d2;
}

/* Resets */

/* Resets */

a, a:active, a:focus, a:hover, a:visited { text-decoration:none; }

html, body, div, form, h1, h2, h3, h4, h5, h6, a, p, li, button {
    margin: 0;
    padding: 0;
}

/* Font selectors */

a, button, li, h1, h2, h3, h4, h5, h6, input, label, p, span {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: inherit;
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
    font-weight: 400;
    line-height: 1.2em;
}

a, button, li, input, label, p, span { font-size: 1em; }

a {
    color: var(--theme);
    text-decoration: underline;
}

a:hover {
    color: var(--theme);
    text-decoration: underline;
}

h1 {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
}

p { color: #727272; }

/* Element selectors */

* {
    color: #444;
    position: relative;
}

body { background-color: white; }

canvas { display: block; }

header {
    background-color: #022b36;
    clip-path: inset(0 0 0 0);
}

html {
    background-color: #022b36;
    height: 100%;
    width: 100%;
}

img { user-select: none; }

main {
    background-color: white;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.14), 0 0 20px rgba(0, 0, 0, 0.26);
}

/* Class selectors */

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

.button, .button:focus:not(:active) {
    background-color: var(--theme);
    border-radius: 2px;
    color: white;
    display: inline-block;
    font-weight: 500;
    padding: 14px;
    text-decoration: none;
    transition: all .2s ease-in-out;
}

.button:active {
    background-color: var(--theme-dark);
    color: white;
    text-decoration: none;
}

.button:hover:not(:active) {
    background-color: var(--theme-dark);
    color: white;
    text-decoration: none;
}

.button-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
}

.center-self {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.fill {
    height: 100%;
    width: 100%;
}

.portrait {
    border-radius: 50%;
    max-width: 256px;
}

.pt-4 { padding-top: 32px; }

.shadow { box-shadow: 0 0 25px rgba(0, 0, 0, 0.14), 0 0 20px rgba(0, 0, 0, 0.26); }

.shadow-text { text-shadow: 0 0 25px rgba(0, 0, 0, 0.28), 0 0 20px rgba(0, 0, 0, 0.52); }

.title {
    color: white;
    font-size: 72px;
    font-weight: 500;
}

/* Keyframes */

/* Vertical @Media */

@media only screen and (max-height: 575px) {
    header .portrait { display: none; }
}

@media only screen and (max-height: 767px) {
    header .portrait { max-width: 192px; }

    .title { font-size: 48px; }
}

/* Horizontal @Media */

@media (max-width: 320px) {
    .title { font-size: 42px; }
}

@media only screen and (max-width: 575px) {
    .button {
        text-align: center;
        width: calc(100% - 28px);
    }

    .portrait { max-width: 192px; }
}

@media only screen and (max-width: 767px) {
    .title { font-size: 48px; }
}