:root {
    color-scheme: light dark;
    /* --light-fg1: #353535;
    --light-fg2: #242424;
    --light-bg1: #e9e9e9;
    --light-bg1-grad: #d8d8d8;
    --light-bg2: #c7c7c7; */
    --dark-fg1: #00eff7;
    --dark-fg2: #f49dee;
    --dark-fg3: #ededed;
    --dark-bg1: #05001e;
    --dark-bg1-grad: #0a0046;
    --dark-bg2: #222222;
    --light-fg1: var(--dark-fg1);
    --light-fg2: var(--dark-fg2);
    --light-fg3: var(--dark-fg3);
    --light-bg1: var(--dark-bg1);
    --light-bg1-grad: var(--dark-bg1-grad);
    --light-bg2: var(--dark-bg2);
    --fg1: light-dark(var(--light-fg1), var(--dark-fg1));
    --fg2: light-dark(var(--light-fg2), var(--dark-fg2));
    --fg3: light-dark(var(--light-fg3), var(--dark-fg3));
    --bg1: light-dark(var(--light-bg1), var(--dark-bg1));
    --bg2: light-dark(var(--light-bg2), var(--dark-bg2));
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

body {
    font-family: 'Courier New', Courier, monospace;
    color: var(--fg1);
    background: var(--bg1);
}

@keyframes darkanim {}

body {
    background-image: linear-gradient(170deg, var(--dark-bg1), var(--dark-bg1-grad), var(--dark-bg1));
    background-size: 100vw 100vh;
    animation: darkanim 3s;
}



body.light {
    color-scheme: light;
}

body.dark {
    color-scheme: dark;
}

* {
    transition-duration: 500ms;
}

.container.center {
    margin: auto;
    width: 100%;
    max-width: 700px;
}

#title-box {
    background-color: var(--bg2);
}

#site-title {
    display: block;
    margin: 0px;
    text-align: center;
}

#site-slogan {
    display: block;
    margin: 0;
    text-align: center;
}

.pill {
    border-radius: 999px;
    border-color: var(--fg1);
    border: 1px solid;
    background-color: var(--bg1);
    width: fit-content;
    padding: 1rem 2rem;
    margin: 0 auto 1rem auto;
}

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

.pill.disabled {
    opacity: 70%;
    cursor: default;
}

a.pill {
    display: block;
    cursor: pointer;
    border-color: var(--fg1);
    color: var(--fg3);
}

a.pill {
    text-decoration: none;
}

a.pill:hover:not(.disabled) {
    background-color: var(--bg2);
    transition-duration: 100ms;
    text-decoration: underline;
}

.pill.little {
    padding: .5rem 2rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.t-secondary {
    color: var(--fg2);
}