/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 27, 2025 */



/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 27, 2025 */



@font-face {
    font-family: 'noto_sans_hebrewthin';
    src: url('notosanshebrew-variablefont_wdthwght-webfont.woff2') format('woff2'),
         url('notosanshebrew-variablefont_wdthwght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #000;
  display: flex; /* Flexbox para centralizar a div */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  height: 100vh; /* Altura total da viewport para flex funcionar */
}


h1 {
width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(to right, #a2682a 0%, #be8c3c 8%, #be8c3c 18%, #d3b15f 27%, #faf0a0 35%, #ffffc2 40%, #faf0a0 50%, #d3b15f 58%, #be8c3c 67%, #b17b32 77%, #bb8332 83%, #d4a245 88%, #e1b453 93%, #a4692a 100%);
    background-size: 150%;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  font-size: 5rem; /* Tamanho padrão para o maior */
    line-height: 3rem;
    height: 7rem;
    font-weight: 200;
    font-family: 'noto_sans_hebrewthin';
    filter: drop-shadow(0 0 1px rgba(255, 200, 0, .3));
    animation: MoveBackgroundPosition 6s 
ease-in-out infinite;
margin-top: 0;
}
.choir{
  font-size: 3rem;
}
@keyframes MoveBackgroundPosition { 
  0% {
      background-position: 0% 50%
  }
  
  50% {
    background-position: 100% 50%
  }
  
  100% {
    background-position: 0% 50%
  }
}
.oratorio{
display: block;
    position: relative;
    height: 60vh;
    width: 50vh;
    -webkit-flex-basis: 275px;
    -ms-flex-basis: 275px;
    flex-basis: 275px;
    background-size: cover;
    background-position: top center;
    -webkit-border-radius: 175px 175px 0px 0px;
    -moz-border-radius: 175px 175px 0px 0px;
    border-radius: 50vh 50vh 0px 0px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 10px solid #AB8A5B;
}
canvas {
  position: fixed; /* Canvas fixo em toda a tela, atrás da imagem */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Atrás da div */
}

.image-container {
  z-index: 10; /* Por cima das nuvens */
  /* Não precisa de mais CSS aqui, pois é centralizado pelo flex do body */
}

.image-container img {
      max-width: 100%;
    /* max-height: 80vh; */
    width: auto;
    height: auto;
    pointer-events: none;
}
/* Estilos para o player de áudio */
audio {
    display: block;
    margin: 20px auto;
    width: 300px;
    position: relative;
    z-index: 10;
    position: absolute;
    bottom: 0;
    opacity: 0.5;
}
audio:hover{
  opacity: 1;
}
/* Estilos personalizados para controles do áudio (suporte limitado por navegador) */
audio::-webkit-media-controls-panel {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 5px;
}

audio::-webkit-media-controls-play-button {
  background-color: #AB8A5B; /* Verde para o botão play */
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

audio::-webkit-media-controls-volume-slider {
  accent-color: #AB8A5B; /* Cor do slider de volume */
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #000; /* Cor do tempo */
  font-size: 12px;
}

/* Para Firefox (suporte parcial) */
audio::-moz-media-controls-panel {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 20px;
}

/* Para Safari (suporte parcial) */
audio::-webkit-media-controls-overlay-enclosure {
  border-radius: 20px;
}

/* Tablet: diminui para 3rem */
@media (max-width: 1199px) {
  h1  {
    font-size: 3rem;
  }
}

/* Mobile grande: diminui para 2.5rem */
@media (max-width: 768px) {
  h1  {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}

/* Mobile pequeno: diminui para 2rem */
@media (max-width: 480px) {
  h1  {
    font-size: 2rem;
    line-height: 1.5rem;
  }
}