@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap");
@import url("./login.css");
@import url("./nav.css");
@import url("./header.css");
@import url("./main.css");
@import url("./table.css");
@import url("./paginacao.css");
@import url("./form.css");
@import url("./dash.css");
@import url("./dashtv.css");

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

:root {
  --dourado: #f1b434;
  --douradoHover: #f1c159;
  --cinza: #707372;
  --branco: #ffffff;
  --cinzaEscuro: #282a36;
  --cinzaMedio: #9093ad;
  --fundo: #e7e7e7;
}

body {
  background-color: var(--fundo);
  font-family: "Roboto", sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.alert {
  background-color: lightcoral;
  padding: 4px;
  color: white;
  border-radius: 4px;
  text-align: center;
}

.sucesso {
  background-color: lightgreen;
  padding: 4px;
  color: var(--cinzaEscuro);
  border-radius: 4px;
  text-align: center;
}

/* 
320px — 480px: dispositivos móveis
481px — 768px: iPads, tablets
769px — 1024px: telas pequenas, laptops
1025px — 1200px: desktops, telas grandes
1201px e acima —  telas muito grandes, TVs
*/

/* @media screen and (min-width: 768px) {
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1200px) {
} */