@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Josefin+Sans:wght@200;300;400;600;700&family=Poppins:wght@400;700&display=swap');

:root{
    --fundo: #1f1f1f
   
}

/* ============ GLOBAL ============= */

*{
    margin: 0;
    padding: 0;
}

/* ============ HEADER ============= */

header{
    font-weight: 200;
    text-transform: uppercase;
    padding: 20px;
    display: block;
    align-items: center;
    
}

header nav{
    margin-top: 20px;
}

header h1{
    padding: 10px;
    font-size: 25px;
    letter-spacing: 6px;
    font-weight: 400;
    text-align: center;
    line-height: 40px;
}

/* ============ IDIOMA ============= */

.container-idioma{
    position: relative;
}
  
#formulario-idioma{
  position: absolute;
  left: 73%;
}

#iidioma{
  background-color: #1f1f1f;
  color: #fff;
  font-family: 'Josefin Sans', sans-serif;
  padding: 5px;
  border: solid 1px#5c5c5c;
  font-weight: 300;
}


/* ============ MENU ============= */

.menu-toggle{
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.menu-toggle:before, .menu-toggle:after{
    content: "";
    position: absolute;
    background-color: #fff;
    width: 30px;
    height: 3px;
    transition: 1s;
}
  
.menu-toggle:before {
  transform: translateY(10px);
}

.menu-toggle:after {
  transform: translateY(25px);
}

.menu {
  display: none;
}

.menu.open {
  display: block;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 10px 0;
}

.menu a {
  color: #fff;
  text-decoration: none;
}

.menu a:hover{
  font-weight: 400;
}

/* ============ BODY ============= */

body{
    background-color: var(--fundo);
    background-image: url("../imagens/mandala/fundo-original-opacidade20.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
    background-position: center center;
    font-family: 'Josefin Sans', sans-serif;;
    color: white;
    
}

/* ============ MAIN ============= */

.container-descricao{
  margin: 30px;
}
#descricao-mandala{
    margin: auto;
    font-weight: 300;
    line-height: 20px;
    text-align: justify;
    max-width: 600px;
}

.container-cenas{
  margin: auto;
  
}

.cena{
  margin: auto;
  text-align: center;
  margin: 20px;
}
.cena img{
  width: 300px;
  text-align: center;
}

/* ============ FOOTER ============= */

footer{
    text-align: center;
    font-size: 13px;
    font-weight: 200;
    margin: 40px;
    padding-top: 100px;
}

@media screen and (min-width: 768px) and (max-width: 1200px){

  #formulario-idioma{
      left: 85%;
    }

    .container-cenas{
      width: 600px;
      display: flex;
      align-self: center;
    }
    
    .cena{
      margin: 10px;
    }
    .cena img{
      width: 180px;
    }
}

@media screen and (min-width: 1200px){

  header{
      padding: 40px;
  }

  #formulario-idioma{
      left: 90%;
  }

    #descricao-mandala{
      max-width: 800px;
  }

  .container-cenas{
    width: 800px;
    display: flex;
    align-self: center;
  }
  
  .cena{
    margin: 10px;
  }
  .cena img{
    width: 250px;
  }
}