@import url('https://fonts.googleapis.com/css2?family=Libertinus+Sans:ital,wght@0,400;0,700;1,400&display=swap');

body {
  background: linear-gradient(
    to bottom,
    #ddb505 0%,
    #f3c42b 25%,
    #f5dc01 50%,
    #eeb53a 75%,
    #f3ca44 100%
  );
  margin: 0;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Times New Roman', Times, serif;
}

/* TEXTO DE ABERTURA */
.apresentacao {
  font-family: 'Libertinus Sans', sans-serif;
  font-size: 2rem;
  color: #e7c00f;
  text-align: center;
  background-color: #2b58de;
  padding: 10px;
}

/* TEXTOS DE INSTRUÇÃO */
.Texto {
  font-size: 1.2rem;
  color: #000;
  text-align: center;
  font-family: "Dejavu Sans Mono";
  margin: 10px 0;
}

.textcomida, .textatrações, .textmúsicas {
  text-align: center;
  font-family: "Dejavu Sans Mono";
  margin-top: -10px;
}

/* CARDÁPIO */
.Cardápio, .Atraçõestable, .textmusica {
  font-size: 1rem;
  text-align: center;
  padding: 15px 25px;
  margin: 30px auto 10px auto;
  color: #e7c00f;
  background-color: #2b58de;
  width: fit-content;
}

.Table, .Table2, .Musicaslist {
  display: flex;
  justify-content: center;
  margin: 0 auto 30px auto;
  overflow-x: auto;
}
.Cardápio {
  margin-top: 4rem;
}

.Table table, .Table2 table {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  margin: 3rem;
}

.Table th, .Table2 th, 
.Table td, .Table2 td {
  border: 1px solid #000;
  padding: 10px;
}

/* ANIMAÇÃO DA TRIÂNGULO */
.bolinha {
  width: 60px;
  height: 60px;
  background-color: #2b58de;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  margin: 20px auto;
  animation: mover-pingpong-triangle 3s linear infinite alternate;
}

@keyframes mover-pingpong-triangle {
  0% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(100px) rotate(5deg); }
  100% { transform: translateX(200px) rotate(0deg); }
}



.footer {
  font-size: 1rem;
  text-align: center;
  padding: 10px;
  background-color: rgba(0,0,0,0.1);
  margin-top: 40px;
}


@media (max-width: 768px) {
  .Imagens {
    flex-direction: column;
    align-items: center;
  }

  .bolinha {
    animation: none;
  }

  .Table table, .Table2 table {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .apresentacao {
    font-size: 1.5rem;
  }

  .Texto {
    font-size: 1rem;
  }

  .Cardápio, .Atraçõestable, .textmusica {
    font-size: 0.9rem;
    padding: 10px;
    margin: 5rem;
  }

}
.imagem{
  justify-content: center ;
  align-items: center;
  position: absolute;
  top: 30rem;
}
.imagens{
  justify-content: center ;
  align-items: center;
  position: absolute;
  top: 28rem;
  left:80rem;
  width: 20rem;
}