* {
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}

body, html {
    padding: 0px;
    margin: 0px;
}

#title {
    font-size: 4em;
    z-index: 3;
    position: relative;
}

#counter-list {
    list-style: none;
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow: scroll;
    z-index: 1;
    margin: 0px;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}

#counter-list * {
    scroll-snap-align: center;
}

.counter {
    background-color: white;
    border: 0px solid white;
    z-index: 0;
    margin-bottom: 1em;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0;
    transition: box-shadow 0.5s, scale 0.2s, opacity 0.2s;
    font-size: 3em;
    scale: 1;
    margin-left: 10%;
    margin-right: 10%;
    opacity: 0.5;
    cursor: pointer;
}

.counter.selected {
    scale: 1.1;
    opacity: 1;
    pointer-events: all;
}

.counter.selected:hover {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.counter.selected:active{
    scale: 0.9;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.counter-number {
    background-color: black;
    color: white;
    padding: 8px;
    border-radius: 16px;
}

.counter-number.changing {
    transform: translateY(-100px);
    transition: transform 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#gradient-overlay {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 2;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0) 47%, rgba(255,255,255,0) 53%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,1) 100%); 
    pointer-events: none;
}

@keyframes popup-face {
    from {
        top: 100vh;
        opacity: 100%;
    }
    to {
        top: 25vh;
        opacity: 0%;
    }
}

.popup-face {
    position: absolute;
    animation-name: popup-face;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(.17,.67,.83,.67);
    z-index: 4;
    width: 2em;
    border-radius: 0.2em;
}

main {
    padding: 16px;
}