* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}

body {
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;

    background-color: #B12625;

    width: 90vw;
    margin: 0 auto;
    max-width: 50rem;
    min-height: 100vh;

    display: grid;
    place-content: center;
    align-items: center;
}

main {
    display: grid;
    gap: 2.5rem;
    padding: 2rem;
    width: 40vw;
    max-width: 75rem;
}

button {
    background-color: white;
    padding: 1rem;
    width: 40%;
    margin: 0 auto;
    box-shadow:
        .25rem .25rem .125rem #FBDB68;
    color: black;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 250ms ease;
    border-radius: 2rem;
    border: #FBDB68 2px solid;
}

button:hover {
    font-weight: 600;
    background-color: #FBDB68;
    color: white;
    box-shadow:
        .25rem .25rem .125rem #4916163f;
}

/* button:active {
    background: transparent !important;
    box-shadow: 0.25rem .25rem 0 #FBDB68;
} */

#lap {
    display: none;
}

.bottom-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.timer-display {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 1.25rem;
    align-items: center;
}

.colon {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-unit {
    background: white;
    border: 3px solid #FBDB68;
    border-radius: .75rem;
    padding: 2rem 1.5rem;
    display: grid;
    place-content: center;
}

.time-unit div {
    font-size: 2.5rem;
    font-weight: 700;
    color: black;
    width: 3.5rem;
}

.time-label {
    width: 33% !important;
    font-size: .75rem !important;
    position: relative;
    left: -.75rem;
    top: -1.25rem;
}

.hint {
    text-align: center;
    color: white;
    font-size: 0.8rem;
}

.key {
    border: rgb(69, 69, 69) .125rem solid;
    border-radius: .25rem;
    padding: .375rem;
    margin: 0 .125rem;
    box-shadow: 0 0.125rem .125rem rgb(69, 69, 69);
    color: rgb(225, 225, 225);
}

.lapList {
    list-style: none;
    border-radius: .5rem;
    padding: 1.25rem;
    max-height: 12.5rem;
    overflow-y: auto;
    display: none;
}

.lapList.show {
    display: block;
}

.lapList li {
    padding: .5rem;
    border-bottom: 1px solid #FBDB68;
    font-size: 1.125rem;
}

.lapList li:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    body {
        width: 95vw;
        margin: 0 auto;
    }

    main {
        width: 100%;
        max-width: none;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "timer"
            "hint"
            "bottom"
            "laps"
            "top";
        margin: 0;
        padding: 1rem;
    }

    .top-controls {
        grid-area: top;
        grid-template-columns: 1fr;
    }

    .timer-display {
        grid-area: timer;
        color: white;
    }

    .hint {
        grid-area: hint;
        display: none;
    }

    .bottom-controls {
        grid-area: bottom;
        grid-template-columns: 1fr;
    }

    .lapList {
        grid-area: laps;
    }

    .time-unit {
        padding: 1rem 0.5rem;
    }

    .time-unit div {
        font-size: 1.5rem;
        font-weight: 700;
        color: black;
    }

    .time-label {
        font-size: 0.6rem !important;
        font-weight: 400 !important;
        position: relative;
        left: 0;
        top: -.25rem;
    }

    .timer-display {
        gap: 0.5rem;
        justify-content: center;
    }

    .colon {
        font-size: 1.5rem;
    }
}

@media (min-width: 769px) {
    .hint {
        display: block;
    }
}

footer {
    text-align: center;
    color: white;
    font-weight: 500;
    line-height: 3;
    max-width: 75vw;
    margin: 0 auto;
}

footer a {
    display: inline;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: inline;
    color: white;
    text-decoration: none;
    border: #FBDB68 1px solid;
    box-shadow: 0 .125rem .125rem #FBDB68;
    border-radius: .25rem;
    padding: .5rem;
}

footer a:hover {
    background-color: #FBDB68;
    box-shadow:
        .25rem .25rem .125rem #4916163f;
    font-weight: 600;
    transition: all 250ms ease;
}

footer a img {
    width: .875rem;
    height: auto;
    margin-right: .5rem;
    border-radius: 50%;
}