*{
    margin: 0;
    padding: 0;
}

:root {
    --color-base: #111111;
    --color-base-inverse: #eeeeee;
    --color-base-variant: #222222;
    --color-text: #ffffff;
    --color-text-inverse: #111111;
    --color-theme-accent: #669900;
    --color-theme-overlay: #ffffff33;
    --color-theme-primary: #333333;
    --color-theme-secondary: #555555;
}

:has(#mode-switch:checked) {
    --color-base: #ffffff;
    --color-base-inverse: #222222;
    --color-base-variant: #eeeeee;
    --color-text: #111111;
    --color-text-inverse: #ffffff;
    --color-theme-accent: #99cc00;
    --color-theme-overlay: #00000033;
    --color-theme-primary: #333333;
    --color-theme-secondary: #cccccc;
}

html {
    font-family: "Roboto", Helvetica, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

a {
    display: block;
    text-align: center;
}

body {
    background-color: var(--color-base);
    color: var(--color-text);
    min-height: 100vh;
    transition: background 0.3s ease-in-out;
}

button {
    background-color: var(--color-theme-primary);
    border-radius: 4px;
    border: none;
    color: white;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    padding: .8em 2em;
    text-transform: uppercase;
}

button.link {
    background-color: var(--color-theme-accent);
    border-radius: 50%;
    box-shadow: rgb(10, 10, 10, 1) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px;
    height: 48px;
    padding: 0;
    width: 48px;
    transition: background 0.3s ease-in-out;
}

button.link:hover {
    background-color: var(--color-theme-overlay);
}

button.link svg {
    fill: var(--color-text-inverse);
    transition: fill 0.3s ease-in-out;
}

button.link:hover svg {
    fill: var(--color-text);
    transition: fill 0.3s ease-in-out;
}

div.horizontal {
    display: block;
}

div.vertical {
    display: none;
}

header, section {
    padding: 64px min(48px, 10%);
}

img {
    border-radius: 50%;
    height: 192px;
    width: 192px;
}

img.error-title {
    border-radius: 50%;
    filter: grayscale(100%);
    height: 400px;
    width: 400px;
    transition: height 0.3s ease-in-out, width 0.3s ease-in-out;
}

p {
    margin: 8px 0 16px 0;
    color: var(--color-theme-secondary);
}

section {
    background-color: var(--color-base-variant);
}

span.error-all {
    white-space: nowrap;
}

span.error-subtitle {
    font-size: 128px;
    font-weight: lighter;
    opacity: 30%;
    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

span.error-title {
    font-size: 512px;
    font-weight: bolder;
    opacity: 30%;
    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

span.first {
    font-size: 96px;
    font-weight: bolder;
    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

span.last {
    font-size: 96px;
    font-weight: lighter;
    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

span.padding {
    font-size: 96px;
    font-weight: normal;
}

table, th, td {
    border: none;
    border-collapse: collapse;
    transition: display 0.3s ease-in-out;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-text {
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.space {
    height: 16px;
    width: 16px;
}

.switch {
    align-items: center;
    background: var(--color-theme-accent);
    border-radius: 32px;
    cursor: pointer;
    display: inline-block;
    height: 32px;
    position: fixed;
    right: 32px;
    top: 32px;
    transition: background 0.3s ease-in-out;
    width: 56px;
}

.switch:hover {
    background: var(--color-theme-secondary);
    transition: background 0.3s ease-in-out;
}

.switch-icon {
    fill: var(--color-text);
    height: 16px;
    left: 8px;
    position: absolute;
    transition: fill 0.3s ease, transform 0.2s ease-in-out;
    top: 8px;
    width: 16px;
}

.switch::before {
    background: var(--color-text-inverse);
    border-radius: 50%;
    box-shadow: rgb(10, 10, 10, 1) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px;
    content: "";
    height: 24px;
    left: 4px;
    position: absolute;
    top: 4px;
    transition: transform 0.2s ease-in-out;
    width: 24px;
}

#mode-switch {
    display: none;
}

#mode-switch:checked + .switch::before {
    transform: translateX(24px);
}

#mode-switch:checked + label svg {
    transform: translateX(24px);
}

:has(#mode-switch:checked) label svg:first-child {
    fill-opacity: 0;
}

:has(#mode-switch:not(:checked)) label svg:last-child {
    fill-opacity: 0;
}

@media screen and (max-width: 1100px) {
    img.error-title {
        height: 200px;
        width: 200px;
    }

    span.error-subtitle {
        font-size: 64px;
    }

    span.error-title {
        font-size: 256px;
    }
}

@media screen and (max-width: 752px) {
    .flex-text {
        align-content: flex-start;
    }
}

@media screen and (max-width: 562px) {
    span.first {
        font-size: 72px;
    }

    span.last {
        font-size: 72px;
    }
}

@media screen and (max-width: 550px) {
    img.error-title {
        height: 150px;
        width: 150px;
    }

    span.error-subtitle {
        font-size: 48px;
    }

    span.error-title {
        font-size: 192px;
    }
}

@media screen and (max-width: 456px) {
    span.first {
        font-size: 96px;
    }

    span.last {
        font-size: 96px;
    }

    span.padding {
        display: none;
    }
}

@media screen and (max-width: 404px) {
    div.horizontal {
        display: none;
    }

    div.vertical {
        display: block;
    }

    img.error-title {
        height: 160px;
        width: 160px;
    }

    span.error-all {
        white-space: wrap;
    }

    span.error-subtitle {
        font-size: 56px;
    }

    span.error-title {
        font-size: 204px;
    }
}