.dark-mode-toggle button {
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 36px;
  cursor: pointer;
  padding: 10px;
}

.dark-mode-toggle button:hover {
  color: var(--destaque);
}

.box {
  padding: 20px;
  backdrop-filter: blur(10px) saturate(180%);
  border-radius: 8px;
  color: var(--text-color);
  background: var(--box-bg);
  box-shadow: 25px 25px 25px rgba(0, 0, 0, 0.66);
  transition: scale 0.5s ease-in-out;
}

.box:hover {
  scale: 1.05;
}

.boxcolor {
  padding: 20px;
  backdrop-filter: blur(10px) saturate(180%);
  border-radius: 8px;
  color: var(--text-color);
  background-image: linear-gradient(45deg, #ff5e00, #ff8b07);
  box-shadow: inset 5px 5px 25px rgba(0, 0, 0, 0.66);
  transition: scale 0.5s ease-in-out;
}

.primario {
  width: 300px;
  display: flex;
}

.secundario {
  padding: 15px;
}


.terceiro {

background: rgba(10, 10, 10, 0.719);
  padding: 15px;
}