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

body {
font-family: Arial, Helvetica, sans-serif;
background: #f4f1eb;
color: #202020;
min-height: 100vh;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

gap: 35px;
padding: 24px;
}

/* Contador principal */

.countdown-container {
width: min(900px, 100%);
text-align: center;
}

.title {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 700;
color: #202020;
margin-bottom: 32px;
letter-spacing: -0.5px;
}

.countdown {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}

.time-unit {
background: #ffffff;
border: 1px solid #dedbd5;
border-radius: 10px;
padding: 24px 12px 20px;
}

.digit {
display: block;

font-family: "Courier New", monospace;
font-size: clamp(2.3rem, 6vw, 4rem);
font-weight: 700;

color: #1f1f1f;
line-height: 1;

margin-bottom: 12px;
}

.label {
display: block;

font-size: 0.78rem;
font-weight: 700;

color: #77736d;

letter-spacing: 1px;
text-transform: uppercase;
}

/* Totais */

.totals-container {
width: min(900px, 100%);
}

.totals-section {
padding-top: 28px;
border-top: 1px solid #d8d4cc;
}

.totals-title {
text-align: center;

font-size: 1.15rem;
font-weight: 700;

color: #34322f;

margin-bottom: 18px;
}

.totals-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}

.total-unit {
background: #ffffff;
border: 1px solid #dedbd5;
border-radius: 10px;

padding: 18px 12px;

text-align: center;
}

.total-digit {
display: block;

font-family: "Courier New", monospace;
font-size: clamp(1.3rem, 3vw, 2rem);
font-weight: 700;

color: #292929;

margin-bottom: 7px;
}

/* Quando as férias chegarem */

.finished {
background: #ffffff;
border: 1px solid #dedbd5;
border-radius: 10px;

padding: 28px 20px;

font-size: 1.6rem;
font-weight: 700;

color: #287447;
}

/* Rodapé */

.footer {
padding-top: 18px;

border-top: 1px solid #d8d4cc;

color: #77736d;

font-size: 0.85rem;
text-align: center;
}

#author {
color: #34322f;
font-weight: 600;
}

/* Telemóvel */

@media (max-width: 700px) {
body {
gap: 28px;
padding: 18px;
}

.countdown {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.time-unit {
padding: 22px 10px 18px;
}

.totals-grid {
grid-template-columns: 1fr;
gap: 10px;
}

.total-unit {
padding: 15px;
}
}

@media (max-width: 380px) {
.title {
font-size: 1.65rem;
}

.digit {
font-size: 2.2rem;
}

.label {
font-size: 0.7rem;
}
}