:root {
    color-scheme: light dark;
}

body {
    height: 100vh;
    margin: 0;
    color: #efefec;
    color: light-dark(#333b3c, #efefec);
    background-color: #20242f;
    background-color: light-dark(#dbe4f0, #20242f);

    display: grid;
    grid-template-rows: auto 1fr auto;
}

header {
    background-color: #2d3954;
    background-color: light-dark(#f0f4f8, #2d3954);
    color: #efefec;
    color: light-dark(#333b3c, #efefec);
    padding: 15px;
    position: sticky;
    top: 0;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    h1 {
        margin: 0;
        font-size: 1.5rem;
    }
}

.container {
    overflow-y: auto;
    padding: 1rem;
}

main {
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
}

.btn {
    padding: .25rem .75rem;
    border-radius: 5px;

    background-color: #9eabcf;
    background-color: light-dark(#dbe4f0, #9eabcf);
    color: #efefec;
    color: light-dark(#253d46, #253d46);
    text-decoration: none;

    &:hover {
        background-color: #7a8bbf;
        background-color: light-dark(#c0d0e0, #7a8bbf);
    }
}