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

html {
  /* 
    RESPONSIVE DESIGN =
    SETS THE FONT SIZE SO
    1rem = 10px
  */
  font-size: 62.5%;
  font-family: "Avantgarde", Verdana, sans-serif;
  scroll-behavior: smooth;
}

body,
footer {
  background-color: #3a5a40;
  color: #223423;
}

.container {
  width: 114rem;
  height: 100%;
  margin: 0 auto;
  padding-top: 11.3rem;
  background-color: #dad7cd;
  font-size: 1.6rem;
}

.header {
  height: 11.4rem;
  width: 114rem;

  background-image: url("img/headers/Header.jpg");
  background-size: 100% 100%;

  /* 
    MAKES HEADER STICKY
  */
  position: fixed;
  top: 0;
  z-index: 100;

  /* 
    MAKES HEADER A FLEX CONTAINER IN RELATION
    TO THE NAVIGATION
  */
  display: flex;
  justify-content: end; /* PUTS IT AT THE FAR RIGHT */
}

.imgWidth {
  /* 
    SETS EACH IMAGE (SECTION HEADER AND 
    FOOTER) TO BE THE WIDTH OF THE CONTAINER
  */

  width: 100%;
}

.separator {
  /* 
    ALLOWS THE SPACE ABOVE EACH SECTION HEADER
    IMAGE SO IT SHOWS CORRECTLY ONCE THE NAV
    LINK IS CLICKED
  */

  height: 11.2rem;
  background-color: #dad7cd;
}

section {
  margin-left: 1rem;
  margin-right: 1rem;
  text-align: center;
  margin-bottom: -10rem;
}

/**************************************************/
/*                NAVIGATION START                */

nav {
  align-items: flex-end; /* SETS NAV TO BOTTOM */
  justify-content: flex-end; /* SETS NAV TO RIGHT */
  margin-top: auto;
}

.nav-ul {
  list-style: none; /* TURNS BULLETS OFF */
  display: flex;
  gap: 2.4rem;
  margin-right: 1rem;
  margin-bottom: 0.15rem;
}

.nav-common {
  height: 4.8rem;
  background-size: cover;
  transition: background-image 0.3s ease; /* COOL FADE BETWEEN NAV LINKS */
}

.nav-home {
  width: 5.35rem;
  background-image: url("img/nav/Home.png");
}

.nav-home:hover {
  background-image: url("img/nav/Home-hover.png");
}

.nav-audio {
  width: 6.1rem;
  background-image: url("img/nav/Audio.png");
}

.nav-audio:hover {
  background-image: url("img/nav/Audio-hover.png");
}

.nav-graphic {
  width: 8.7rem;
  background-image: url("img/nav/Graphic.png");
}

.nav-graphic:hover {
  background-image: url("img/nav/Graphic-hover.png");
}

.nav-video {
  width: 5.85rem;
  background-image: url("img/nav/Video.png");
}

.nav-video:hover {
  background-image: url("img/nav/Video-hover.png");
}

.nav-events {
  width: 7.6rem;
  background-image: url("img/nav/Events.png");
}

.nav-events:hover {
  background-image: url("img/nav/Events-hover.png");
}

.nav-contact {
  width: 9.1rem;
  background-image: url("img/nav/Contact.png");
}

.nav-contact:hover {
  background-image: url("img/nav/Contact-hover.png");
}

/* MOBILE */

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  /*
    TURNS THE MOBILE NAV OFF WHEN 
    SCREEN WIDTH IS >920px
  */
  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #dad7cd;
}

.icon-mobile-nav[name="close-outline"] {
  /*
    SPECIFICALLY HIDES THE CLOSE BUTTON FOR MOBILE
  */
  display: none;
}

/*                 NAVIGATION END                 */
/**************************************************/

/**************************************************/
/*                HOME SECTION START              */

.home h1,
.home p {
  margin-bottom: 1rem;
}

.home h3,
.upcoming {
  width: 80%;
  margin: 0 auto;
}

.home h3 {
  margin-bottom: 1rem;
}

.specializes {
  list-style: none;
}

.specializes-item {
  margin-bottom: 1rem;
}

/*                HOME SECTION START              */
/**************************************************/

/**************************************************/
/*               AUDIO SECTION START              */

.mobile-header {
  display: none;
}

.audio {
  z-index: 50;
}

.album {
  max-width: 85rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  text-align: left;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.album-cover {
  border-radius: 1.2rem;
  width: 40rem;
  height: 40rem;
}

.album-links {
  width: 50rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  justify-items: center;
  margin: 0 auto;
  gap: 0.2rem;
}

audio {
  width: 40rem;
  height: 2rem;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
}

.audio-separator {
  max-width: 50rem;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.link-common {
  background-size: 100% 100%;
  border-radius: 0.5rem;
  width: 4.8rem;
  height: 4.8rem;
  transition: background-image 0.3s ease;
}

.link-fb {
  background-image: url("img/links/facebook.jpg");
}

.link-fb:hover {
  background-image: url("img/links/facebook-hover.jpg");
}

.link-yt {
  background-image: url("img/links/youtube.jpg");
}

.link-yt:hover {
  background-image: url("img/links/youtube-hover.jpg");
}

.link-bc {
  background-image: url("img/links/bandcamp.jpg");
}

.link-bc:hover {
  background-image: url("img/links/bandcamp-hover.jpg");
}

.link-spotify {
  background-image: url("img/links/spotify.jpg");
}

.link-spotify:hover {
  background-image: url("img/links/spotify-hover.jpg");
}

.link-apple {
  background-image: url("img/links/apple.jpg");
}

.link-apple:hover {
  background-image: url("img/links/apple-hover.jpg");
}

.link-amazon {
  background-image: url("img/links/amazon.jpg");
}

.link-amazon:hover {
  background-image: url("img/links/amazon-hover.jpg");
}

/*                AUDIO SECTION END               */
/**************************************************/

/**************************************************/
/*              GRAPHIC SECTION START             */

.graphic-separator {
  height: 3rem;
}

.shadow {
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: all 0.3s;
}

.shadow:hover {
  transform: scale(1.05);
}

.square {
  width: 50rem;
  height: 50rem;
}

.threesquare {
  width: 90rem;
  height: 30rem;
}

.tray {
  width: 50.5rem;
  height: 40rem;
}

.flyer {
  width: 50rem;
  height: 70rem;
}

.ticket {
  width: 50rem;
  height: 17.5rem;
}

/*               GRAPHIC SECTION END              */
/**************************************************/

.YoutubeVideo {
  width: 64rem;
  height: 36rem;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/**************************************************/
/*              CONTACT SECTION START             */

.contact {
  margin-bottom: 0;
}

.contact-header {
  text-align: center;
  font-size: 2.6rem;
  color: #dad7cd;
  margin-bottom: 1.4rem;
}

.contact-box {
  width: 50rem;
  height: 34rem;
  background-color: #3a5a40;
  margin: 0 auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
  text-align: left;
  border-radius: 1.2rem;
  padding: 1rem;
}

.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.2rem;
  row-gap: 2.4rem;
}

.cta-form label {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #dad7cd;
  margin-bottom: 0.4rem;
}

.cta-form input,
.cta-form textarea {
  width: 100%;
  padding: 1.2rem;
  font-size: 1.6rem;
  font-family: inherit;
  border: none;
  background-color: #dad7cd;
  border-radius: 0.9rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.cta *:focus {
  outline: none;
  box-shadow: 0 0 0 0.8rem rgba(253, 242, 233 0.5);
}

.message {
  grid-column: span 2;
}

.message textarea {
  width: 100%;
  height: 10rem;
  resize: none;
}

.submit {
  grid-column: span 2;
  height: 3rem;
  border-radius: 0.9rem;
  border: 2px solid #dad7cd;
  font-size: 2rem;
  font-family: inherit;
  color: #3a5a40;
  transition: all 0.3s;
}

.submit:hover {
  color: #dad7cd;
  background-color: #558157;
}

/*               CONTACT SECTION END              */
/**************************************************/

/**************************************************/
/*                   FOOTER START                 */

.bottom {
  color: #dad7cd;
  font-size: 1.2rem;
  width: 114rem;
  height: 12rem;
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
}

.footer-logo {
  width: 14rem;
  height: 8.8rem;
}

.email {
  justify-self: center;
}

.copyright {
  justify-self: end;
  text-align: right;
}

/*                    FOOTER END                  */
/**************************************************/