body {
  /* All pages backgrounds - black with magenta gradient at bottom */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url(./assets/images/rslogo2.png), url(./assets/images/rsgrid.png), linear-gradient(to bottom, #000000 60%, #400040);
  background-attachment: local, local, fixed;
  background-size: 30vh, contain, 100% 100%;
  background-position: center 90%, center bottom, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  height: 100%;
  overscroll-behavior: contain;
  /* Page margins - top, left/right, bottom */
  margin: 1vw 4vw 10vh;
  /* Global font and text info */
  text-align: center;
  font-size: calc(16px + 1vw);
  font-family: "Jura", sans-serif;
  font-weight: 400;
  font-style: normal;
  /* Global text color */
  color: #00FFFF;
  /* This makes the text look glowy */
  text-shadow: 0 0 1rem #00FFFF;
}
/* END OF GLOBAL WEBSITE PARAMETERS */

/* GLOBAL PAGE COMPONENTS */
.section {
  display: flex;
  justify-content: center;
  text-align: center;
}

.button {
  background-color: transparent;
  border: none;
  color: #ff00ff;
  text-shadow: 0 0 1rem #ff00ff;
  padding: 1vw 4vw;
  font-family: "Jura", sans-serif;
  font-size: 2vw;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Needed for Safari browsers only */
  transition-duration: 0.4s;
}

.button2:hover {
  cursor: pointer;
  color: #00FFFF;
  text-shadow: 0 0 4rem #00FFFF;
}

#nav {
  margin: 0% 0% 1%;
}

#foreword {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 2.5vw;
  padding-bottom: 5%;
}

#sectionHeader {
  justify-content: left;
  text-decoration-line: underline;
  text-decoration-style: solid;
  padding-bottom: 5%;
}

#aboutN8 {
  display: flex;
  flex-flow: row nowrap;
}

#aboutN8 img {
  width: 20vw;
  height: auto;
  box-shadow: 0 0 .5em .1em #00FFFF;
  border-radius: .5em;
  margin-bottom: 5%;
}

#aboutBandTitle {
  display: flex;
  justify-content: center;
  font-size: 3vw;
  padding-bottom: 4%;
  text-decoration-line: underline;
}

#aboutBandText {
  max-width: 60ch;
  font-size: 2vw;
  justify-content: center;
  text-align: center;
  padding: 0 2vw 0 2vw;
}

#aboutV0X {
  display: flex;
  flex-flow: row-reverse nowrap;
  margin-bottom: 5%;
}

#aboutV0X img {
  width: 20vw;
  height: auto;
  box-shadow: 0 0 .5em .1em #00FFFF;
  border-radius: .5em;
}

.blogDate {
  text-align: left;
  font-size: 2vw;
  text-decoration: underline;
}

.blogPost {
  display: flex;
  text-align: center;
  flex-direction: column;
  margin-top: 5%;
  box-shadow: 0 0 .5em .1em #00FFFF;
  border-radius: .5em;
  justify-content: center;
  padding: 5%;
  font-size: 1.5vw;
}

#upcomingEvents {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
  box-shadow: 0 0 .5em .1em #00FFFF;
  border-radius: .5em;
  margin: 1%;
  padding: 1%;
  font-size: 2vw;
}

#upcomingEvents img {
  width: 10vw;
  height: auto;
  box-shadow: 0 0 .5em .1em #ff00ff;
  border-radius: .5em;
}

#upcomingEvents img:hover {
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Needed for Safari browsers only */
  transition-duration: 0.4s;
  box-shadow: 0 0 .5em .1em #00FFFF;
}

#spotifyEmbed > iframe {
  display: flex;
  text-align: center;
  justify-content: center;
  margin-top: 5%;
  margin-bottom: 30%;
  box-shadow: 0 0 .5em .1em #00FFFF;
  border-radius: .5em;
}

#printifyEmbed > iframe {
  margin-top: 5%;
  margin-bottom: 5%;
  width: 60vw;
  height: 150vh;
  box-shadow: 0 0 .5em .1em #00FFFF;
  border-radius: .5em;
}

#footer {
  margin-top: 5%;
  url(./assets/images/rslogo2.svg)
}

/* RESPONSIVE */

/* Small devices (small devices, below 576px) */
@media (max-width: 576px) {
  .button {
    font-size: 4vw;
    padding: 4vw 1vw;
  }

  #nav {
    margin: 5% 0% 5%;
    flex-direction: row;
    gap: 1vw 10vw; /* row-gap column-gap */
  }

  #sectionHeader {
    justify-content: center;
    text-align: center;
    font-size: 5vw;
    padding-bottom: 5%;
  }

  #foreword {
    font-size: 4vw;
  }

  #aboutN8 {
    padding-bottom: 5%;
    gap: 1vw 2vw; /* row-gap column-gap */
  }

  #aboutN8 img {
    width: 24vw;
    height: 50%;
  }

#aboutV0X {
    padding-bottom: 5%;
    gap: 1vw 2vw; /* row-gap column-gap */
  }

  #aboutV0X img {
    width: 24vw;
    height: 50%;
  }

  #aboutBandTitle {
    font-size: 4vw;
  }

  #aboutBandText {
    max-width: 40ch;
    font-size: 4vw;
  }

  .blogDate {
    font-size: 4vw;
  }

  .blogPost {
    font-size: 4vw;
    margin: 1%;
    padding: 1%;
  }

  #upcomingEvents {
    font-size: 4vw;
  }

  #upcomingEvents img {
    width: 16vw;
  }

  #spotifyEmbed > iframe {
    min-width: 80vw;
  }

  #printifyEmbed > iframe {
    width: 100vw;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
  .button {
    font-size: 4vw;
    padding: 1vw 1vw;
  }

  #nav {
    margin: 5% 0% 5%;
    flex-direction: row;
    gap: 1vw 10vw; /* row-gap column-gap */
  }

  #sectionHeader {
    justify-content: center;
    text-align: center;
    font-size: 5vw;
    padding-bottom: 5%;
  }

  #foreword {
    font-size: 4vw;
  }

  #aboutN8 {
    padding-bottom: 5%;
    gap: 1vw 2vw; /* row-gap column-gap */
  }

  #aboutN8 img {
    width: 30vw;
    height: auto;
  }

  #aboutV0X {
    padding-bottom: 5%;
    gap: 1vw 2vw; /* row-gap column-gap */
  }

  #aboutV0X img {
    width: 30vw;
    height: auto;
  }

  #aboutBandTitle {
    font-size: 3vw;
  }

  #aboutBandText {
    max-width: 50ch;
    font-size: 3.5vw;
  }

.blogDate {
    font-size: 3vw;
  }

  .blogPost {
    font-size: 3vw;
    margin: 1%;
    padding: 1%;
  }

  #upcomingEvents {
    font-size: 4vw;
  }

  #upcomingEvents img {
    width: 16vw;
  }

  #spotifyEmbed > iframe {
    min-width: 80vw;
  }

  #printifyEmbed > iframe {
    width: 100vw;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
  .button {
    font-size: 3vw;
    padding: 1vw 4vw;
  }

  #sectionHeader {
    font-size: 3.5vw;
  }

  #aboutN8 {
    gap: 1vw 2vw; /* row-gap column-gap */
  }

  #aboutV0X {
    gap: 1vw 2vw; /* row-gap column-gap */
  }

  #printifyEmbed > iframe {
    width: 100vw;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
  .button {
    font-size: 3vw;
    padding: 1vw 4vw;
  }

  #sectionHeader {
    font-size: 3.5vw;
  }

  #aboutN8 {
    gap: 1vw 2vw; /* row-gap column-gap */
  }

  #aboutV0X {
    gap: 1vw 2vw; /* row-gap column-gap */
  }

  .blogDate {
    font-size: 2vw;
  }

  .blogPost {
    font-size: 2vw;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .button{
    font-size: 2vw;
    padding: 1vw 4vw;
  }

  #sectionHeader {
    font-size: 3.5vw;
  }
}