@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&family=Work+Sans:wght@600&display=swap');

:root {
    --red: white;
    --red-transparent: #00000034;
    --dark-red: black;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
}
.time {
    font-size: calc(10*2.3vw);
    margin: calc(1*2.3vw);
    color: var(--dark-red);
    text-shadow: 1vw 1vw var(--red-transparent);
}
.controls {
    display: flex;
    justify-content: center;
    align-items: center;
}
.start {
    margin-right: calc(1*2.3vw);
    font-size: calc(2*2.3vw);
    outline: none;
    border: none;
    color: var(--red);
    font-weight: 800;
    border-radius: 8%;
    padding: calc(1*2.3vw) calc(3*2.3vw);
    background-color: var(--dark-red);
    transition: all 200ms ease;
    cursor: pointer;
}
.start:hover {
    transform: scale(1.1);
    transition: transform 400ms ease-out;
}
.restart {
    cursor: pointer;
    height: calc(6*2.3vw);
    width: calc(6*2.3vw);
}
.restart:hover {
    transform: rotate(360deg) scale(1.1);
    transition: transform 500ms;
}