/* Place your CSS styles in this file */


/* Create a Parallax Effect */
.bgimg-format{
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('./assets/Music-BG.jpeg');
  min-height: 100%;
} 
.bgimg-2 {
  background-image: url('./assets/12633362-girl-4650279_1920.jpg');
  min-height: 100%;
} 
.parallax-content {
  height: 400px;
  position: relative;
}
.vertical-center {
      display: flex;
      flex-direction: column; /* Stack children vertically */
      justify-content: center; /* Center children vertically */
      align-items: center; /* Center children horizontally */
      /* Keep the existing absolute positioning styles if they are needed for the container itself */
      position: absolute;
      top: 50%; /* Or your desired top value */
      left: 0; /* Or your desired left value */
      transform: translate(0, -50%); /* Or your desired transform */
      width: 100%; /* Ensure it takes full width if needed */
      height: 100%; /* Ensure it takes full height if needed to center children within it */
    }
*, .sans-font{
  font-family: "Montserrat", sans-serif;
}
h1, h2, h3, h4, h5, .serif-font{
  font-family: "EB Garamond", serif;
}

.post-author {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 1.5rem;
}

.post-author-nostyle {
  line-height: 1;
}

.sans-font-i{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}
.serif-font-i {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-text-1 {
  letter-spacing: 5px;
  text-shadow: 4px 4px 4px grey;
  width: fit-content; margin: 0px auto 0px auto;
}

.hero-text-2 {
  letter-spacing: 5px;
  text-shadow: 4px 4px 4px grey;
  font-size: 2rem;
}

/* MusicPlayerCSS */
i#playPauseSong, i#restartSong, i#closePlayer {
  cursor: pointer;
}
i#playPauseSong:hover, i#restartSong:hover, i#closePlayer:hover {
  color: #ddd;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
            }
.truncate {
    white-space: nowrap;      /* Prevents text from wrapping to the next line */
    overflow: hidden;         /* Hides the overflowing text */
    text-overflow: ellipsis;  /* Displays an ellipsis (...) to signify truncated text */
    max-width: 165px;         /* Defines the width of the container */
    display: block;           /* Ensures the above properties work correctly */
            }
#songSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: ghostwhite;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.material-icons {
      vertical-align: middle; /* Aligns the icon to the middle of the text */
      /* You might need to adjust font-size or line-height for finer control */
      font-size: 40px;
      text-decoration: none;
      color: black;
      cursor: pointer;
    }

    .vertical-align-middle {
      vertical-align: middle;
    }
    .material-icons:hover {text-shadow: 0px 0px 5px grey;}

    .hidden {
      display: none;
    }