body{
  margin: 0;
  font-family:Arial, Helvetica, sans-serif;
  background-image: url('..//Imagens/Fundo_eventos.png');
}

/*Trabalhando Flex-box no Navbar*/
.navbar {
  background-image: url(../Imagens/Header.jpg);
  padding-left: 5%;
}

.navbar>ul {
  margin: 0;
  padding: 0;
}

.navbar>ul>li {
  display: inline-block;
  list-style: none;
 
}

/*Configurações Padrões*/
ul.menu, .menu li, .menu a { 
  margin:0px; 
  padding-top:20px; 
  list-style:none; 
  text-decoration:none;
  justify-content: flex-start;
}
/* Sombra da caixa do dropdown */
ul.menu ul{ 
  position:absolute; 
  display:none; 
  box-shadow:4px 4px 3px rgb(54, 82, 194);}

/* Configurações nivel 1 lista UL MENU navbar*/
ul.menu { 
  float:left; 
  
  font-size:15px; 
  border-radius:5px; 
  padding:0 15px;
  font-weight: bold;
}

.menu li{ 
  float:left; 
  width:auto; 
  position:relative;
}

.menu li a{ 
  display:block; 
  padding:0px 10px; 
  line-height:35px; 
  height:35px; 
  float:left; 
  transition: all 0.1s linear; 
}

/* Configurações nivel 2 dropdown janela*/
.menu li:hover>ul.dropdown{
  display:block; 
  top:55px; 
  left:0; 
  padding:5px 5px; 
  width:190px; 
  border-radius:0 25px 10px 10px;
  background:rgb(255, 253, 253);   
}
.menu ul.dropdown a{  
  width:170px; 
  padding:0px 10px; 
  border-radius:5px;  
}

/*Configurações de cores*/

/*nivel 1*/

.menu a{ 
  color:#000;
}
.menu li:hover>a{ 
  background:rgb(54, 82, 194);  
  color:rgb(255, 255, 255);
}

/*nivel 2*/

.dropdown a{
  color:black;
}
.dropdown li:hover>a{ 
  background:rgb(54, 82, 194); 
}

/*Cria uma grade para mudar a cor apenas do header e exibir as opções  */
.Grade {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: 80px;
  background-image: url(../Imagens/Header.jpg);
}
/* Float milagroso do Jonh*/
#imagem_header {
  float: left;
  margin-left: 1%;
  height: 100%;

}



/* Efeito nos botões*/
button {
  z-index: 1;
  position: relative;
  font-size: inherit;
  font-family: inherit;
  color: white;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  background-color: hsl(246, 41%, 21%);
  overflow: hidden;
  transition: color 0.4s ease-in-out;
}

button::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #3cefff;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.45s ease-in-out;
}

button:hover {
  cursor: pointer;
  color: #161616;
}

button:hover::before {
  transform: translate(-50%, -50%) scale(15);
}