body {
  background-color: black;
}

/*Main header on page - larger on home page - responsive*/
header {
  display: flex;
  font-family: "New Rocker", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: white;
  justify-content: center;
  align-items: center;
  width: 100%;
} 

/*allows the logo to go below the title on small screens*/
@media (max-width: 900px) {
  header {
    flex-direction: column;
    flex-wrap: wrap;
  }
}

/*Subheadings for sections*/
h2 {
  font-family: "New Rocker", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Text within sections*/
p {
  font-family: "Phudu", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: white; 
  margin: 50px;
}

/*Navigation bar*/
nav {
  font-family: "New Rocker", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #0000FF;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  width: 100%;
}

.topnav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: black;
  height: 15vh;
}

.topnav a {
  padding: 14px 16px;
  text-decoration: none;
  font-size: 30px;
  color: #0000FF;
}

.topnav a:hover {
  background-color: #0000FF;
  color: black;
}

.topnav a.active {
  background-color: #0000FF;
  color: black;
}

/*Allows navigation to be vertical instead of horizontal on smaller screens*/
@media (max-width: 800px) {
  .topnav {
    flex-direction: column;
    height: auto;
    line-height: 20px;
  }
}

/*The layout of sections on the home page*/
.flex-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

/*Section to the left*/
.section1 {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 3px solid #0000FF;
}

/*Section to the right*/
.section2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items:center;
}

/*Ensure sections stack on top of eachother on smaller screens*/
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

/*Main picture on main section on home page*/
.band-onstage {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*The settings for the main picture on the main section on home page as screen size adjusts*/
@media (max-width: 400px) {
  .band-onstage {
   max-width: 100%;
   max-height: 50%;
   max-width: 40px;
   max-height: 20px;
  }
}

@media (min-width: 400px),(max-width: 600px) {
  .band-onstage {
   max-width: 100%;
   max-height: 50%;
   max-width: 120px;
   max-height: 80px;
  }
}

@media (min-width: 600px),(max-width: 800px) {
  .band-onstage {
   max-width: 100%;
   max-height: 50%;
   max-width: 400px;
   max-height: 250px;
  }
}

@media (min-width: 800px),(max-width: 990px) {
  .band-onstage {
   max-width: 100%;
   max-height: 50%;
   max-width: 400px;
   max-height: 250px;
  }
}
@media (min-width: 990px) {
  .band-onstage {
   max-width: 100%;
   max-height: 50%;
   max-width: 1100px;
   max-height: 850px;
  }
}

/* Settings for the pictures in the side section on home page as screen size adjusts*/
@media (max-width: 400px) {
  .bar-fight .drunk-band {
   max-width: 100%;
   max-height: 50%;
   max-width: 100px;
   max-height: 80px;
  }
}

@media (min-width: 400px),(max-width: 600px) {
  .bar-fight .drunk-band {
   max-width: 100%;
   max-height: 50%;
   max-width: 150px;
   max-height: 100px;
  }
}

@media (min-width: 600px),(max-width: 800px) {
  .bar-fight .drunk-band {
   max-width: 100%;
   max-height: 50%;
   max-width: 200px;
   max-height: 180px;
  }
}

@media (min-width: 800px),(max-width: 990px) {
  .bar-fight .drunk-band {
   max-width: 100%;
   max-height: 50%;
   max-width: 600px;
   max-height: 480px;
  }
}
@media (min-width: 990px) {
  .bar-fight .drunk-band {
   max-width: 100%;
   max-height: 50%;
   max-width: 500px;
   max-height: 380px;
  }
}

/*Footer*/
footer {
  font-family: "New Rocker", sans-serif;
  font-weight: 200;
  font-style: normal;
  text-align: center;
  color: white;
  position: relative;
  left: 0;
  bottom: 0;
  width:100%;
  height: 100px;
}