@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background:         #faf4ed;
    min-height:         100vh;
    display:            flex;
    justify-content:    center;
    align-items:        center;
    font-family:        "Nunito", sans-serif;
    font-weight:        bold;
}

.box {
    background:         #fffaf3;
    padding:            3rem 4rem;
    border:             0.4mm #d7827e dashed;
    border-radius:      20px;
    text-align:         center;
    min-width:          320px;
}

.timer {
    font-size:              5rem;
    font-weight:            300;
    letter-spacing:         4px;
    color:                  #575279;
    font-variant-numeric:   tabular-nums;
    margin-bottom:          1.5rem;
}

.controls {
    display:            flex;
    gap:                1rem;
    justify-content:    center;
    margin-bottom:      1.5rem;
}

button {
    background:         none;
    border:             1.5px solid #e0d9cf;
    color:              #575279;
    font-size:          1.6rem;
    width:              56px;
    border-radius:      10px;
    height:             56px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(250, 244, 237, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

button:hover {
    background: #f0ebe3;
    border-color: #d7ccc0;
    transform: scale(1.03);
}

button:active {
    transform: scale(0.94);
}

.status {
    font-size: 0.85rem;
    text-transform: lowercase;
    letter-spacing: 3px;
    color: #9893a5;
    padding: 0.4rem 1.2rem;
    border-radius: 40px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(240, 235, 227, 0.4);
    border: 1px solid transparent;
    user-select: none;
}

.status:hover {
    background: #f0ebe3;
    border-color: #e0d9cf;
    color: #575279;
}

.status:active {
    transform: scale(0.95);
}