.sort-inactive {
  color: grey;
}

/* Pad the header top and bottom by 20px*/
header {
  padding: 20px 0;
}

.light-header {
  background-color: #F0F0F0;
  color: black;
}

.light-header th {
  color: black;
}

/* Set the font family and background color for the entire body */
body {
  font-family: Georgia, serif !important;
  background-color: black !important;
}

.property {
  cursor: pointer;
  /* Make the cursor change to a pointer when hovering over the table headers */
  user-select: none;
  /* Prevent the text from being highlighted */
}

#track-form .form-row {
  display: flex;
  flex-wrap: wrap;
  /* Allows items to wrap onto the next line if space is insufficient */
}

.sort-button {
  background: none;
  border: none;
}

/* Apply border to the table */
#tracks-table {
  border: 1px solid white;
  /* White outside border */
  width: 100%;
  margin-top: 20px;
}

#track-form .form-row>div {
  flex: 1 0 26%;
  /* Distributes available space equally among the child divs */
  margin-right: 10px;
  /* Adjust the right margin between form elements */
  margin-bottom: 20px;

}

/* Style the table body content */
#tracks-table tbody {
  color: white;
  /* Set text color to white */
  background-color: black;
  /* Set background color to black */
}

/*========================navbar section================*/
/* Style for the navbar */
.navbar {
  background-color: #504e8161;
  /* Set the default background color */
  transition: background-color 0.3s ease;
  /* Add a smooth transition effect */
}

/* Style for the navbar when scrolled */
.navbar.scrolled {
  background-color: #504e81;
  /* Change the background color when scrolled */
}

/*==========================promises css===============*/
/* Style for the image container */
.img-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* Ensure the gif covers the entire container */
}

/* Style for images inside the container */
img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

/* Style for the overlay on the image */
.overlay {
  position: absolute;
  top: 20%;
  left: 15%;
  width: 70%;
  height: 65%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  text-align: center;
  backdrop-filter: blur(4px);
  background-color: #ffffff3d;
  border-radius: 22px;
}

/* Style for cards */
.card {
  width: 400px;
  border: none;
  border-radius: 14px !important;
}


/* Styles for different sections of the card */

.area1 {
  background-color: #504e81;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  padding-top: 83px !important
}

.image {
  top: -62px;
  position: relative
}

.image img {
  box-shadow: 5px 6px 6px 2px #e9ecef
}

.area2 {
  color: white;
  background-color: black;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

.name {
  font-size: 30px;
  font-weight: 800 !important;
}

/* Styles for social media icons */
.list-icons {
  display: inline-flex;
  color: #C5CAE9;
}

.list-icons li {
  list-style: none;
  padding: 12px;
  border-radius: 10px;
  width: 49px;
  margin-right: 10px;
}

.list-icons li i {
  font-size: 17px;
  color: #fff;
}

/* Styles for the footer section */
body {
  min-height: 100vh;
}

.footer {
  position: relative;
  width: 100%;
  background: #504e81;
  min-height: 80px;
  padding: 20px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Styles for social media icons and menu links in the footer */

/* About page */

.instagram {
  background: #3f729b
}

.youtube {
  background: #ff0000; 
}

.spotify {
  background: #4dc247
}

/* Footer */

.social-icon,
.menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}

.social-icon__item,
.menu__item {
  list-style: none;
}

.social-icon__link {
  font-size: 2rem;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
}

/* Hover effect for social media icons */
.social-icon__link:hover {
  transform: translateY(-3px);
  color: white;
  /* can't color the nc beats icon, so might as well keep it consistent */
}

.menu__link {
  font-size: 1.2rem;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
  font-weight: 300;
}

/* Hover effect for menu links */
.menu__link:hover {
  opacity: 1;
}

.white-bg {
  background-color: white;
}


/* Additional styles for paragraph in the footer */
.footer p {
  color: #fff;
  margin: 15px 0 10px 0;
  font-size: 1rem;
  font-weight: 300;
}

/* Styles for the wave background */
.wave {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("images/wave.png");
  background-size: 1000px 100px;
}

/* Styles for different waves in the background */
.wave#wave1 {
  z-index: 1000;
  opacity: 1;
  bottom: 0;
  animation: animateWaves 4s linear infinite;
}

.wave#wave2 {
  z-index: 999;
  opacity: 0.5;
  bottom: 10px;
  animation: animate 4s linear infinite !important;
}

.wave#wave3 {
  z-index: 1000;
  opacity: 0.2;
  bottom: 15px;
  animation: animateWaves 3s linear infinite;
}

.wave#wave4 {
  z-index: 999;
  opacity: 0.7;
  bottom: 20px;
  animation: animate 3s linear infinite;
}

/* Keyframe animation for the waves */
@keyframes animateWaves {
  0% {
    background-position-x: 1000px;
  }

  100% {
    background-positon-x: 0px;
  }
}

/* Keyframe animation for the waves */
@keyframes animate {
  0% {
    background-position-x: -1000px;
  }

  100% {
    background-positon-x: 0px;
  }
}

/* Media query for smaller screens */
@media (max-width: 767px) {
  .card {
    width: 350px;
    border: none;
    border-radius: 14px !important
  }

  .area1 {
    background-color: #504e81;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    padding-top: 83px !important
  }

  /* Styling for the image container */
  .image {
    top: -62px;
    position: relative;
  }

  /* Styling for the image inside the container */
  .image img {
    box-shadow: 5px 6px 6px 2px #e9ecef;
  }

  /* Styling for the name */
  .name {
    font-size: 30px;
    font-weight: 800 !important;
  }

  /* Styling for the social media icons list */
  .list-icons {
    display: inline-flex;
    color: #C5CAE9
  }

  /* Styling for each social media icon item */

  .list-icons li {
    list-style: none;
    padding: 12px;
    border-radius: 10px;
    width: 49px;
    margin-right: 10px
  }

  /* Styling for the social media icon */
  .list-icons li i {
    font-size: 17px;
    color: #fff;
  }

  /* Responsive styling for smaller screens */
  @media (max-width:700px) {
    .list-icons {
      display: block
    }
  }

  .overlay {
    position: absolute;
    top: 20%;
    left: 15%;
    width: 70%;
    height: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    text-align: center;
    backdrop-filter: blur(4px);
    background-color: #ffffff3d;
    border-radius: 22px;
    padding: 10px !important;
  }
}

/* Make the form vertically stacked when the size of the screen gets too small */
@media (max-width: 768px) {

  /* Adjust form layout for smaller screens */
  #track-form .form-row {
    flex-direction: column;
  }

  #track-form .form-row>div {
    margin-bottom: 10px;
  }
}