/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Import Google font - Reem Kufi Fun */
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi+Fun:wght@400..700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Light Mode */
:root[color-mode='light'] {
  --background: #f8f6e3;
  --text: #111111;
  --accent: #6ad4dd;
  --link: #393771;
  --rating: #f273ca;
  --menu: ;
  --tran: all 0.5s ease 0s;
  --dark: #1c2429;
  --back: #1d659f;
}

/* Dark Mode */
:root[color-mode='dark'] {
  --background: #1b1a55;
  --text: #eeeeee;
  --accent: #9290c3;
  --link: #6ff875;
  --rating: #6ff875;
  --tran: all 0.5s ease 0s;
  --dark: #1c2429;
  --back: #1d659f;
}

body {
  background-color: var(--background);
  color: var(--text);
  padding: 10px;
}

.logo {
  position: absolute;
  top: 1px;
}

.welcome {
  position: absolute;
  margin-left: 125px;
  margin-top: -30px;
}

.padding-div {
  padding: 20px 0px 0px 30px;
}

.accent {
  color: var(--accent);
}

.navbar {
  background-color: var(--background);
  min-height: 160px;
}

.nav-item {
  background-color: var(--accent);
  padding: 6px;
  margin: 10px;
  border-radius: 25px;
  box-shadow: inset -6px -4px 10px 4px rgba(0, 0, 0, 0.2);
}

.nav-link.active {
  color: var(--link) !important;
}

.hidden {
  display: none;
}

.wrapper {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 450px;
  overflow: hidden;
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset -6px -4px 10px 4px rgba(0, 0, 0, 0.2);
}
.wrapper .user-field {
  height: 65px;
  width: 100%;
  position: relative;
}
.user-field input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 17px;
  font-size: 1.3rem;
  border-radius: 5px;
  border: 1px solid #999;
}
.user-field input:focus {
  padding: 0 16px;
  border: 2px solid #4285f4;
}
.user-field i {
  right: 18px;
  top: 50%;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  position: absolute;
  transform: translateY(-50%);
}

.wrapper .login-user-field {
  height: 65px;
  width: 100%;
  position: relative;
}
.login-user-field input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 17px;
  font-size: 1.3rem;
  border-radius: 5px;
  border: 1px solid #999;
}
.login-user-field input:focus {
  padding: 0 16px;
  border: 2px solid #4285f4;
}
.login-user-field i {
  right: 18px;
  top: 50%;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  position: absolute;
  transform: translateY(-50%);
}

.wrapper .login-pass-field {
  height: 65px;
  width: 100%;
  position: relative;
}
.login-pass-field input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 17px;
  font-size: 1.3rem;
  border-radius: 5px;
  border: 1px solid #999;
}
.login-pass-field input:focus {
  padding: 0 16px;
  border: 2px solid #4285f4;
}
.login-pass-field i {
  right: 18px;
  top: 50%;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  position: absolute;
  transform: translateY(-50%);
}

.wrapper .email-field {
  height: 65px;
  width: 100%;
  position: relative;
}
.email-field input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 17px;
  font-size: 1.3rem;
  border-radius: 5px;
  border: 1px solid #999;
}
.email-field input:focus {
  padding: 0 16px;
  border: 2px solid #4285f4;
}
.email-field i {
  right: 18px;
  top: 50%;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  position: absolute;
  transform: translateY(-50%);
}
.wrapper .pass-field {
  height: 65px;
  width: 100%;
  position: relative;
}
.pass-field input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 17px;
  font-size: 1.3rem;
  border-radius: 5px;
  border: 1px solid #999;
}
.pass-field input:focus {
  padding: 0 16px;
  border: 2px solid #4285f4;
}
.pass-field i {
  right: 18px;
  top: 50%;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  position: absolute;
  transform: translateY(-50%);
}

.star:hover,
.star:has(~ .star:hover),
.star:has(:checked),
.star:has(~ .star :checked) {
  --star: #ffd900;
}

.number:hover ~ .star:has(~ .star :checked),
.number:hover ~ .star:has(:checked),
.star:hover ~ .star:has(~ .star :checked),
.star:hover ~ .star:has(:checked) {
  --star: #1c619c;
}

.number:hover ~ .star:has(~ .star :checked):after,
.number:hover ~ .star:has(:checked):after,
.star:hover ~ .star:has(~ .star :checked):after,
.star:hover ~ .star:has(:checked):after {
  clip-path: polygon(
    28% 55%,
    2% 41%,
    30% 31%,
    36% 1%,
    53% 24%,
    28% 55%,
    35% 62%,
    68% 44%,
    98% 52%,
    73% 68%,
    75% 99%,
    52% 80%,
    24% 91%,
    35% 62%
  );
}

.number:hover ~ .star:has(~ .star :checked),
.number:hover ~ .star:has(:checked),
.star:hover ~ .star:has(~ .star :checked),
.star:hover ~ .star:has(:checked) {
  background: var(--dark);
  transition: all 0.1s ease 0s;
  transition: var(--tran);
}

.star:has(:checked) {
  transition-timing-function: linear(
    0 0%,
    0 2.27%,
    0.02 4.53%,
    0.04 6.8%,
    0.06 9.07%,
    0.1 11.33%,
    0.14 13.6%,
    0.25 18.15%,
    0.39 22.7%,
    0.56 27.25%,
    0.77 31.8%,
    1 36.35%,
    0.89 40.9%,
    0.85 43.18%,
    0.81 45.45%,
    0.79 47.72%,
    0.77 50%,
    0.75 52.27%,
    0.75 54.55%,
    0.75 56.82%,
    0.77 59.1%,
    0.79 61.38%,
    0.81 63.65%,
    0.85 65.93%,
    0.89 68.2%,
    1 72.7%,
    0.97 74.98%,
    0.95 77.25%,
    0.94 79.53%,
    0.94 81.8%,
    0.94 84.08%,
    0.95 86.35%,
    0.97 88.63%,
    1 90.9%,
    0.99 93.18%,
    0.98 95.45%,
    0.99 97.73%,
    1 100%
  );
}

.star-rating {
  padding: 0vmin;
  border-radius: 25px;
  font-size: 44px;
  position: relative;
  background: var(--dark);
  margin: 6px;
  width: fit-content;
}

.stars {
  display: flex;
  align-items: center;
}

#revert {
  max-width: 40px;
  left: 297px;
}

.star {
  display: grid;
  place-items: center;
  padding: 9px;
  cursor: pointer;
  transition: var(--tran);
  background: radial-gradient(
    circle at 50% 50%,
    #1c5e98 1vmin,
    #fff0 calc(1vmin + 1px) 100%
  );
  border-radius: 10vmin;
}
.starRevert {
  display: grid;
  place-items: center;
  padding: 1vmin;
  cursor: pointer;
  transition: var(--tran);
  border-radius: 10vmin;
}

.star input,
.star::before,
.star::after {
  grid-area: star;
  width: 22px;
  height: 22px;
  margin: 2.5px;
}

.star [type='radio'] {
  appearance: none;
}

.star::before,
.star::after {
  content: '';
  width: 100%;
  height: 100%;
  clip-path: polygon(
    50% 0%,
    66% 32%,
    100% 38%,
    78% 64%,
    83% 100%,
    50% 83%,
    17% 100%,
    22% 64%,
    0 38%,
    34% 32%
  );
}

.star::after {
  transition: all ease-in-out 130ms;
  width: calc(100% - 0.25vmin);
  height: calc(100% - 0.25vmin);
  background: var(--star);
}

.number-rating:before {
  content: '0';
  font-family: 'Reem Kufi Fun';
  display: grid;
  place-items: center;
  background: #1c5e98;
  color: var(--rating);
  margin-top: 0px;
  border-radius: 100%;
  margin-left: 17.5px;
  font-size: 30px;
  width: 35px;
  height: 35px;
  align-content: center;
}

body:has(.star:nth-child(2) > input:checked)
  .star-rating
  .number-rating:before {
  content: '1';
}

body:has(.star:nth-child(3) > input:checked)
  .star-rating
  .number-rating:before {
  content: '2';
}

body:has(.star:nth-child(4) > input:checked)
  .star-rating
  .number-rating:before {
  content: '3';
}

body:has(.star:nth-child(5) > input:checked)
  .star-rating
  .number-rating:before {
  content: '4';
}

body:has(.star:nth-child(6) > input:checked)
  .star-rating
  .number-rating:before {
  content: '5';
}

body:has(.number:hover) .star-rating .number-rating:before {
  content: '0' !important;
}

body:has(.star:nth-child(2):hover) .star-rating .number-rating:before {
  content: '1' !important;
}

body:has(.star:nth-child(3):hover) .star-rating .number-rating:before {
  content: '2' !important;
}

body:has(.star:nth-child(4):hover) .star-rating .number-rating:before {
  content: '3' !important;
}

body:has(.star:nth-child(5):hover) .star-rating .number-rating:before {
  content: '4' !important;
}

body:has(.star:nth-child(6):hover) .star-rating .number-rating:before {
  content: '5' !important;
}

.number input {
  display: none;
}

.number {
  right: 0vmin;
  top: 0vmin;
  z-index: 1;
  height: 45px;
  width: 13vmin;
  position: absolute;
  cursor: pointer;
  border-radius: 100%;
}

.number:before {
  --ar: var(--rating);
  content: '';
  position: absolute;
  width: 4vmin;
  height: 4vmin;
  border-radius: 100%;
  transform: rotate(0deg);
  background: radial-gradient(
      circle at 50% 125%,
      #fff0 45%,
      var(--ar) calc(45% + 1px) 50%,
      #fff0 calc(50% + 1px) 100%
    ),
    radial-gradient(
      circle at 50% -25%,
      #fff0 45%,
      var(--ar) calc(45% + 1px) 50%,
      #fff0 calc(50% + 1px) 100%
    ),
    conic-gradient(from -45deg at 50% 60%, var(--ar) 0 25%, #fff0 0 100%),
    conic-gradient(from 135deg at 50% 40%, var(--ar) 0 25%, #fff0 0 100%);
  background-size: 100% 45%, 100% 45%, 1.75vmin 1.75vmin, 1.75vmin 1.75vmin;
  background-repeat: no-repeat;
  background-position: 0% -10%, 0% 110%, 90% 52%, 10% 46%;
  transition: var(--tran);
  opacity: 0.05;
}

.number:hover:before {
  transform: rotate(360deg);
  opacity: 1;
  border-radius: 10vmin;
}

.wrapper .content {
  margin: 20px 0 10px;
}
.content p {
  color: #333;
  font-size: 1.3rem;
}
.content .requirement-list {
  margin-top: 20px;
}
.requirement-list li {
  font-size: 1.3rem;
  list-style: none;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.requirement-list li i {
  width: 20px;
  color: #aaa;
  font-size: 0.6rem;
}
.requirement-list li.valid i {
  font-size: 1.2rem;
  color: #4285f4;
}
.requirement-list li span {
  margin-left: 12px;
  color: #333;
}
.requirement-list li.valid span {
  color: #999;
}

/* Button shimmer off */
.shimmering-btn-def {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  color: #fff;
  margin-top: 5px;
}

.shimmering-btn-def {
  background-color: gray;
  background-image: linear-gradient(
    -60deg,
    transparent 0%,
    transparent 40%,
    #ffffff44 40%,
    #ffffff44 60%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
}

/* Button shimmer on */
.shimmering-button {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  color: #fff;
  margin-top: 5px;
}

.shimmering-button {
  background-color: limegreen;
  background-image: linear-gradient(
    -60deg,
    transparent 0%,
    transparent 40%,
    #ffffff44 40%,
    #ffffff44 60%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
}
.shimmering-button {
  background-position-x: 150%;
}

.shimmering-button:hover {
  background-position-x: -150%;
  transition: background-position-x 1000ms;
}

/* Dark mode switch */
.message-overlay {
  position: absolute;
  top: 14px;
  opacity: 1;
  transition: opacity 2s ease-out;
}

.message-overlay.fade-out {
  opacity: 0;
}

.btn-bkgrd {
  --hue: 223;
  --off-hue: 3;
  --on-hue1: 123;
  --on-hue2: 168;
  --fg: hsl(var(--hue), 10%, 90%);
  --primary: hsl(var(--hue), 90%, 50%);
  --trans-dur: 0.6s;
  --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
  font-size: 18px;
  margin: 10px;
}

.switch,
.switch__input {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.switch {
  display: block;
  margin: auto;
  position: relative;
  width: 5em;
  height: 3em;
  cursor: pointer;
}
.switch__base-outer,
.switch__base-inner {
  display: block;
  position: absolute;
}
.switch__base-outer {
  border-radius: 1.25em;
  box-shadow: -0.125em -0.125em 0.25em hsl(var(--hue), 10%, 30%),
    0.125em 0.125em 0.125em hsl(var(--hue), 10%, 30%) inset,
    0.125em 0.125em 0.25em hsl(0deg, 0%, 0%),
    -0.125em -0.125em 0.125em hsl(var(--hue), 10%, 5%) inset;
  top: 0.125em;
  left: 0.125em;
  width: 4.75em;
  height: 2.75em;
}
.switch__base-inner {
  border-radius: 1.125em;
  box-shadow: -0.25em -0.25em 0.25em hsl(var(--hue), 10%, 30%) inset,
    0.0625em 0.0625em 0.125em hsla(var(--hue), 10%, 30%),
    0.125em 0.25em 0.25em hsl(var(--hue), 10%, 5%) inset,
    -0.0625em -0.0625em 0.125em hsla(var(--hue), 10%, 5%);
  top: 0.375em;
  left: 0.375em;
  width: 4.25em;
  height: 2.25em;
}
.switch__base-neon {
  display: block;
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.switch__base-neon path {
  stroke-dasharray: 0 104.26 0;
  transition: stroke-dasharray var(--trans-dur) var(--trans-timing);
}
.switch__input {
  outline: transparent;
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.switch__input:before {
  border-radius: 0.125em;
  box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 50%, 0);
  content: '';
  display: block;
  position: absolute;
  inset: -0.125em;
  transition: box-shadow 0.15s linear;
}
.switch__input:focus-visible:before {
  box-shadow: 0 0 0 0.125em var(--primary);
}
.switch__knob,
.switch__knob-container {
  border-radius: 1em;
  display: block;
  position: absolute;
}
.switch__knob {
  background-color: hsl(var(--hue), 10%, 15%);
  background-image: radial-gradient(
      88% 88% at 50% 50%,
      hsl(var(--hue), 10%, 20%) 47%,
      hsla(var(--hue), 10%, 20%, 0) 50%
    ),
    radial-gradient(
      88% 88% at 47% 47%,
      hsl(var(--hue), 10%, 85%) 45%,
      hsla(var(--hue), 10%, 85%, 0) 50%
    ),
    radial-gradient(
      65% 70% at 40% 60%,
      hsl(var(--hue), 10%, 20%) 46%,
      hsla(var(--hue), 10%, 20%, 0) 50%
    );
  box-shadow: -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 15%) inset,
    -0.125em -0.125em 0.0625em hsl(var(--hue), 10%, 5%) inset,
    0.75em 0.25em 0.125em hsla(0deg, 0%, 0%, 0.8);
  width: 2em;
  height: 2em;
  transition: transform var(--trans-dur) var(--trans-timing);
}
.switch__knob-container {
  overflow: hidden;
  top: 0.5em;
  left: 0.5em;
  width: 4em;
  height: 2em;
}
.switch__knob-neon {
  display: block;
  width: 2em;
  height: auto;
}
.switch__knob-neon circle {
  opacity: 0;
  stroke-dasharray: 0 90.32 0 54.19;
  transition: opacity var(--trans-dur) steps(1, end),
    stroke-dasharray var(--trans-dur) var(--trans-timing);
}
.switch__knob-shadow {
  border-radius: 50%;
  box-shadow: 0.125em 0.125em 0.125em hsla(0deg, 0%, 0%, 0.9);
  display: block;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: 2em;
  height: 2em;
  transition: transform var(--trans-dur) var(--trans-timing);
}
.switch__led {
  background-color: hsl(var(--off-hue), 90%, 70%);
  border-radius: 50%;
  box-shadow: 0 -0.0625em 0.0625em hsl(var(--off-hue), 90%, 40%) inset,
    0 0 0.125em hsla(var(--off-hue), 90%, 70%, 0.3),
    0 0 0.125em hsla(var(--off-hue), 90%, 70%, 0.3),
    0.125em 0.125em 0.125em hsla(0deg, 0%, 0%, 0.5);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0.25em;
  height: 0.25em;
  transition: background-color var(--trans-dur) var(--trans-timing),
    box-shadow var(--trans-dur) var(--trans-timing);
}
.switch__text {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}
.switch__input:checked ~ .switch__led {
  background-color: hsl(var(--on-hue1), 90%, 70%);
  box-shadow: 0 -0.0625em 0.0625em hsl(var(--on-hue1), 90%, 40%) inset,
    0 -0.125em 0.125em hsla(var(--on-hue1), 90%, 70%, 0.3),
    0 0.125em 0.125em hsla(var(--on-hue1), 90%, 70%, 0.3),
    0.125em 0.125em 0.125em hsla(0deg, 0%, 0%, 0.5);
}
.switch__input:checked ~ .switch__base-neon path {
  stroke-dasharray: 52.13 0 52.13;
}
.switch__input:checked ~ .switch__knob-shadow,
.switch__input:checked ~ .switch__knob-container .switch__knob {
  transform: translateX(100%);
}
.switch__input:checked ~ .switch__knob-container .switch__knob-neon circle {
  opacity: 1;
  stroke-dasharray: 45.16 0 45.16 54.19;
  transition-timing-function: steps(1, start), var(--trans-timing);
}

/* Scrolling cards */
.card {
  padding: 100px;
  border-radius: 50px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background-color: var(--accent);
}

.card header {
  color: var(--text);
  width: 100%;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
}

.header-playlist .header-song .user-header-playlist {
  width: 100%;
  word-wrap: break-word;
  position: relative;
  margin: 0;
  display: flex;
}

.playlist {
  display: flex;
  flex-direction: row;
  gap: 4rem;
  justify-content: center;
}

.playlists {
  display: flex;
  flex-direction: row;
  gap: 4rem;
}

.user-card {
  display: flex;
  align-items: start !important;
}

.card li {
  min-width: 170px;
  min-height: 170px;
  top: -85px;
  left: -85px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

ul,
ol {
  list-style-type: none;
  padding-left: 0;
}

.scroller {
  padding-top: 150px;
  max-width: 1280px;
  outline: 3px solid lime;
}
.scroller__inner-wrapper {
  padding: 1rem 0;
  display: flex;
  gap: 4rem;
}
.scroller__inner {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
}
.scroller__inner a {
  max-width: 100%;
}
.scroller[data-animated='true'] {
  overflow: hidden;
  --webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.scroller[data-animated='true'] .scroller__inner {
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duratoin, 100s)
    var(--_animation-direction, forwards) linear infinite;
}
.scroller[data-animated='true']:hover .scroller__inner {
  animation-play-state: paused;
}
.scroller[data-duration='fast'] {
  --_animation-duratoin: 40s;
}
@keyframes scroll {
  to {
    transform: translate(-1880px);
  }
}

.playlist-selection {
  display: flex;
  flex-direction: row;
}

#name-of-list {
  width: 111px;
}

/* Responsiveness */
@media screen and (max-width: 990px) {
  body,
  .wrapper {
    padding: 15px;
  }
  .wrapper .pass-field {
    height: 55px;
  }
  .pass-field input,
  .content p {
    font-size: 1.15rem;
  }
  .pass-field i,
  .requirement-list li {
    font-size: 1.1rem;
  }
  .requirement-list li span {
    margin-left: 7px;
  }

  /* Burger Navigation*/

  .navbar-button {
    display: block;
    height: 40px;
    width: 100%;
    cursor: pointer;
  }

  .navbar-toggler {
    border-color: var(--accent);
    border-width: 10px;
    padding: 5px;
    background-color: var(--accent);
  }

  .navbar-toggler:focus {
    outline: transparent !important;
    box-shadow: unset !important;
  }

  button:focus:not(:focus-visible) {
    outline: transparent !important;
  }

  .navbar nav {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .navbar-nav {
    position: relative;
    flex-direction: row;
    justify-content: center;
  }

  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background-color: var(--accent);
    width: 100%;
    padding: 10px 0;
  }

  .navbar nav ul {
    overflow: hidden;
    height: 0;
  }

  .navbar nav ul.open {
    height: auto;
  }
  .navbar nav ul li {
    text-align: center;
    width: 100%;
    margin: 0;
  }

  .navbar nav ul li a {
    color: #fff;
    padding: 10px;
    border-bottom: 1px solid #404040;
    display: block;
    margin: 0;
  }

  .nav-item {
    display: block;
    padding: 10px;
    background-color: var(--accent);
    border-radius: 25px;
    max-width: 200px;
  }

  /* Dark mode switch */
  .message-overlay {
    top: 67px;
    opacity: 1;
    transition: opacity 2s ease-out;
  }

  .container_fluid {
    display: flex;
  }

  .playlist-selection {
    display: flex;
    flex-direction: column;
  }
}

@media only screen and (max-width: 1313px) {
  .playlist-selection {
    display: flex;
    flex-direction: column;
  }

  #name-of-list {
    width: 111px;
  }
}