@font-face {
  font-family: amaticScRegular;
  src: url(AmaticSC-Regular.ttf);
}

@font-face {
  font-family: amaticScBold;
  src: url(AmaticSC-Bold.ttf);
}

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

html { height: 100% }

body {
  background: linear-gradient(45deg, rgb(237, 134, 8) 0 50%, rgb(239, 185, 6) 50% 100%);
  font-family: 'amaticScBold', cursive;
  /* font-size: 1.25rem; */
  height: 100%;
}

@media screen and (min-width: 979px) {
  body {
    background-attachment: fixed;
    background-image: url('jonny.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 1.875rem;
  }

  .pageContainer {
    background-color: none;
  }

  #logo {
    display: none;
  }
}

.pageContainer {
  position: relative;
  min-height: 100%;
  background-color: rgba(255, 255, 255, .55);
  display: flex;
  flex-direction: column;
  margin: 0;
}

.inner {
  margin: 0 auto;
  max-width: 980px;
}

header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#masthead {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 10px 10px 0;
  margin: 20px;
}

/* copy */
#tipJarArea {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  order: -1;

  background: white;
}

.buttonGroup a:link,
.buttonGroup a:visited {
  /* font-family: 'arial', sans-serif !important;
  font-size: .75rem;
  color: white;
  background: #169BD7;
  padding: 5px;
  text-decoration: none; */
}

.buttonGroup a:nth-child(1) {
  margin-right: 10px;
}

/* #tipJarArea {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 20px;
  margin: 0 20px;
} */

/* #tipJarArea .buttonGroup {
  display: flex;
  flex-direction: column;
  justify-content: center;
} */

h1 {
  font-family: 'amaticScBold', cursive;
  /* text-align: center;
  padding: 20px 20px 0;

  display: flex;
  flex-direction: column;
  align-items: center; */
}

#logo {
  margin-right: 10px;
}

.content {
  display: none;
}

.content.active {
  background-color: rgba(255, 255, 255, 0.66);
  display: block;
  margin: 0 20px 20px;
  padding: 20px;
}

.content.active h2::before {
  content: "Artists - ";
}

.content.active::after {
  content: "";
  clear: both;
}

.content ul {
  margin: 10px;
}

.content li {
  padding-bottom: 7px;
  /* list-style: none; */
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  margin: 20px;
}

.pagination a {
  margin: 5px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  font-family: 'amaticScBold', cursive;
  text-decoration: none;
  color: #333;
  border-radius: 3px;
}

.pagination a.active {
  background-color: #333;
  color: #fff;
}

.shadow {
  text-shadow:#c8c8c8 1px 1px 0px, #b4b4b4 0px 2px 0px, #a0a0a0 0px 3px 0px, rgba(140, 140, 140, 0.498039) 0px 4px 0px, #787878 0px 0px 0px, rgba(0, 0, 0, 0.498039) 0px 5px 10px;
}