:root {
    --logo-dark: url("camera-slash-light.svg");
    --logo: url("camera-slash-dark.svg");
}

body {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    min-height: 100vh;
    padding: 30px;
    margin: 0;
}

h1 {
    font-size: 2em;
    margin-bottom: 10px;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0 !important;
}

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

#retry {
    margin: 20px 0;
}

h2 {
    margin-bottom: 10px;
}

td, th {
    text-align: center;
}

table {
    max-width: 700px;
}

a[role=button] {
    border-radius: 40px;
}

p {
    text-align: center;
    margin-bottom: 0;
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
        --logo: var(--logo-dark);
    }
}

[data-theme="dark"] {
    --logo: var(--logo-dark);
}

#site-title {
    font-size: 0;
    width: 100px;
    height: 100px;
}

#site-title:before {
    content: var(--logo);
}

body[aria-busy='true'] * {
    display: none;
}