* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  line-height: 2;
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  width: 100%;
  background-color: black;
  color: white;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  position: sticky;
  align-items: center;
  /* position: -webkit-sticky; */
  z-index: 1;
  top: 0;
}

nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

nav a {
  text-decoration: none;
  color: white;
  padding: 1rem;
  text-align: center;
}

.dropdown {
  display: grid;
  align-items: center;
  border-style: none;
  cursor: pointer;
}

.dropdown-btn {
  background-color: inherit;
  color: inherit;
  font-family: inherit;
  text-transform: inherit;
  font-size: 1rem;
  height: 100%;
  border-style: none;
  cursor: pointer;
}

nav a:hover,
.dropdown:hover .dropdown-btn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: grey;
  top: 99%;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  float: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: red;
}

.search > i {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1.2rem;
}

.search:hover {
  background-color: red;
}

button {
  cursor: pointer;
}

@keyframes hero-transition {
  0% {
    opacity: 0.6;
    background-image: url("https://www.w3schools.com/w3images/chicago.jpg");
  }

  2% {
    opacity: 1;
    background-image: url("https://www.w3schools.com/w3images/chicago.jpg");
  }

  28% {
    opacity: 1;
    background-image: url("https://www.w3schools.com/w3images/chicago.jpg");
  }

  30% {
    opacity: 0.6;
    background-image: url("https://www.w3schools.com/w3images/chicago.jpg");
  }

  31% {
    opacity: 0.6;
    background-image: url("https://www.w3schools.com/w3images/la.jpg");
  }

  33% {
    opacity: 1;
    background-image: url("https://www.w3schools.com/w3images/la.jpg");
  }

  59% {
    opacity: 1;
    background-image: url("https://www.w3schools.com/w3images/la.jpg");
  }

  61% {
    opacity: 0.6;
    background-image: url("https://www.w3schools.com/w3images/la.jpg");
  }

  62% {
    opacity: 0.6;
    background-image: url("https://www.w3schools.com/w3images/ny.jpg");
  }

  64% {
    opacity: 1;
    background-image: url("https://www.w3schools.com/w3images/ny.jpg");
  }

  98% {
    opacity: 1;
    background-image: url("https://www.w3schools.com/w3images/ny.jpg");
  }

  100% {
    opacity: 0.6;
    background-image: url("https://www.w3schools.com/w3images/ny.jpg");
  }
}

.hero {
  aspect-ratio: 16/9;
  width: 100%;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  justify-content: flex-end;

  animation-name: hero-transition;
  animation-duration: 10s;
  animation-direction: forward;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.hero > * {
  padding: 2rem;
  font-weight: bold;
}

@keyframes h1-transition {
  0% {
    content: "Chicago";
  }
  30% {
    content: "Chicago";
  }
  31% {
    content: "Los Angeles";
  }
  61% {
    content: "Los Angeles";
  }
  62% {
    content: "New York";
  }
  99% {
    content: "New York";
  }
}

.hero h1:before {
  content: "";
  animation-name: h1-transition;
  animation-duration: 10s;
  animation-direction: forward;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes p-transition {
  0% {
    content: "Thank you Chicago - A night we won't forget.";
  }
  30% {
    content: "Thank you Chicago - A night we won't forget.";
  }
  31% {
    content: "We had the best time playing at Venice Beach";
  }
  61% {
    content: "We had the best time playing at Venice Beach";
  }
  62% {
    content: "The atmosphere in New York is lively";
  }
  99% {
    content: "The atmosphere in New York is lively";
  }
}

.hero p:before {
  content: "";
  animation-name: p-transition;
  animation-duration: 10s;
  animation-direction: forward;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.band {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto 0 auto;
  padding: 3rem;
}

.title {
  padding: 1rem;
  text-transform: uppercase;
}

.subtitle {
  padding: 0.5rem;
  font-style: italic;
  color: grey;
}

.band > .paragraph {
  padding: 1rem;
  width: clamp(400px, 60%, 900px);
}

.item-name {
  text-align: center;
}

.gallery {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  padding: 2rem;
  margin-top: 2rem;
}

.gallery-item img {
  /* width: clamp(150px, 100%, 300px); */
  object-fit: cover;
}

.tour {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: black;
  padding-bottom: 50px;
}

.tour .title {
  color: white;
}

.months-tickets {
  background-color: white;
  width: 60%;
  margin: 1rem;
}

.month {
  display: flex;
  flex-direction: row;
  padding: 5px;
  position: relative;
}

.month > .status {
  background-color: red;
  color: white;
  margin-left: 1rem;
}

.month > .status[available] {
  background-color: black;
  border-radius: 100%;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
  position: absolute;
  right: 1rem;
}

.cities-tickets {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: clamp(500px, 60%, 900px);
  gap: 1rem;
}

.city {
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  background-color: white;
}

.city > :not(img) {
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 0.5rem 0;
}

.city-name {
  font-weight: bold;
  font-size: 1.2em;
  height: 4rem;
}

.date {
  color: grey;
}

.city > img {
  object-fit: cover;
  width: 100%;
}

.city > button {
  background-color: black;
  color: white;
  width: 15ch;
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}

.contact-body {
  display: flex;
  flex-direction: row;
  width: 80%;
  margin: 2rem;
  padding: 2rem;
  justify-content: space-around;
}

.contact-details {
  align-items: left;
}

form.contact-form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0.5rem;
}

#personal-details {
  display: flex;
  flex: row;
  gap: 1rem;
}

input {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

#message-input {
  width: 100%;
}

#submit-contact-form {
  background-color: black;
  color: white;
  text-transform: uppercase;
  padding: 0.5rem;
  margin: 0.5rem;
}

.map-img > img {
  filter: grayscale(50%);
  object-fit: contain;
  width: 100%;
}

#social-media > i {
  cursor: pointer;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}

footer > * {
  padding: 2rem;
}

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child),
  .dropdown {
    display: none;
  }

  .hero > * {
    display: none;
  }

  .gallery {
    flex-direction: column;
    align-items: center;
  }

  .cities-tickets {
    flex-direction: column;
    align-items: center;
    width: 80%;
  }

  .contact-body {
    flex-direction: column;
    width: 100%;
    justify-content: space-evenly;
  }

  #message-input {
    width: 100%;
  }

  #personal-details {
    flex-direction: column;
    width: 100%;
    margin-top: 1rem;
    gap: 0;
  }
}