/* General Elements: */
main {
  background-color: grey;
}

h1 {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  
  font-family: Propaganda;
  font-size: 320%
}

h2 {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  
  font-family: Propaganda;
  font-size: 100%
}

h3 {
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 30px;
  
  font-family: Propaganda;
  font-size: 150%;
  color: black;
}

p {
  color: black;
  font-family: Deja Vu;
  font-size: 110%;
  text-align: left;
  padding-left: 200px;
  padding-right: 200px;
  line-height: 1.5
}

nav {
  display: inline-block;
  margin-top: 0px;
  margin-bottom: 10px;
}

nav ul {
  margin: 0;
  padding: 10px;
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 20px;
  margin-left: 20px;
  
  font-family: Propaganda;
  font-size: 130%;
  color: white;

}

nav img {
  filter: invert(1);
  height: 60px;
  width: auto;
}

#spotlight {
  position: relative;
  float: right;
  width: 38%;
}

#spotlight_img {
  display: block;
  margin: 0px auto 10px auto;
  width: 400px;
  border: 6px ridge lightgrey;
}

#info {
  position: fixed;
  top: 0;
  left: 0;
  width: 60%
}

.hover-block {
  width: 100%;
  height: 25vh;
  
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0px solid black;
  border-radius: 0px;
  transition: all 0.3s ease; /* Smooth transition */
  overflow: scroll;
  position: relative; /* To position the text layers */
  margin: auto;
  margin-top: 0px;
  
}

#listen-block {
  background-color: black;
  background-image:url(media/jamnet_2024-30.jpg);
  background-repeat: no-repeat;
  background-size: 940px;
  background-position: 100% 30%;
}
#about-block {
  background-color: black;
  background-image:url(media/Self_Portrait2.png);
  background-repeat: no-repeat;
  background-size: 500px;
  background-position: -10% 25%;
}
#contact-block {
  background-color: #bdbdbd;
  background-image:url(media/BWmime8-extend.jpg);
  background-repeat: no-repeat;
  background-size: 930px;
  background-position: 80% 10%;
}
#more-block {
  background-color: black;
  background-image:url(media/pkgallery4-flip.jpg);
  background-repeat: no-repeat;
  background-size: 900px;
  background-position: -300% 48%;
}


/* The text that appears before hover */
#listen-text, #about-text, #contact-text, #more-text {
  text-align: center;
  position: absolute;
  
  font-family: Propaganda;
  color: white;
  font-size: 600%;
  
  transform: translateX(0) translateY(0);
  transition: transform 0.3s ease, font-size 0.3s ease;
}
/* When hovered, initial text disappears and hover text appears */
.hover-block:hover #listen-text, .hover-block:hover #about-text {
  transform: translateX(-62%) translateY(-80%);
  font-size: 300%;
}
.hover-block:hover #contact-text {
  transform: translateX(-51%) translateY(-80%);
  font-size: 300%;
}
.hover-block:hover #more-text {
  transform: translateX(-67%) translateY(-80%);
  font-size: 300%;
}

/* The text that appears on hover */
.hover-text {
  opacity: 0; /* Hidden by default */
  color: white;
  font-size: 18px;
  text-align: center;
  position: absolute;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  
  
}

a:link {
  animation: floater 2s linear 1s infinite alternate;
  
  color: white;
}

a:visited {
  animation: floater 2s linear 1s infinite alternate;
  
  color: white;
}

@keyframes floater {
  0% {
    transform: translateY(0) rotate(0deg); /* Corrected the syntax here */
  }
  100% {
    transform: translateY(-5px) rotate(-10deg); /* Corrected the syntax here */
  }
}

.hover-block:hover .hover-text {
  opacity: 1; /* Hover text becomes visible */
}


/*Other Pages:*/
form {
  text-align: center;
   
}




/* All fonts go here: */

@font-face {
  font-family: "Propaganda";
  src: url("/fonts/propaganda.ttf") format("truetype");
}
@font-face {
  font-family: "Deja Vu";
  src: url("/fonts/dejavusans-bold.ttf") format("truetype");
}

/* If you need to change a div size, you can use this code here: */
/*#listen-block:hover {*/
/*  width: 100%; */
/*  height: 72vh;  */
/*}*/
/*#about-block:hover {*/
/*  width: 100%;  */
/*  height: 50vh; */
/*}*/