body {
    font-family: 'Polymath', monospace;
    background: linear-gradient(to right,rgb(91, 103, 182),rgb(113, 82, 23));
    background-size: 200% 200%; /* Double the width of the background to enable movement */
    animation: gradientMove 5s linear infinite;
    font-weight: 400;
    color: blue;  
}

@keyframes gradientMove {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}

.navBar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 10px;
  margin-bottom: 15px;
  gap: 150px;

}

.navLinks a {
  text-decoration: none;
  margin-left: 10px;
  margin-right: 10px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  justify-content: space-around;  /* Adjusts spacing evenly */
  align-items: center;
}

.menu1 {
  background: rgba(234, 234, 234, 0.2);
  box-shadow:rgb(173, 207, 255, 0.5) 0 -12px 7px inset;
  border-radius: 30px;
  padding: 5px;
}

.menu2 {
  background: rgba(234, 234, 234, 0.2);
  box-shadow:rgb(173, 207, 255, 0.5) 0 -12px 7px inset;
  border-radius: 30px;
  padding: 5px;
}

.menu3 {
  background: rgba(234, 234, 234, 0.2);
  box-shadow:rgb(173, 207, 255, 0.5) 0 -12px 7px inset;
  border-radius: 30px;
  padding: 5px;
}

.menu4 {
  background: rgba(234, 234, 234, 0.2);
  box-shadow:rgb(173, 207, 255, 0.5) 0 -12px 7px inset;
  border-radius: 30px;
  padding: 5px;
}

.menu1:hover, .menu2:hover, .menu3:hover, .menu4:hover {
  background-color:rgb(255, 255, 255);
  box-shadow: #ADCFFF 0 -12px 7px inset;
  transform: scale(1.05);
  color: black;
}

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    color: black;

  }

  .buttons {
    margin: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 30px;
  }

  #speak-btn, #pause-btn, #rest-btn {
  appearance: none;
  border-radius: 30em;
  border-style: none;
  box-shadow: #ADCFFF 0 -12px 7px inset;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.24px;
  margin: 0;
  outline: none;
  padding: .5rem 1rem;
  quotes: auto;
  text-align: center;
  text-decoration: none;
  transition: all .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  z-index:5;
  }

  #speak-btn:hover, #pause-btn:hover, #rest-btn:hover {
    background-color:rgb(255, 255, 255);
    box-shadow: #ADCFFF 0 -12px 7px inset;
    transform: scale(1.05);
    z-index:5;
  }
  
  #speak-btn:active, #pause-btn:active, #rest-btn:active {
    transform: scale(1.025);
    background-color:rgb(255, 255, 255);
    z-index:5;
  }
  

  .tag {
    display: flex;
    bottom: 10px; /* Keeps the element 10px from the bottom */
    left: 50%; /* Centers horizontally based on the viewport */
    justify-content: center;
    align-items: center;
    margin: 0;
    font-size: 9px;
    text-align: center;
}



  #file-input {
    margin: 10px;
    z-index:5;
    padding: 7px;
    background: rgba(234, 234, 234, 0.2);
    box-shadow:rgb(173, 207, 255, 0.5) 0 -12px 7px inset;
    border-radius: 30px;
    font-size: 14px;
    color: black;
    width: 75%;
    transition: all .15s;
    user-select: none;
   -webkit-user-select: none;
    touch-action: manipulation;
    display: inline-block;
    cursor: pointer;

  }

  #file-input:hover,#voice-select:hover {
    background-color:rgb(255, 255, 255);
    box-shadow: #ADCFFF 0 -12px 7px inset;
    transform: scale(1.03);
    z-index:5;
  }


  #text-output {
    margin: 10px;
    padding: 20px;
    max-width: 1000px;
    max-height: 200px;
    overflow-y: auto;
    width: 75%;
    border-radius: 30px;
    background: rgba(234, 234, 234, 0.2);
    box-shadow:rgb(173, 207, 255, 0.5) 0 -12px 7px inset;
    z-index:5;
  }
  #progress {
    margin: 10px;
    font-size: 14px;
    z-index:5;
  }
  #voice-select {
    margin: 10px;
    z-index:5;
    padding: 7px;
    background: rgba(234, 234, 234, 0.2);
    box-shadow:rgb(173, 207, 255, 0.5) 0 -12px 7px inset;
    border-radius: 30px;
    font-size: 14px;
    color: black;
    width: 75%;
    transition: all .15s;
    user-select: none;
   -webkit-user-select: none;
    touch-action: manipulation;
    display: inline-block;
    cursor: pointer;
    border: none;
  }

  .coverLetter {
    display: inline-block;
    padding: 2px 30px;
    margin-bottom: 10px;
    width: 90%;
    justify-content: center;

  }

  .coverLetter > h1 {
    font-weight: 900;
    color: white;
  }

  .coverLetter > p {
    color: white;
  }

  .stop {
    height: 30px;
    align-items: center;
  }

  .play {
    height: 30px;
    align-items: center;
  }

  .pause {
    height: 30px;
    align-items: center;
  }

  .alert {
    width: 80%;
    font-size: 12px;
    opacity: .90;
  }

  .disabled-button {
    pointer-events: none;  /* Prevents clicking and hovering */
    opacity: 0.5;         /* Makes it look inactive */
    cursor: default;      /* Changes cursor to default */
}

  .modal-content {
      background: rgba(234, 234, 234, 0.7); /* Make it slightly transparent */
      box-shadow: rgba(173, 207, 255, 0.7) 0 -12px 7px inset;
      backdrop-filter: blur(10px); /* Apply the blur effect */
      border-radius: 10px; /* Optional: Adds rounded corners */
      border: 1px solid rgba(255, 255, 255, 0.2);
      color:black;
  }

  .modal {
    z-index: 1050; /* Bootstrap default */
    color: black;
}
.modal-backdrop {
    z-index: 1040; /* Ensures backdrop is behind modal */
}

  img {
    width: auto;
    height: 50vh;
    padding: 0px;
    margin-top: 10px;
    display: flex;
    justify-content: center;

  }

  #particles-js {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100vh;
    z-index: -1; /* Moves particles behind everything */
    overflow: hidden;
  }
  @media screen and (max-width: 480px) {
    body {
        font-size: 14px; /* Reduce font size for smaller screens */
    }

    .container {
        padding: 5px; /* Add smaller padding */
    }

    video {
        height: auto;
        max-height: 175px; /* Limit video height for smaller screens */
    }

    .buttons {
        flex-direction: row; /* Stack buttons vertically */
        gap: 20px; /* Reduce gap between buttons */
    }

    .tag {
        font-size: 8px; /* Smaller font size for tags */
        bottom: 5px; /* Adjust position for smaller screens */
    }

    #file-input,
    #text-output,
    #voice-select {
        width: 85%; /* Ensure full width */
        font-size: 12px; /* Adjust font size */
    }

    #text-output {
        max-height: 100px; /* Reduce max height for smaller screens */
    }

    #speak-btn, #pause-btn, #rest-btn {
        font-size: .90rem;
        padding: .25rem 1rem;
      }

    h1 {
        font-size: 20px;
    }

    .coverLetter > p {
        font-size: 10px;
    }

    .coverLetter {
        width: 100%;
    }

    .stop {
        height: 20px;
        align-items: center;
      }
    
      .play {
        height: 20px;
        align-items: center;
      }
    
      .pause {
        height: 20px;
        align-items: center;
      }
      .alert {
        width: 80%;
        font-size: 10px;
      }

      img {
        width: 75%;
        height: 20vh;
        padding: 0px;
        margin-bottom: 20px;
      }

      .navBar {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px;
        margin-bottom: 15px;
        gap: 10px;
      
      }

      .navLinks a {
        text-decoration: none;
        margin-left: 10px;
        margin-right: 10px;
        color: white;
        font-size: 12px;
        font-weight: 700;
        justify-content: space-around;  /* Adjusts spacing evenly */
        align-items: center;
      }

    
}