:root {
    --cor-primaria: #3498db;
    --cor-secundaria: #2ecc71;
    --cor-terciaria: #f1c40f;
    --cor-quartenaria: #e74c3c;
    --cor-cinza-claro: #ecf0f1;
    --cor-cinza-escuro: #34495e;
    --cor-branco: #ffffff;
    --cor-preto: #222222;
}

body {
  background-color: var(--cor-cinza-claro);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: "Inter", sans-serif;
}

header {
  background-color: var(--cor-cinza-escuro);
  padding: 20px;
}

h1 {
  text-align: center;
  color: white;
}

.container {
  border: 1px dashed darkgray;
  width: 80%;
  margin: auto;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

hr {
  width: 90%;
}

.box {
  background-color: var(--cor-quartenaria);
  height: 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border: 10px solid black;
}

.border {
  box-sizing: border-box;
  background-color: var(--cor-terciaria);
}