@font-face {
    font-family: 'Monaspace';
    src: url('MonaspaceNeon-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  body {
    font-family: 'Monaspace', sans-serif;
  /* background-color: rgb(0,0,0); */
  background: radial-gradient(circle, rgba(2,2,2,1) 25%, rgba(7,1,21,1) 100%);
  color: rgb(0,255,0);
  /* background-image: url('navmenu-bg.svg'); */
  }
.FJP-heading{
  color: inherit;
  letter-spacing: 5px;  
  /* width: 100%; */
  
}
.album-heading{
  color: rgba(220,20,60,0.9);

  font-size: smaller;
  letter-spacing: 3px;
  line-height: 200%;
}

/* .album-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, 
    transparent, 
    rgba(220,20,60,.3) 45%, 
    rgba(220,20,60,.3) 55%, 
    transparent);
  opacity: 0; 
  transition: opacity 1s; 

  background-size: 50%;
}

.album-heading:hover::before {
  opacity: 0.8; 
  background-size: 50%;
} */



.HAR-songtitle{
  color: rgb(220,20,60);
  letter-spacing: 2px;
  text-shadow: 
  0 0 7px rgba(220,20,60,0.4);
}
.title-separator {
  text-align: center;
  color: rgb(220,20,60);
  text-shadow: 
  0 0 7px rgba(220,20,60,0.8);
  line-height: 90%;
  margin-bottom: 0;
}

.lyrics{
  text-align: center;
  text-shadow: 
  0 0 7px rgba(0, 255, 0, 0.4);
  letter-spacing: 0.15px;
  line-height: 135%;

}

h1 a {
  color: inherit;
  text-decoration: none;
  
}

.nav-menu{
  list-style-type: none;
  position: sticky;
  top: 0px;
  font-size: largest;
  z-index: 10;
  width: 100%;
  background: radial-gradient(circle, rgba(2,2,2,1) 25%, rgba(7,1,21,1) 100%); 
  
  
  

}

.submenu {
content: '';
display: none;
position: absolute;
white-space: nowrap;
transform: scaleY(0);
margin: auto;
z-index: 11;
justify-content: center;
color: rgb(0, 255, 0); 
text-align: start;
backdrop-filter: blur(6.5px);
-webkit-backdrop-filter: blur(6.5px);
background: transparent;

} 



 
.sub-submenu {
  display: none;
  position: absolute;
  white-space: nowrap;
  transform: scaleY(0);
  left: 100%;
  top: 0;
  z-index: 11;
  justify-content: center;
  color: rgb(0, 255, 0); 
  padding: 5px;
  background-color: transparent;
  backdrop-filter: blur(6.5px);
}






/* .sub-submenu {
  display: none;
  position: absolute;
  white-space: nowrap;
  transform: scaleY(0);
  left: 100%;
  top: 0;
  z-index: 11;
  justify-content: center;
  color: rgb(0, 255, 0); 
  padding: 5px;
  background-color: transparent;
  backdrop-filter: blur(6.5px);
  background-image: url('navmenu-bg.svg');
  background-size: cover;


} */



.nav-menu ul {
  margin: auto;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0;
  border-radius: 1.5px;
  
}

.nav-menu ul li{
  list-style-type: none;
  text-decoration: none;
  font-size: 25px;
  padding-top:5px; 
  flex-grow: 1;
  text-align: center;
  letter-spacing: 1px;

}


.nav-menu a, .submenu a, .sub-submenu a {
  text-decoration: none;
  color: inherit;
  display:block;

}

.submenu a, .sub-submenu a {
  padding: 10px;
}

.hidden {
  transform: translateY(-100%); /* Slide the menu up out of view */
  transition: transform 0.3s ease-in-out;

}

.nav-menu li:hover, .submenu li:hover, .sub-submenu li:hover {
color: rgb(0, 0, 0);

 border-radius: 1.5px;
 /* background: radial-gradient(circle, rgba(0, 255, 0, 0.55) 70%, rgba(0, 255, 0, 0.4) 100%);   */
 backdrop-filter: blur(10px) !important;
 background: radial-gradient(circle, rgba(0, 255, 0, 0.55) 60%, transparent 99%);
 


}

.submenu a, .has-dropdown a{
padding-top: 3px;
padding-bottom: 3px;
}

/* Arrows */
.arrow {
width: 0.3em;
height: 0.3em;
display: inline-block;
vertical-align: middle;
border-left: 0.15em solid currentColor;
border-bottom: 0.15em solid currentColor;
/* transform: rotate(315deg); */
transform: rotate(225deg);
transition: transform 175ms ease-in-out;

}
/* Reveal  */
.nav-menu > li:hover > a + .submenu, .submenu > li:hover > a + .submenu, .submenu > li:hover > a + .sub-submenu  {
display: flex;
flex-direction: column;
transform: scaleY(1);
/* color: black; */
color: rgb(0, 255, 0);
/* background-color: black; */
/* background-color: transparent; */
/* backdrop-filter: blur(10px);  */
/* transition: 0.25s; */
transition: transform 175ms ease-in-out;
width: max-content;
}
/* ANIMATE aRROWS */
.nav-menu > li:hover > a > .arrow, .submenu > li:hover > a > .arrow {
  transform: rotate(270deg);
  /* transition: 0.35s; */
  transition: transform 175ms ease-in-out;
}

/*ALBUM PAGE*/



 .album-container { 
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  z-index: 100;
  position: relative;
  margin-top: 0;
} 

.song-list {
  transition: margin-right 1s ease-out;
  display: flex;
  justify-content: center;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  /* padding: 2%; */
  flex: 1;
  margin-top: 0;
}

.song-list.active {
  margin-right: 65%; /* Space for song-detail */
}

.song-detail {
  transition: transform 0.1s ease, opacity 1s ease-in;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0;
  transform: translateX(100%); /* Start off-screen */
  width: 50%;
  height: auto;
}

.song-detail.active {
  visibility: visible;
  opacity: 1;
  transform: translateX(0); /* Slide into view */
  margin-right: 5%;
  width: 50%;
  height: 99%;
}


.album {
  /* display: flex; */
  display:inline-block;
  justify-content: center;
  /* justify-content:space-around; */
  position: relative;
  /* position: absolute; */
  width: 100%;
  /* margin: auto; */
  /* overflow: hidden; */
  line-height: 200%;
  text-align: center;
  padding-top: 5%;
  padding-bottom: 5%;
}
@keyframes dimAndUndimAlbum {
  0% { opacity: 0; }
  60% { opacity: 0.7; }
  100%  { opacity: 0.5; }
}


.album::before {
  content: '';
  position: absolute;
  justify-content: center;
  /* position: relative; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, 
    transparent, 
    rgba(220,20,60,.35) 45%, 
    rgba(220,20,60,.35) 55%, 
    transparent);
  opacity: 0; /* Initially transparent */
  transition: opacity 1.5s; 

  background-size: 50%;
  width: 100%;
  z-index: 20;
}

.album:hover::before {
  opacity: 0.3; 
  background-size: 50%;
  z-index: 20;
  /* width: 200%; */
}

.album a {
  list-style-type: none;
  text-decoration: none;
  color: inherit;
  padding: 2%;
  font-size: larger;
  letter-spacing: 2px;
  position: relative;
  z-index: 20;  
  /* width: 200%; */
}




.har-before, .har-after {
  display: inline-flex;
  position: absolute;
  white-space: nowrap;
  z-index: 15;
}

.har-before {
  right: 50%; /* Aligns to the right of 'of' */
}

.har-after {
  left: 50%; /* Aligns to the left of 'of' */
}

.har-after, .har-before {
  transition: color 1.5s, text-shadow 1.5s !important; 
  text-shadow: 0 0 7px rgba(0, 255, 0, 0.4);
}

.album:hover .har-after, .album:hover .har-before {
  color: rgb(0, 255, 0) !important;
  text-shadow: 0 0 7px rgba(255,255,0,0.8) !important; 
}


.of-text {
  /* color: inherit !important; */
  position: inherit;
  color: rgb(0, 255, 0);
  transition: color 1.5s, text-shadow 1.5s !important; 

}
.at-text {
  color: rgba(220,20,60,0.9);
  transition: color 1.5s, text-shadow 1.5s !important; 
  text-shadow: 0 0 5px rgba(220,20,60,0.8) !important; 
}

.album:hover .of-text{
  color: rgba(220, 20, 60, 0.55) !important;
  text-shadow: 0 0 40px rgba(220, 20, 60, 1) !important; 
}



.album-heading:hover .at-text {
  color: rgba(220, 20, 60, 0.8) !important;
  text-shadow: 0 0 40px rgba(220, 20, 60, 1) !important; 
}


.album-heading-before, .album-heading-after {
  transition: color 2s, text-shadow 3s, opacity 1.5s ease-out !important; 
  text-shadow: 0 0 5px rgba(220,20,60,1) !important; 
  opacity: 0.7;
}

.album-heading:hover .album-heading-before, .album-heading:hover .album-heading-after {
  color: rgb(0, 255, 0,0.9) !important;
  text-shadow: 0 0 7px rgba(255,255,0,1) !important; 
  opacity: 1;
}

@keyframes dimAndUndim {
  0% { color: inherit; }
  60% { color: rgba(150, 255, 0, 0.4); }
  100%  { color: rgba(150, 255, 0, 0.9); }
}
/* @keyframes dimAndUndimglow {
  0% { text-shadow: none; }
  60% { text-shadow: 0 0 10px rgba(255,255,0,0.8); }
  100%  { text-shadow: 0 0 7px rgba(255,255,0,0.5); }
} */


.FJP-heading {
  text-align: center;
  position: relative;
  margin-top: 10%;
  padding-bottom: 1%;
  z-index: 20;
}

.FJP-heading a{
  transition: text-shadow 2s !important; 
}
.FJP-heading a:hover{
  text-shadow: 0 0 5px rgba(255,255,0,0.7); 
  animation: dimAndUndim 2s;
  animation-fill-mode: forwards;

}





.album-heading {
  position: relative; /* Needed for absolute positioning of pseudo-element */
  overflow: hidden; /* Prevents the extended background from being visible outside the element */
}


.album-heading::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -25%;
  right: -25%;
  bottom: -50%;
  background-image: linear-gradient(to right, 
    transparent, 
    rgba(220,20,60,.25) 35%, 
    rgba(220,20,60,.25) 55%, 
    transparent);
  opacity: 0;
  transition: opacity 3s; 
  z-index: -1; 
  background-size: 50%;
}

.album-heading:hover::before {
  opacity: 0.5;
  background-size: 50%;
}

.album-heading * {
  position: relative; /* Makes the text appear above the pseudo-element */
  z-index: 1;
}

.responsive-iframe-container {
  position: relative;
  overflow: hidden;
  padding-top: 30%;
  height: 50vh;
}

.responsive-iframe-container iframe {
  position: absolute;
  top: -90px;
  left: 0;
  width: 100%;
  height: 100%;
}