@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Regular.ttf');
    src: url('fonts/Lato-Regular.ttf') format('truetype');
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100vw;
    height: 100vh;
}

main {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 1fr;

    background: #0002;
}

main > header {
    display: grid;
    grid-row: 1;
    grid-column: 1/3;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    padding: 8vh 4vh;

    font-size: 2vw;
}

main > header > aside {
    display: grid;
    grid-column: 2;
    grid-auto-flow: column;
    grid-template-columns: auto 5em;
    gap: 2rem;
    place-items: center start;
}

#clock {
    display: grid;
    grid-auto-flow: column;
    font-family: Lato;
    justify-self: stretch;
}

#clock[suffix]::after {
    content: attr(suffix);
    justify-self: end;
}

.btn {
    display: grid;
    place-content: center;
    place-items: center;
    position: relative;

    padding: 2.2rem;
    margin: -.4rem;

    border-radius: 100vw;
    width: 0;
    height: 0;

    border: none;
    background: none;

    color: #000;

    font: unset;
}
.btn:focus {
    outline: none;
}
.btn::after {
    content: "";
    position: absolute;

    padding: 0rem;

    border-radius: 100vw;
    width: 0;
    height: 0;

    backdrop-filter: invert(1);
    
    transition: padding .2s;
}
.btn:focus::after {
    padding: 2.2rem;
}