body {
  background: url(../images/bgd.png);
  color: #7c5e3a;
}

nav a,
footer p,
#mobileMenu a,
#menuBtn {
	color: #f1ebe2;
}

#mobileMenu {
	top: 64px;
    left: 0px;
    position: absolute;
    height: 170px;
    background-color: #7c5e3a;
    width: 100vw;
    z-index: 10;
	opacity: 1;
}

footer {
  background: url(../images/bottom.png);
  background-color: #7c5e3a;
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: contain;
  min-height: 200px;
  max-height: 274px;
  max-width: 100vw;
  bottom: 0px;
}

#menuBtn img {
	  width: 42px;
  height: 42px;
}

.music-logos img {
  width: 36px;
  height: 36px;
}

.logo img {
  width: 54px;
  height: 54px;
}

.quotes {
  min-height: calc(100vh - 240px);
}


@media (max-width: 639px) {
.music-logos img {
  width: 34px;
  height: 34px;
}
}


@media (max-width: 339px) {
.music-logos img {
  width: 30px;
  height: 30px;
}
}

/* Top line → rotate down */
#menuBtn.open .line:nth-child(1) {
  transform: translateY(16px) rotate(45deg);
}

/* Middle line → hide */
#menuBtn.open .line:nth-child(2) {
  opacity: 0;
}

/* Bottom line → rotate up */
#menuBtn.open .line:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}


/* Open state for menu */
#mobileMenu.open {
  opacity: 1;
  pointer-events: auto; /* make it clickable */
}

/* Closed state (default) */
#mobileMenu {
  opacity: 0;
  pointer-events: none; /* disable clicks when hidden */
}