@import 'https://fonts.googleapis.com/css?family=Poppins';*{margin:0;padding:0}html{height:100%}body{font-family:poppins,sans-serif;color:#fff;background-image:url(/static/images/bg1.png);background-size:cover;background-repeat:no-repeat;background-attachment:fixed}.center{margin:0 auto;text-align:center;margin-top:80px}.bio-text{font-size:16px;animation:up 2s;font-weight:500;color:white; font-family: Aldrich}.username{animation:up 2s;font-size:24px;margin-top:15px;margin-bottom:15px;font-weight:700;font-family:poppins,sans-serif}.social-icons{font-size:28px;transition:.2s ease-in-out;padding:0 2px}.social-icons:hover{transform:scale(1.4)}.pfp-image{animation:down 2s;border-radius:100%;object-fit:cover;display:block;margin-left:auto;margin-right:auto;width:150px;max-width:150px;height:150px}.container{width:600px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}.blur{background:rgba(35,37,36,.1);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(8px);-moz-backdrop-filter:blur(8px);-ms-backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.2);margin:auto;padding:30px 0;border-radius:15px;-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-ms-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s;-webkit-box-shadow:0 0 50px -5px rgba(0,0,0,.75);-moz-box-shadow:0 0 50px -5px rgba(0,0,0,.75);box-shadow:0 0 50px -5px rgba(0,0,0,.75)}@keyframes fadein{from{opacity:0}to{opacity:1}}.center,.container,.pfp-image,.username,.socials{animation:fadein 2s}
a {
    color: goldenrod;
    text-decoration: none;
}
a:hover {
  color: white;
  font-weight: bold;
}
.icon {
    transition: transform 0.2s; 
}

.icon:hover {
    transform: scale(1.2); 
}
@keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
  body {
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: 'Poppins', sans-serif;
  }

  button {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
  }

  button:hover {
    text-decoration: none;
  }

  .hidden {
    display: none;
  }

  .visible {
    display: block;
  }

  #progressContainer {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background-color: #555;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 15px;
  }

  #progressBar {
    width: 0;
    height: 100%;
    background-color: #ffffff;
    border-radius: 10px;
  }
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-right {
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
  padding: 10px;
  width: 50px;
  height: 50px
}
.top-left {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  padding: 10px;
  width: 50px;
  height: 50px
}
#imgez {
  width: 35px;
  height: 35px;
  margin-top: 15px;
  margin-right: 15px;
}
#imgez-left {
  width: 35px;
  height: 35px;
  margin-top: 15px;
  margin-left: 15px;
}
.social-icons {
    color: #e4e9ff;
  }
  .volume-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 200px;
  }
  
  .slider {
    -webkit-appearance: none;
    border-radius: 5px;
    background: rgb(158, 157, 157);
    height: 5px;
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    transform: rotate(270deg); /* Rotate to vertical */;
    margin-top: 75px
  }
    
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
  }

  #progressBar {
    width: 100%;
    height: 20px; /* Adjust the height as needed */
    background-color: #555;
    border: none;
    outline: none;
  }
  
  #progressContainer {
    margin-top: 20px; /* Add some space between the button and the progress bar */
  }
  #progressBar {
    -webkit-appearance: none;
    appearance: none;
    width: 75%;
    height: 8px;
    background-color: rgb(158, 157, 157);
    outline: none;
    opacity: 0.9;
    transition: opacity 0.15s ease-in-out;
    border-radius: 5px;
}

#progressBar:hover {
    opacity: 1;
}

/* Thumb (the draggable part) */
#progressBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

#progressBar::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}
  /* Style the file input */
  #fileInput {
    border: 3px solid white;
    background-color: transparent;
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    width: 300px; /* Adjust width */
    height: 50px; /* Adjust height */
  }

  /* Style the Get Link button */
  #uploadForm button {
    border: 3px solid white;
    background-color: transparent;
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
  }

  #uploadForm button:hover {
    background-color: rgba(255,255,255,0.1);
  }