@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Satisfy&display=swap');

:root {
  --cor-primaria: #9f38d6; 
  --cor-escura: #61168a;
  --cor-secundaria: #e5e5e5; 
}

* { font-family: 'Open Sans'; font-size: 14px;}

body { margin:0; padding:0; margin-bottom: 30px; background-color: var(--cor-primaria); overflow-x: hidden;}

p { margin-block: 0;}

.loading-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.loading {
  border: 4px solid #fff;
  border-top: 4px solid transparent;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-thumb {  border-radius: 2px; background:var(--cor-primaria); } */

.sombra 
{ 
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.32);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.32);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.32);
}

.escondido { display:none !important; }

.retorno-vazio { 
  width: 100%;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.retorno-vazio p { 
  width: 100%; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.icone-info { color: #fff; }
.icone-erro { font-size: 32px; }

/* --- LOGIN ----------------------------------------------------------- */

.area-login
{
  width: 100%;
  margin: 30px auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  position:relative;
}

.telaFormLogin
{
    /*
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    */
    margin:auto;
    width: 300px;
    text-align: center;
    z-index: 3;
    border-radius: 7px;
    padding: 20px;
    box-sizing: border-box;
}

.icone-login-grande { font-size:65px; color: #fff; }
.telaFormLogin h1 
{ 
  color: #fff;
  font-family: 'Satisfy';
  font-weight: normal;
  margin-block: 0;
  margin-bottom: 25px; 
}

.frmLogin
{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.frmLogin p.caixa-texto 
{
  width: 100%;
  display: flex;
  border: 1px solid #ced4da;
  border-radius: 3px;
  outline: 0;
  box-sizing: border-box;
  padding: 4px;
  margin: 0 0 10px 0;
  background-color: #fff;
}

.frmLogin span.icone { display: block;  width: 20%; text-align: center; color:#757474;  }
.frmLogin p.caixa-texto input { width: 100%; border:none; }
.frmLogin a.links { font-size: 11px; margin-block: 0; padding: 2px 5px; text-decoration: none; color:#fff; }
.frmLogin button 
{ 
  padding: 7px 15px 7px 15px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  color: var(--cor-primaria);
  background-color: #fff;
  box-sizing: border-box;
  width: 100px;
  font-weight: bold;
}
.area-msg-erro { 
  width: 100%;
    text-align: center;
    background-color: #b52114;
    color: #fff;
    padding: 6px;
    margin-top: 5px;
    border-radius: 6px;
}
.area-msg-erro span { font-size: 11px;}

.opcoes-form-login 
{ 
  width: 100%; 
  display: flex; 
  justify-content: center; 
}

.opcoes-form-login a{ text-decoration: underline; color: var(--cor-fonte-clara); }

.opcoes-form-altera-senha { width: 100%; display: flex; justify-content: flex-end; }
.opcoes-form-altera-senha a{ text-decoration: underline; color: var(--cor-fonte-clara); }

/* ---------------------------------------------------------------------- */

/* HEADER e FOOTER */

header {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 5px;
  gap: 10px;
  width: 50%;
  z-index: 2;
  cursor: pointer;
}

.titulo {
  color: var(--cor-escura);
  font-family: 'Satisfy';
  font-size: 20px;
}

.icone-logo {
  color: var(--cor-escura);
  font-size: 28px;
}

footer {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
}

.conteudo-footer{
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  width: 30%;
  margin: auto;
}

.botaoFooter {
  color: var(--cor-escura);
  cursor: pointer;
}

main{
  margin: 150px auto;
  margin-top: 20px;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 10px;
  align-items: flex-start;
}

.info-inicial {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--cor-escura);
  height: 200px;
  text-align: center;
  font-size:32px;
}

.icone-info-inicial {
  font-size: 100px;
  color: var(--cor-escura);
}

/* */

.caixa-album {
  width: 24%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #fff;
  box-sizing: border-box;
  padding:10px;
  border-radius:5px;
  cursor: pointer;
}

.imagem {
    width: 100%;
    aspect-ratio: 1/1;
    background-position: center;
    background-size: cover;
    border-radius:5px;
}

.nome-album
{
  box-sizing: border-box; 
  padding-top:5px;
}

.caixa-foto
{
  width: 49%;
  box-sizing: border-box;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
}

.imagem-grande img {
  width: 100%;
}

.caixa-playlist {
  width: 24%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #fff;
  box-sizing: border-box;
  padding:10px;
  border-radius:5px;
  cursor: pointer;
}

.nome-playlist
{
  box-sizing: border-box; 
}

.imagem-grande video {
  width: 100%;
}

.area-botoes {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 10px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap:5px;
}

.area-botoes > button 
{ 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  border: thin solid #babaca;
  background-color: transparent;
  color: var(--cor-escura);
  border-radius: 4px;
}
.area-botoes > button > span { font-size: 20px;}