@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

:root{
    --preto: #02010aff;
    --azul-facu: #04052eff;
    --azul-pm: #140152ff;
    --azul-navi: #22007cff;
    --titulo: "Orbitron", sans-serif;
    --texto: "Raleway" , sans-serif;
    }
    body{
      background-color: var(--azul-pm);
      font-family: var(--texto);
      margin: 0;
      padding: 0;
      display: flex;
      align-items:center;
      justify-content: center;
    }
    main{
    margin-top: 20px;
    max-width: 90%;
    text-align: center;
    }
    button{
        font-family: var(--titulo);
        background-color: var(--azul-navi);
        color: var(--azul-pm);
        border: 2px solid var(--azul-navi);
        padding: 20px 30px;
        margin: 10px 0;
        cursor: pointer;
        border-radius: 10px;
        font-size: 20px;
}
     button:hover{
        background-color: var(--laranja);
       color: var(--azul);
         transition: 0.5s;
}

.passo{
  font-size: 24px;
  display: none;
}

.passo.ativo{
  display: block;
}