/* body */

body {
  background-color: black;
  color: black;
  font-family: "Times New Roman", Times, serif;
  margin: 0;
  overflow-x: hidden;
}


/* contact buttons */

.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-instagram {
  background: #6b088a;
  color: white;
}






/* buttons */

/* stickerbutton */
.stickerbutton {
  position: absolute;
  
  top: 51%;
  left: 51%;
  transform: translate(-50%, -50%) scale(0.7);
  -webkit-animation:grow 1s;
  animation: grow 1s;
  
  /*width: 25vw; */
}

.stickerbutton img {
  width: 100%;
  height: auto;
  display: block;


}

.stickerbutton:hover {
  filter: hue-rotate(195deg) saturate(150%);
  opacity: 0.8;
  -webkit-animation: shrink 1s;
  animation: shrink 1s;
  transform: translate(-50%, -50%) scale(0.6);
}

/* shrink animation */

@-webkit-keyframes shrink {
  from {
    transform: translate(-50%, -50%) scale(0.7);
  }
  to {
    transform: translate(-50%, -50%) scale(0.6);
  }

}


@keyframes shrink {
  from {
    transform: translate(-50%, -50%) scale(0.7);
  }
  to {
    transform: translate(-50%, -50%) scale(0.6);
  }

}

/* grow animation */

@-webkit-keyframes grow {
  from {
    transform: translate(-50%, -50%) scale(0.6);
  }
  to {
    transform: translate(-50%, -50%) scale(0.7);
  }

}


@keyframes grow {
  from {
    transform: translate(-50%, -50%) scale(0.6);
  }
  to {
    transform: translate(-50%, -50%) scale(0.7);
  }

}

/* stickerbutton */
.youtubebutton {
  position: absolute;
  
  top: 51%;
  left: 25%;
  transform: translate(-50%, -50%) scale(1.2);
  -webkit-animation:grow2 1s;
  animation: grow2 1s;
  
  /*width: 25vw; */
}

.youtubebutton img {
  width: 100%;
  height: auto;
  display: block;


}

.youtubebutton:hover {
  filter: hue-rotate(195deg) saturate(150%);
  opacity: 0.8;
  -webkit-animation: shrink2 1s;
  animation: shrink2 1s;
  transform: translate(-50%, -50%) scale(1.1);
}

/* stickerbutton */
.soundcloudbutton {
  position: absolute;
  
  top: 51%;
  left: 75%;
  transform: translate(-50%, -50%) scale(1.2);
  -webkit-animation:grow2 1s;
  animation: grow2 1s;
  
  /*width: 25vw; */
}

.soundcloudbutton img {
  width: 100%;
  height: auto;
  display: block;
}

.soundcloudbutton:hover {
  filter: hue-rotate(195deg) saturate(150%);
  opacity: 0.8;
  -webkit-animation: shrink2 1s;
  animation: shrink2 1s;
  transform: translate(-50%, -50%) scale(1.1);
}



/* shrink animation */

@-webkit-keyframes shrink2 {
  from {
    transform: translate(-50%, -50%) scale(1.2);
  }
  to {
    transform: translate(-50%, -50%) scale(1.1);
  }

}


@keyframes shrink2 {
  from {
    transform: translate(-50%, -50%) scale(1.2);
  }
  to {
    transform: translate(-50%, -50%) scale(1.1);
  }

}

/* grow animation */

@-webkit-keyframes grow2 {
  from {
    transform: translate(-50%, -50%) scale(1.1);
  }
  to {
    transform: translate(-50%, -50%) scale(1.2);
  }

}


@keyframes grow2 {
  from {
    transform: translate(-50%, -50%) scale(1.1);
  }
  to {
    transform: translate(-50%, -50%) scale(1.2);
  }

}



/* latest button */

.latest {
  position: absolute;
  top: 21.38vw;
  right: 50vw;
  transform: rotate(0deg);
  transform: scale(1.2);
}




/* drop down*/

.menu {
  display: block;
  position: relative;
  width: 200px;
}


.menu > li > a {
  color: #bb0000;
  display: block;
  text-decoration: none;
  font-size: 20px;
}

.menu > li > a:hover {
  color: #125688;
}

.dropdown > a {
  color: #bb0000;
  display: block;
  text-decoration: none;
  font-family: "Times New Roman", Times, serif;  
  font-size: 20px;
}

.dropdown > li {
  margin-top: 100px;
}


.menu .dropdown ul {
  height: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  top: 95px; /* add like 22px every time you want to add another word (edit this if this is wrong) */
  width: 100%;
  pointer-events: none;
}

.menu .dropdown:hover ul,
.menu .dropdown:focus-within ul {
  margin-top: 23px;
  height: 200px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  color: #125688;

}


/* icons for links 

.sc_icon::after {
  content: url('logo.gif');
  

}
  */


  /* beat list */

  .musiclist {
  color: #bb0000;
  margin: auto;
  width: 200px;    
  padding: 20px;
  text-align: center;
}

.soundcloud {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0.85;
  line-height: 50px;
}

.youtube {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 60px;
}

.beatsbody {
  color: #bb0000;
  margin: auto;
  width: 200px;    
  text-align: center;
}

.beatsbody a {
  color: #970c0c;
}

/* this is the popup section */

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color:#bb0000;
  font-size: 20px;
}

.popup:hover {
  color:#125688
}

.popup .popuptext {
  visibility: hidden;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  /* set bottom to -500px if you want it underneath, and comment out left
  bottom: -500px;
  */
  /* set left to 195px, and bottom to -380px if you want it to appear on the right, and comment out the bottom */
  left: 195px;
  bottom: -380px;
  margin-left:-80px;
  opacity: 0.9;

}


/* the toggle to hide and show popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 0.7s;
  animation: fadeIn 0.7s;
}



/* fade in*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  } 
  to {
    opacity: 0.9;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}