@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');

.center {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
    animation: blurIn 500ms ease-in-out;
}

.content {
    will-change: transform;
    animation: blurIn 500ms ease-in-out;
}

@media (prefers-color-scheme: dark) {
    body {
        animation: fadeIn 500ms ease-in-out;
        background-color: black;
        color: white;
        margin: 1em auto;
        padding: 1em;
        max-width: 50em;
    }
    .button {
        display:inline-block;
        padding:10px 24px;
        margin:2px;
        border-radius:24px;
        background-color:#1b1b1b;
        color:#ffffff;
        text-decoration:none;
        font-size:16px;
        margin-bottom:16px;
        box-shadow:inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
        transition: 0.3s ease-out;
    }

    .button-white {
        background-color:#ffffff;
        color:#000000
    }

    .button:hover {
        background-color:#ffffff;
        color:#000000;
    }
    .link {
        color: #ffffff;
        background-color: #1b1b1b;
        font-size: 0.9em;
        text-decoration: none;
        border-radius: 6px;
        padding: 0.2em 0.7em;
        transition: 0.2s;
    }

    .link-large {
        margin-bottom:16px;
        padding:10px 24px;
        margin:2px;
        border-radius: 30px
    }

    .link:hover {
        color: #000000;
        background-color: #ffffff;
    }
}

@media (prefers-color-scheme: light) {
    body {
        animation: fadeIn 500ms ease-in-out;
        background-color: white;
        color: black;
        margin: 1em auto;
        padding: 1em;
        max-width: 50em;
    }
    .button {
        display:inline-block;
        padding:10px 24px;
        margin:2px;
        border-radius:24px;
        background-color: #ebebeb;
        color: black;
        text-decoration:none;
        font-size:16px;
        margin-bottom:16px;
        box-shadow:inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
        transition: 0.3s ease-out;
    }

    .button-white {
        background-color: black;
        color: white
    }

    .button:hover {
        background-color: black;
        color: white;
    }
    .link {
        color: black;
        background-color: #ebebeb;
        font-size: 0.9em;
        text-decoration: none;
        border-radius: 6px;
        padding: 0.2em 0.7em;
        transition: 0.2s;
    }

    .link-large {
        margin-bottom:16px;
        padding:10px 24px;
        margin:2px;
        border-radius: 30px
    }

    .link:hover {
        color: white;
        background-color: black;
    }
}

h1, h2, h3 {
    font-family: "Atkinson Hyperlegible Mono", monospace;
    font-weight: 600
}

small {
    font-weight: 200
}

* {
    font-family: "Atkinson Hyperlegible Next", sans-serif;
    font-weight: 400
}

b {
    font-weight: 600 !important;
}

hr.less-important {
    border-top: 1px dotted;
}

@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@keyframes blurIn {
    from {
        filter: blur(0.2rem);
    }
    to {
        filter: blur(0rem);
    }
}