body {
    background-color: #08c8e7;
    background-image: url("images/pokemon-background.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

:root {
    --green: #ff4b4f;
}

h1,
h2 {
    font-family: inherit;
}

button:not(.danger) {
    color: #10242a;
}

.site-logo {
    display: block;
    width: min(390px, 68vw);
    height: auto;
    object-fit: contain;
}

.shell > header {
    position: relative;
    justify-content: center;
    padding: 8px 0 18px;
}

.shell > header > form {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.shell > header .quiet,
.shell > header .quiet:hover,
.shell > header .quiet:focus {
    background: #ff4b4f;
    border-color: #ff4b4f;
    color: #fff;
    box-shadow: 0 4px 14px rgba(130, 17, 23, 0.28);
}

button.primary-action,
button.primary-action:hover,
button.primary-action:focus {
    color: #fff;
}

button.danger,
button.danger:hover,
button.danger:focus {
    background: #08c8e7;
    color: #fff;
}

.success {
    background: #ffe5e6;
    color: #861e24;
}

.complete-icon {
    background: #ff4b4f;
    color: #311012;
}

.progress-track {
    background: #ffe1e2;
}

.progress-fill {
    background: linear-gradient(90deg, #ff6468 0%, #e9333f 100%);
}

.login form > button {
    display: block;
    min-width: 140px;
    margin: 22px auto 0;
    padding: 12px 28px;
}

@media (max-width: 700px) {
    body {
        background-attachment: scroll;
    }

    .site-logo {
        width: min(330px, 88vw);
    }

    .shell > header {
        flex-direction: column;
        align-items: center;
    }

    .shell > header > form {
        position: static;
        transform: none;
    }
}