/*--------selecao ----------*/
#selecaoTercos{
  display: none;
}
/*----------home------------*/
*{
  text-align: center;
   margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  cursor:default;
}
body{
  height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 10vh 20%;
  background-color: beige;
 }
.ball {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  margin: 1rem 0.5rem;
  background-color: rgb(237, 218, 166);
  cursor: pointer;
  list-style-type: none;
}

ul{
  display: flex;
  justify-content: center;
}
li{
  display: flex;
  justify-content: center;
}

p{
  font-size: 1.2rem;
  width: 90%;
  padding:2rem 5%;
  background-color:  rgba(205, 186, 132, 0.247);
  border-radius: 30px;
  color:rgb(141, 127, 92);
}
h1{
  font-size: 2.6rem;
  padding: 2rem 0;
  color: rgb(219, 199, 145);
}
#divBolas, #tresmarias{
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}
#santoRosarioOnline{
  padding: 15vh 0;
  color:  rgb(205, 186, 132);
}
button{
  padding: 10px;
  font-size: 1.2rem;
  border-radius: 15px;
  border: none;
  background-color: rgb(205, 186, 132);
  transition: 0.3s;
  color: rgb(255, 244, 230);
}
button:hover{
  background-color: rgb(237, 218, 166) ;
}
#botoes{
  display: flex;
  flex-direction: column;
  gap: 5vh;
}
.btns{
  display: flex;
  justify-content: center;
  gap: 10px;
}

@media(max-width: 1050px){
 body{
  padding: 10vh 30px;
 }
 h1{
  font-size: 2.3rem;
 }
}
@media(max-width: 450px){
 p {
    font-size: 0.8rem;
    width: 100%;
    padding:2rem 5px;
  }
  h1{
    font-size: 1.5rem;
    padding: 2rem 0;
  }
  button{
    font-size: 0.8rem;
  }
  #divBolas{
    display: flex;
    justify-content: center;
    padding: 2rem 0;
  }
  .ball {
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    margin: 1rem 0.18rem;
    background-color: rgb(237, 218, 166);
    cursor: pointer;
    
  }
  #selecaoTercos{
    flex-direction: column;
    padding-left: 20%;
    gap: 5px;
    width: 60%;
  }
}