body {
   background-color: black;
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
   --bs-gutter-x: 0;
}

svg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   z-index: -1;
   pointer-events: none;
}

@keyframes rotate {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

.out-top {
   animation: rotate 40s linear infinite;
   transform-origin: 13px 25px;
}

.in-top {
   animation: rotate 30s linear infinite;
   transform-origin: 13px 25px;
}

.out-bottom {
   animation: rotate 50s linear infinite;
   transform-origin: 84px 93px;
}

.in-bottom {
   animation: rotate 35s linear infinite;
   transform-origin: 84px 93px;
}

.center-button {
   display: flex;
   flex-direction: column;
   justify-items: center;
   align-items: center;
}

.error-message-half {
   width: 40%;
   margin: 20px auto;
   text-align: center;
   border-radius: 50px;
}

.song-form {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   border: #b5179e 1px inset;
   border-radius: 50px;
   background-color: black;
   padding: 3rem;
   margin: auto;
   width: 40vw;
   min-width: 300px;
   height: auto;
   margin: 5rem auto;
   align-items: center;
}
@keyframes gradientAnimation {
   0% {
      background-position: 0% 50%;
   }
   50% {
      background-position: 100% 50%;
   }
   100% {
      background-position: 0% 50%;
   }
}
.iframe-container {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   border-radius: 50px;
   background-color: black;
   padding: 2rem;
   margin: auto;
   width: 100%;
   min-width: 300px;
   height: auto;
   margin: 5rem auto;
   border: #b5179e 1px inset;
}

.song-buttons {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 2rem;
}
#song-details {
   color: white;
}
#new-playlist {
   color: white;
   border-radius: 50%;
   width: 3rem;
   height: 3rem;
   background-color: #f72585;
   margin: 0;
   border: none;
}

#iframe {
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 9;
   border-radius: 0;
   margin: 2rem;
}

@media screen and (max-width: 600px) {
   #iframe {
      aspect-ratio: 9 / 16;
      height: 20vh;
   }
   .iframe-container {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      border: #b5179e 1px inset;
      border-radius: 5rem;
      background-color: black;
      padding: 2rem;
      margin: auto;
      width: 100%;
      min-width: 300px;
      height: 60vh;
      margin: 5rem auto;
      flex-wrap: nowrap;
   }
}

.buttons-container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1rem;
}

.last-next-buttons {
   padding: 1rem;
   background-color: #f72585;
   color: white;
   border: 1px solid #560bad;
   border-radius: 3rem;
   cursor: pointer;
}

.last-next-buttons:hover:enabled {
   background: #b5179e;
   color: #fff;
   border-color: #f72585;
}

.last-next-buttons.disabled-btn,
.last-next-buttons:disabled {
   background: #181818 !important;
   color: #888 !important;
   border-color: #444 !important;
   cursor: not-allowed !important;
   opacity: 0.7;
}
.input {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0.5rem auto;
   padding: 0.7rem 2rem;
   border-radius: 2rem;
   border: 1px solid #560bad;
}
label {
   color: white;
}
h1 {
   color: #f72585;
}

#search-button {
   width: 30%;
   padding: 0.5rem;
   background-color: #f72585;
   color: white;
   border: none;
   border-radius: 50px;
   cursor: pointer;
}

.playlists-container-horizontal {
   display: flex;
   flex-wrap: nowrap;
   gap: 1rem;
   overflow-x: auto;
   padding: 1rem 0;
}

.playlist-card-horizontal {
   flex: 0 0 auto;
   text-align: center;
   background-color: #1a1a1a;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   transition: transform 0.2s, box-shadow 0.2s;
   cursor: pointer;
}

.playlist-button-horizontal {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   border: none;
   background: none;
   padding: 1rem;
   width: 150px;
   height: 200px;
}

.playlist-image-horizontal {
   width: 100%;
   height: 120px;
   object-fit: cover;
   border-radius: 5px;
   margin-bottom: 0.5rem;
}

.playlist-name-horizontal {
   font-size: 0.9rem;
   color: white;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}

.playlist-card-horizontal:hover {
   transform: scale(1.05);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.playlists-container-horizontal::-webkit-scrollbar {
   height: 8px;
}

.playlists-container-horizontal::-webkit-scrollbar-thumb {
   background-color: #560bad;
   border-radius: 4px;
}

.playlists-container-horizontal::-webkit-scrollbar-track {
   background-color: #1a1a1a;
}

/* Slider Tabs */
.form-slider-tabs {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
}

.slider-tab {
   padding: 10px 20px;
   margin: 0 5px;
   background-color: #007bff;
   color: white;
   border: none;
   cursor: pointer;
   border-radius: 5px;
   transition: background-color 0.3s;
}

.slider-tab.active {
   background-color: #0056b3;
}

.slider-tab:hover {
   background-color: #0056b3;
}

/* Form Content */
.form-content {
   display: none;
}

.form-content.active {
   display: block;
}