* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


@font-face {
  font-family: 'Barlow_Condensed';
  src: url('fontes/Barlow_Condensed/BarlowCondensed-Regular.ttf') format('truetype');
  font-weight: 400; /* normal */
  font-style: normal;
}

@font-face {
  font-family: 'Barlow_Condensed';
  src: url('fontes/Barlow_Condensed/BarlowCondensed-SemiBold.ttf') format('truetype');
  font-weight: 500; /* normal */
  font-style: normal;
}

@font-face {
  font-family: 'Barlow_Condensed';
  src: url('fontes/Barlow_Condensed/BarlowCondensed-Bold.ttf') format('truetype');
  font-weight: 700; /* normal */
  font-style: normal;
}

body {
  font-family:"Barlow_Condensed", sans-serif;
   background-image: url('imagens/td_001.jpg');
   background-size: cover;             
   background-position: center;        
   color: ghostwhite;
   text-align: center;
}

.homepage {
    padding-top: 4vh;
 width: 40%;;
}

.homepage:hover {
 transform: scale(1.05);
 transition: all 0.3s ease;
}

header {
  color: #1d4000;
  padding: 10px 20px;
  display:flexnao;
  justify-content: space-between;
  align-items: center;
}

main h3 {
    font-size: 2rem;
    padding-top: 10vh;
}

main h2 {
    font-size: 8rem;
    padding-bottom: 0px;
}

.compras h4 {
    font-size: 1.5rem;
    padding-bottom: 1vh;
    padding-top: 0px;
}

h4 {
    font-size: 1.5rem;
    padding: 10vh;
}

h4:hover {
  color: white;
  transform: scale(1.05);
  transition: all 0.2s ease;
    cursor: pointer;
    
}




h3 {
    font-size: 2rem;
}

h2 {
    font-size: 3rem;
}

p {
    font-size: 1rem;
}


.compras {
    background: transparent;
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    padding:5vh;
    border-radius: 20px;
    border: none;
    width: 100%;
    justify-content: center;
}


.compras:hover {
  background-image: url('imagens/preto.png');
  color: white;
  border-radius: 20px;
  transform: scale(1.05);
  transition: all 0.4s ease;
  cursor: pointer;
}



.evento p:hover {
  color: #c4ffc4;
  transform: scale(1.1);
  transition: all 0.2s ease;
    
}



.logo {
    width: 51%;
    padding: 3vh;
}


.ladoalado {
    display: flex;
    width: 100%;
    justify-content: center;
    background: black;
    column-gap: 20%;
    padding: 10vh;
}



.evento {
    padding-bottom: 3vh;
    background: black;
}


.lineup {
    padding: 5vh;
}


.footer-icons {
    padding-top: 20vh;
    padding-bottom: 2vh;
}


.fundo {
    width: 70%;
    padding-top: 15vh
}


h2 {
    padding: 2vh;
}


.footer-copy {
    padding: 2vh;
}

.footer a {
   color: ghostwhite;
    font-size: 1rem;
    text-decoration: none;
}


.best {
    padding: 5vh;
}


.secreto {
    display: none;
    border: 0px;
}


nav ul {
  list-style:none;
  display:flex;
  column-gap: 12%;
  padding-bottom: 20px;
    padding-top: 8vh;
    justify-content: center;
    width: 100%;
}

nav a {
    background: #e6e6e6;
    text-decoration: none;
    color: #1d4000;
    padding: 8px 12px;
    border-radius: 20px;
    border: none;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-family: "Barlow_Condensed", sans-serif;
    font-weight: 500;
}

nav a:hover {
  background: #a1c722;
  color: white;
  border-radius: 20px;
  transform: scale(1.1);
}

/* Botão hamburguer */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle div {
  width: 25px;
  height: 3px;
  background: white;
  margin: 4px 0;
}

/* Responsividade */
@media (max-width: 768px) {
  nav ul {
    position: absolute;
    top: 60px;
    left: -100%;
    background: #e6e6e6;
    flex-direction: column;
    width: 100%;
    text-align: center;
    transition: left 0.7s;
      margin-left: 0%;
      gap: 20px;
  }
    
    

  nav ul.show {
    left: 0;
  }

  .menu-toggle {
    display: flex;
  }
  
  h2 { font-size: 4rem; }  
  main h2 { font-size: 3rem; }
  main h3 { font-size: 1.2rem;
            padding-top: 35vh; }
    
  .ladoalado {
    column-gap: 10%;
}  
    
    
 .mascote {
    width: 30%;
    padding-bottom: 25vh;
}   
    
    
.logo {
    width: 70%;
    padding: 3vh;
}
    
    
.homepage {
 display: none;
}    
    
    
.compras { background-image: url(imagens/preto.png);
    border-radius: 0px}
    
    
 .best {
    padding: 2vh;
}

      .footer-copy { font-size: 0.7rem; } 
    
}