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

html {
    scrollbar-color: rgba(175, 175, 175, .5) #1d1d1d;
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

body {
    margin: 0;
    padding: 0;
    color: #fff;
}

#main {
    margin-bottom: 8rem;
}
.name {
    margin: 0;
    font-size: 2.5rem;
}
.date {
    margin: 0;
    font-size: 1.5rem;
}

/* Timer */
.timer {
    display: flex;
    flex-direction: row;
    background: rgba(0,0,0,0.2);
    margin: .5rem;
}
.timer div {
    margin: 2rem;
}
.timer h1 {
    margin: 0;
    font-size: 8rem;
}
#days, #hours, #minutes, #seconds {
    width: 2ch;
}
.timer h3 {
    margin: 0;
    text-transform: uppercase;
    font-size: 2rem;
}

/* Status */
#status {
    font: bold 1.5rem sans-serif;
    padding: .125rem .5rem;
    border-radius: 5rem;
}
#status[data-status='Go'] {background-color: limegreen}
#status[data-status='TBC'] {background-color: gold}
#status[data-status='TBD'] {background-color: darkorange}
#status[data-status='Success'] {background-color: limegreen}
#status[data-status='Failure'] {background-color: red}
#status[data-status='Hold'] {background-color: darkorange}
#status[data-status='In Flight'] {background-color: royalblue}
#status[data-status='Partial Failure'] {background-color: magenta}

#probability {
    font-size: 1.5rem;
    margin: 0 .5rem;
}

/* Cover */
.cover {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cover img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    filter: brightness(0.9);
    color: transparent;
}
@media (max-width: 1025px) {
    #main {
        margin-bottom: 12vw;
    }
    .name {
        font-size: 3.75vw;
    }
    .date {
        font-size: 2.25vw;
    }
    .timer {
        margin: .75vw;
    }
    .timer div {
        margin: 3vw;
    }
    .timer h1 {
        font-size: 12vw;
    }
    .timer h3 {
        font-size: 3vw;
    }
}
@media (prefers-color-scheme: dark) {
    body {background: #222;}
}