:root{
    --primary-color: #e6e6c5;
    --secondary-color: #442007;
    --highlighted-color: #03bfcc;
    --matte-color: #A97247;
    --first-time: .3s;
    --transicao-tema: all 2s ease-in-out;
}

@media(prefers-color-scheme: dark){
    :root{
        --primary-color: #000000;
        --secondary-color: #FFFFFF;
        --highlighted-color: #992828;
        --matte-color: #929191;
    }
}

[data-tema="dark"]{
    --primary-color: #000000;
    --secondary-color: #FFFFFF;
    --highlighted-color: #992828;
    --matte-color: #929191;
}

[data-tema="light"]{
    --primary-color: #e6e6c5;
    --secondary-color: #442007;
    --highlighted-color: #03bfcc;
    --matte-color: #A97247;
}

[data-tema="light"], [data-tema="dark"] { transition: var(--transicao-tema); }

#audio-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.5rem;
  font-family: inherit;
}

/*  Versão da index */
.overlay-visivel {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* Versão invisível da lista */
.overlay-invisivel {
  background: transparent;
  color: transparent;
}