@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

body {
  font-family: "Open Sans", sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.canvas-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* Espaçamento entre o canvas e as instruções */
}

#canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

#canvas {
  border: 2px solid #296390;
  width: 450px;
  height: 370px;
}

.instructions {
  text-align: center;
}

.buttons {
  display: flex;
  gap: 2em;
  /* Espaçamento entre os botões */
  margin-top: 20px;
  /* Espaço entre os botões e a área do canvas */
}

.botaoCanvasLimpar,
.botaoCanvasSalvar {
  background: #296390;
  border-radius: 5px;
  color: white;
  border: none;
  padding: 0.3em 0.6em;
  font-weight: 400;
  font-size: 22px;
  cursor: pointer;
}