/* sora-latin-wght-normal */
/* from fontsource.org */
@font-face {
  font-family: 'Sora Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/sora:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

#background {
    width: 100vw; /* 100% of viewport width */
    height: 100vh; /* 100% of viewport height */
    background-position: center;
    background-size: cover;
    text-align: right;
    display: flow-root;
}

html, body, p {
    margin: 0;
    padding: 0;
    /* Ensures that entire screen is used */
}

p { /* Extra stuff for p */
    color: #fff;
    font-weight: bold;
    font-family: 'Sora Variable', sans-serif;
}

#time {
    font-size: 15vh;
    margin: 1vw;
}

#weather {
    font-size: 5vh;
    margin: 1vw;
}

.gloss { /* bro the liquid ̷g̷lass */
    background: rgba(255,255,255,0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.1); /* black but 10% */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.3);
    display: inline-block;
    margin: 5vw;
}