/* ---------- [ Root ] ---------- */

:root {
  /* [ Tamanhos para textos ] */
  --paragrafo: clamp(1.5rem, 2.5vw, 2rem);
  --titulo: clamp(2rem, 3vw, 3rem);
  /* [ Espaços ] */
  --margem: clamp(15px, 3vw, 30px);
  --preenchimento: clamp(10px, 2vw, 20px);
  --gap: clamp(15px, 7vw, 25px);
  /* [ Tamanhos para imagens ] */
  --img-titulo: clamp(100px, 10vw, 200px);
  --img-conteudo: clamp(220px, 90vw, 370px);
}

/* ---------- [ Base ] ---------- */

* {
  color: white;
  font-size: 100%;
  scroll-behavior: smooth;
  text-align: justify;
  margin: 0;
  padding: 0;
  font-family: "VT323", "Press Start 2P";
  background-color: black;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--preenchimento);
  margin-bottom: var(--margem);
  border-bottom: 2px solid #00ff00;
}
/* ---------- [ Tipografia ] ---------- */

h1,
h2 {
  color: #00ffff;
  font-size: var(--titulo);
}

p {
  margin-bottom: var(--margem);
  font-size: var(--paragrafo);
}

a {
  font-size: var(--paragrafo);
  color: #00ff00;
  text-decoration: none;
}

ul {
  font-size: var(--paragrafo);
  list-style: none;
}

.conteudo-eng ul {
  list-style: square;
  margin-left: var(--margem);
}
/* ---------- [ Elementos Visuais ] ----------*/

strong {
  color: yellow;
}

.card em {
  color: #00ffff;
}

hr {
  border: 2px dashed white;
  margin-right: clamp(1rem, 2.5vw, 2.5rem);
  margin-left: clamp(1rem, 2.5vw, 2.5rem);
}

/* ---------- [ Divs ] ---------- */

.imagens {
  width: var(--img-titulo);
}

.imagens-cont {
  width: var(--img-conteudo);
  margin-bottom: var(--margem);
}

.titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--margem);
}

.conteudo {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
}

.card {
  padding: var(--preenchimento);
  border: 2px solid white;
  border-radius: 20px;
  margin: var(--margem);
}

.conteudo-mat {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin: var(--margem);
}

/* ---------- [ Scrollbar ] ---------- */

::-webkit-scrollbar {
  width: 0.5rem; /* equivale a 8px */
}

::-webkit-scrollbar-track {
  background: black;
  border: 0.125rem solid white; /* equivale a 2px */
}

::-webkit-scrollbar-thumb {
  background: white;
  border: 0.125rem solid white; /* equivale a 2px */
  border-radius: 0.25rem; /* equivale a 4px */
}

/* ---------- [ Medidas especias ] ---------- */
@media (max-width: 655px) {
  body {
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;
  }
  h1,
  h2 {
    font-size: 1.5rem;
  }
  p,
  ul {
    font-size: 1.25rem;
  }
  .card {
    margin: 0 var(--margem);
  }
}