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

body {
  background: rgb(231, 227, 215);
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
.header-tunes {
  position: relative;
  padding-bottom: 3rem;
}

.title,
.description {
  font-size: 1.5rem;
}

.title {
  font-family: "Economica", sans-serif;
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 1rem 0;
  background: rgb(255, 233, 220);
}

.title-text {
  text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.25);
}

.nav-name {
  text-shadow: 0.08rem 0.08rem 0.08rem rgba(0, 0, 0, 0.15);
}

.name,
.group {
  text-shadow: 0.08rem 0.08rem 0.08rem rgba(0, 0, 0, 0.1);
}

.title,
.title-text a,
.nav-item,
.nav-item a,
.resource-content,
.dropdown-item {
  text-decoration: none;
  list-style: none;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(247, 226, 181);
  box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.15);
}

.nav a,
h3 {
  font-size: 1.25rem;
  font-family: "Economica", sans-serif;
}

.nav-item,
.img,
.text,
.resources,
.article-content,
.description {
  padding: 1rem;
}

.articles {
  justify-items: center;
}

.sub-heading {
  padding: 0.5rem;
}

.tunes-week {
  margin: 2rem 1rem 2rem;
}

.tunes-list {
  margin-top: 2rem;
}

.nav a:hover,
.group:hover,
.title a:hover,
.subject a:hover,
.text a:hover,
.tune-name a:hover,
.resource-content a:hover {
  color: rgb(104, 102, 102);
  cursor: pointer;
}

.img {
  height: 75vh;
  width: 100%;
  object-fit: cover;
  margin-top: 9rem;
  border-radius: 1.5rem;
}

.cc-home {
  margin: 0 2rem;
}

.cc-tunes,
.cc-resources {
  margin: 1rem 2rem 2rem;
}

.container-content {
  max-width: 50rem;
  background: rgb(253, 251, 245);
  border-radius: 0.5rem;
  box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
}

.container {
  padding-bottom: 3rem;
}

.tuneDescription {
  margin-top: calc(20vh);
  padding: 2rem 3rem;
}

.sheetMusicContainer {
  margin: 0 auto;
  padding: 1rem;
  max-width: 50rem;
}

.vidwrapper,
.musicPlayer {
  width: 80%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
}

.vidcontainer {
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

.vidcontainer iframe {
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.img-tune {
  width: 100%;
  object-fit: cover;
  /* margin: 0 auto;
  padding: 1rem;*/
  border-radius: 0.5rem;
  box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
  /* margin-top: calc(18vh); */
}

.name {
  font-size: 1.75rem;
  font-family: "Economica", sans-serif;
}

.name,
.resource-content {
  margin-bottom: 1rem;
}

.dropdown {
  background: rgb(247, 226, 181);
  position: absolute;
  z-index: 999;
  border-radius: 0.35rem;
  box-shadow: 0 0.2rem 0.1rem rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}

.dropdown-menu {
  position: relative;
  left: -1.25rem;
}

.dropdown-item {
  margin: 1.25rem;
}

.dropdown-item a {
  font-size: 1rem;
  font-family: inherit;
}

li:hover .dropdown {
  display: block;
  top: 100%;
  left: 0;
  opacity: 0;
  transform: scale(1, 1);
  opacity: 1;
  transition: opacity 150ms ease-in-out 150ms;
}

.group,
.tune-group {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 550;
  font-family: Georgia, "Times New Roman", Times, serif;
  text-decoration: none;
}

.centered-content,
.tuneDescription {
  text-align: center;
}

.subject a,
.text,
.tune-name,
.resources,
.article-content a {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.tune-name {
  list-style: none;
  text-align: center;
  padding: 0.3rem 0.5rem;
}

@media screen and (min-width: 48rem) {
  .container-content {
    box-shadow: 0.8rem 0.8rem 0.8rem rgba(0, 0, 0, 0.15);
  }

  .articles {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    font-size: 2rem;
  }

  .nav a {
    font-size: 1.75rem;
  }

  .dropdown-item a {
    font-size: 1rem;
  }

  .img {
    margin-top: calc(22vh);
  }

  .container {
    margin: 0 1rem;
  }

  .tuneDescription {
    padding-top: 4rem;
  }
}

@media screen and (min-width: 53.75rem) {
  .container-content {
    margin: 0 auto;
  }

  .img {
    height: 65vh;
    margin-top: calc(23vh);
  }
}