oraculo.css

* {
    margin: 0 auto;
  }
  
  body {
    background-color: black;
  
    color: #d4c85b;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
  
    font-family: Arial, Helvetica, sans-serif;
  }
  
  main {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 90%;
  }
  header {
    border: #696220 2px solid;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    padding: 10px;
    max-width: 90%;
    
  }
  
  #btnJogar {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    background-color: black;
    border: #696220 2px solid;
    color: #d4c85b;
    font-size: 25px;
    height: 100px;
    width: 100px;
  }
  #btnJogar:hover {
    border: #8d8b79 2px solid;
    color: #8d8b79;
    filter: brightness(1.3);
    transition: 600ms;
    cursor: pointer;
  }
  
  .moedas {
    border: #696220 2px solid;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    display: flex;
  
    justify-content: space-between;
    flex-direction: row;
  }
  .moeda {
    margin: 10px;
  
    height: 50px;
    width: 50px;
  }
  
  .res {
    background-color: #d4c85b;
    display: flex;
    width: 75px;
    padding: 2px;
    margin-left: 5px;
  }
  .bit {
    background-color: #696220;
    min-height: 25px;
    min-width: 25px;
    margin-top: 1px;
    margin-bottom: 1px;
  }
  
  .jogo {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    text-align: center;
    background-color: black;
    color: white;
    height: 200px;
    width: 100%;
  }
  
  .sorteio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .trigrama {
    margin: 1px;
  }
  .trigrama1,
  .trigrama2 {
    display: flex;
    flex-direction: row;
  }
  
  .ideograma {
    margin: 1px auto;
    background-color: black;
    width: 100px;
    display: flex;
    align-items: center;
    font-size: 18px;
    text-align: center;
  }
  
  .Oraculo  {
    
    border: #696220 2px solid;
    max-width: 95%;
    width: 85%;
  }
  .Oraculo.show{
    visibility: visible;
    border: #696220 2px solid;
    max-width: 95%;
    width: 85%;
  }