@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

:root
{
    --text: #d4d3d3;
    --primary: #0000002a;
    --secondary: #04334e;
}

*
{
    -webkit-user-select: none;
    -moz-user-select: none; 
    user-select: none;
    font-family: 'Inconsolata', monospace;
}

body
{
    text-align: center;
    font-size: 1.5rem;
    background-color: #1f1f1f;
    background: linear-gradient(233deg, #323333fa, #02121bfd);
    margin-top: 1.875rem;
    color: var(--text);
}

body.day
{
    background-color: #1f1f1f;
    background: linear-gradient(233deg, #c9e7e6fa, #707070fd);
    --text: #282929;
}

header
{
    max-width: 37.5rem;
    margin: 0 auto 1.875rem auto;
    padding-right: .625rem;
    text-align: right;
}

header > i
{
    cursor: pointer;
    width: 1.7rem;
    background: transparent;
}

header > i:hover
{
    filter: drop-shadow(0 0 8px #888);
}

main
{
    max-width: 37.5rem;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 1.25rem;
}

main > div
{
    background: var(--primary);
    flex-basis: calc(50% - 1.25rem);
    min-width: 18rem;
    box-sizing: border-box;
    aspect-ratio: 1 / .5;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

footer
{
    margin-top: 1.25rem;
    font-size: 1.2rem;
    filter: brightness(0.6);
}

@media (width < 39rem) 
{
    header
    {
        text-align: center;
        padding-bottom: 1.875rem;
    }
    
    .stopwatch
    {
        border-radius: 20px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.clock .time { font-size: 3rem; }