:root {
  --cor-fundo: #0f0f0f;
  --cor-header: #141414;
  --cor-primaria: #ff6a00;
  --cor-neon: #00ffc3;
  --cor-texto: #ffffff;
  --cor-texto-sec: #aaaaaa;

  --fonte: 'Segoe UI', Arial, sans-serif;
}

html, body{
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
}

header {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  background: var(--cor-header);
  padding: 16px 24px;
  border-bottom: 2px solid var(--cor-primaria);
}

h4{
  margin-top: 0;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--cor-texto-sec);
}

section {
    flex-basis: 100px;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

img {
    width: 200px;
    height:200px;
}

.botao {
  display: inline-block;
  padding: 10px 18px;
  background: var(--cor-primaria);
  color: #000;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.25s ease;
}


.botao:hover {
  background: var(--cor-neon);
  color: #000;
  box-shadow: 0 0 12px var(--cor-neon);
}

/*responsivo*/
@media (max-width: 768px) {

    main {
        flex-direction: column; /* muda o alinhamento das seções para vertical*/
        align-items: center;
    }
}