* {
    box-sizing: border-box;
}

:root {
    --col-bg: #15152c; 
    --col-accent: #75202b;

    --near-circ-ease: cubic-bezier(0,1.11,.5,1);
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;

    /* background: var(--col-bg); */
    background: radial-gradient(circle at center, var(--col-bg), #0a0717);
    color: #fff;

    font-family: "Atkinson Hyperlegible", Overpass, sans-serif;
}

button {
    background: var(--col-accent);
    font: inherit;
    color: #fff;

    cursor: pointer;

    --border-width: 2px;

    border: var(--border-width) solid #ffffff7f;
    /* box-shadow: 2px 2px #fff; */
    border-radius: 5px;

    transition: filter .2s var(--circ-ease);
}

button:hover {
    filter: brightness(1.5);
}

button:active {
    filter: brightness(0.8);
}

.post h2 {
    margin-top: 0.25em;
    margin-bottom: 0;
    font-size: 2.5em;
}

.post h1 {
    font-size: 3em;
}

hr {
    margin: 2em;
}

.disabled {
    pointer-events: none;
    opacity: 0.3;
}


main > .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-indicator.loading {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: 4px solid;
    border-color: #ffffff7f #ffffff7f #0000 #0000;
    animation: rotate 1s infinite linear;
}



@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}