@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@600&display=swap');

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Chivo Mono';
}

.counter {
    font-size: 12rem;
    height: 50vh;
    width: 100%;
    position: relative;
}

.center {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 1rem;
    transition:all 0.2s;
}

.center > * {
    flex-grow:1;
    transition:all 0.2s;
}

.round {
    border-radius: 5rem;
    border: 0px solid black;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14) 
}

.timer, .reset {
    background-color: white;
    font-size: 10vw;
    text-align: center;
    box-shadow: black 1rem;
}

.timer {
    padding: 1rem 3rem;
}

.reset {
    padding: 1rem;
}

.pass {
    background-color: palegreen;
}

.fail {
    background-color: palevioletred;
}

.text-fade {
    color: grey
}

button:active {
    filter: brightness(85%);
}