/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
h1 {
  font-family: "Mea Culpa", cursive;
  text-align: center;
  font-size: 50px;
  margin-top: 10px;
}

.subheading {
  font-family: "Mea Culpa", cursive;
  text-align: center;
  font-size: 30px;
  margin-top: -45px;
  opacity: 0.8;
}



body {
  background-image: url("https://64.media.tumblr.com/tumblr_lymp2s6tFb1qcay1ao1_500.gif");
  background-size: 700px 700px;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-color: black;
  color: gray;
  font-family: cursive;
  margin: 0;

.left-overlay {
  position: fixed;
  left: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 800px;
  z-index: 1;
  pointer-events: none;
}

.right-overlay {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  z-index: 1;
  pointer-events: none;
}

iframe {
  position: relative;
  z-index: 999;
}
/* show overlay on hover */
body:hover::before {
  opacity: 0.6;
}

.menu {
  position: fixed;
  right: 40px;
  top: 140px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 24px;

  align-items: start;
    position: relative;
  z-index: 999;
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: 220px;   /* THIS is what locks alignment */
}
.menu-item img {
  width: 130px;
  height: auto;
  display: block;
}

.menu img:hover {
  transform: scale(1.05);

  filter:
    drop-shadow(0 0 4px silver)
    drop-shadow(0 0 10px lightgray);
}
.menu a {
  text-decoration: none;
  color: silver;
}

.side-label {
  width: 80px;
  transform: rotate(90deg);

  font-family: "Luxurious Script", cursive;
  font-weight: 400;
  font-style: normal;

  font-size: 24px;
  letter-spacing: 1px;
  white-space: nowrap;

  color: silver;
}

/* MUSIC PLAYER */
.music-widget {
  position: fixed;

  top: 20px;
  left: 20px;

  width: 220px;

  background: rgba(0,0,0,0.7);

  border: 1px solid silver;
  box-shadow: 0 0 10px silver;

  padding: 10px;
  border-radius: 10px;

  z-index: 9999;
}

.music-page {
  background-image: url("images/yourgirl.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.music-thumb {
  width: 300px;

  border: 1px solid silver;

  display: block;

  margin: 40px auto;

  transition: 0.3s ease;

  box-shadow: 0 0 15px rgba(255,255,255,0.15);
}

.music-thumb:hover {
  transform: scale(1.03);

  box-shadow: 0 0 25px rgba(255,255,255,0.35);
}

.music-name {
  text-align: center;

  color: silver;

  font-size: 22px;

  margin-top: -20px;
  margin-bottom: 40px;

  letter-spacing: 1px;
}

body.about-page {
  margin: 0;
  min-height: 100vh;

  background-image:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url("images/about.gif"); /* change if you want */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  color: white;
  font-family: "Luxurious Script", cursive;
}

.left-overlay,
.right-overlay {
  z-index: 1 !important;
}

iframe,
.menu,
#menu {
  position: relative !important;
  z-index: 9999 !important;
}