/* cyrillic */
@font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 100;
    src: local('Product Sans Thin'), local('ProductSans-Thin'), url(https://fonts.gstatic.com/s/productsans/v9/aXL-Qz25m_FkY0KDMUoO0_IFZZxeqQrG0c9Iwyo6Zes.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 100;
    src: local('Product Sans Thin'), local('ProductSans-Thin'), url(https://fonts.gstatic.com/s/productsans/v9/aXL-Qz25m_FkY0KDMUoO0wv5rD2GOMpKNUapi_WrVSQ.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 100;
    src: local('Product Sans Thin'), local('ProductSans-Thin'), url(https://fonts.gstatic.com/s/productsans/v9/aXL-Qz25m_FkY0KDMUoO0yU-eqv6n8lOlIZB5nq_8UM.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 100;
    src: local('Product Sans Thin'), local('ProductSans-Thin'), url(https://fonts.gstatic.com/s/productsans/v9/aXL-Qz25m_FkY0KDMUoO01dBB84BqlWy1BjOnCrU9PY.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Product Sans Light'), local('ProductSans-Light'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLqAAODQ6hKuKTT6yBk7tJss.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Product Sans Light'), local('ProductSans-Light'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLjjo6743G4jyE0OWxVxhoUc.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Product Sans Light'), local('ProductSans-Light'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLhLwFvNxpkIoVzlXSkPSYkA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Product Sans Light'), local('ProductSans-Light'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLk4GofcKVZz6wtzX_QUIqsI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Product Sans'), local('ProductSans-Regular'), url(https://fonts.gstatic.com/s/productsans/v9/HYvgU2fE2nRJvZ5JFAumwZX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Product Sans'), local('ProductSans-Regular'), url(https://fonts.gstatic.com/s/productsans/v9/HYvgU2fE2nRJvZ5JFAumwaaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Product Sans'), local('ProductSans-Regular'), url(https://fonts.gstatic.com/s/productsans/v9/HYvgU2fE2nRJvZ5JFAumwT0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Product Sans'), local('ProductSans-Regular'), url(https://fonts.gstatic.com/s/productsans/v9/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Product Sans Medium'), local('ProductSans-Medium'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLlQgzSqAAUK3x4myRO5Xs-4.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Product Sans Medium'), local('ProductSans-Medium'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLvcsZFc40SCm-y1bWij9VaY.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Product Sans Medium'), local('ProductSans-Medium'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLnBhPQA-LtMjNa7swiRiShM.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Product Sans Medium'), local('ProductSans-Medium'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLs1Lch-SD8r0CsJ60meulZ8.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Product Sans Bold'), local('ProductSans-Bold'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLtkZ6ofoXFVR94fBb90XSvU.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Product Sans Bold'), local('ProductSans-Bold'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLrY42KghHoOJT8APv0kV5JI.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Product Sans Bold'), local('ProductSans-Bold'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLuIaMZP5eRGvEWe_CNIU_oY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Product Sans Bold'), local('ProductSans-Bold'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLnNuWYKPzoeKl5tYj8yhly0.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 900;
    src: local('Product Sans Black'), local('ProductSans-Black'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLhYk6kXjxbl9hCl_j54B6tY.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 900;
    src: local('Product Sans Black'), local('ProductSans-Black'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLnuJw_35fWovD_mc3Or6XdU.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 900;
    src: local('Product Sans Black'), local('ProductSans-Black'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLu8B3NNHiE7lEpFTE0KxUWk.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 900;
    src: local('Product Sans Black'), local('ProductSans-Black'), url(https://fonts.gstatic.com/s/productsans/v9/N0c8y_dasvG2CzM7uYqPLtDLwwZd-mS_8JqJ_KGXwxs.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  }

  body {
    font-family: 'Product Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-image: 
    radial-gradient(ellipse at top left, #D32F2F, transparent),
    radial-gradient(ellipse at top right, #FFA000, transparent),
    radial-gradient(ellipse at right bottom, #0288D1, transparent),
    radial-gradient(ellipse at left bottom, #388E3C, transparent),
    radial-gradient(ellipse at center, #FBC02D, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    text-shadow: none;
    -webkit-font-smoothing: antialiased; /* Glatte Kanten */
    -moz-osx-font-smoothing: grayscale;  /* Für macOS */
    user-select: none;
    position: relative; 
    background-size: 300% 300%;
    animation: moveBackground 20s infinite linear;
}

@keyframes moveBackground {
  0% {
      background-position: 0% 0%;
  }
  25% {
      background-position: 100% 0%;
  }
  50% {
      background-position: 100% 100%;
  }
  75% {
      background-position: 0% 100%;
  }
  100% {
      background-position: 0% 0%;
  }
}

.cards {
 width: 100%;
 display: row;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 20px;
 margin-top: auto;
 margin-bottom: auto;
}

h1 {
 font-size: 3em;
 margin: 0;
 text-align: center;
 color: #333;
}

#spotify-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
 overflow: hidden;
 text-align: center;
}

.spotify-card {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 32px;
 background-color: rgba(255, 255, 255, 0.6);;
 border-radius: 32px;
 width: 25vw;
 margin: 0 auto;
 gap: 16px;
 cursor: pointer;
 position: relative;
 text-align: center;
 backdrop-filter: blur(10px);
 transition: opacity 1s ease-in-out;
 opacity: 0;
}

.title-card {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 32px;
 border-radius: 32px;
 width: 25vw;
 margin: 0 auto;
 gap: 16px;
 cursor: pointer;
 position: relative;
 text-align: center;
 margin-bottom: 20px;
 background: rgba(255, 255, 255, 0.6);
 backdrop-filter: blur(10px);
}

.not-playing-card {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 32px;
 border-radius: 32px;
 cursor: pointer;
 text-align: center;
 background: rgba(255, 255, 255, 0.6);
 backdrop-filter: blur(10px);
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 position: fixed;
 margin-top: 20px;
}

.ad-card.show {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 32px;
  width: 50vw;
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  z-index: 1000;
  height: auto;
}

p {
  font-size: 3em;
  margin-block-start: 32px;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: bold;
}

.ad-video {
  overflow: hidden;
  border-radius: 16px;
}

video {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
}

.ad-card {
  display: none;
}

.cards.moved {
  margin-right: 50vw;
}

.not-playing-card.moved {
  right: 50vw;
  left: 25%;
  transform: translate(-50%, -50%);
}

.cover {
 width: 25vw;
 height: 25vw;
 background-color: black;
 background-size: cover;
 background-position: center;
 border-radius: 16px;
 margin-bottom: 16px;
}

#song-title {
 font-weight: bold;
 margin: 0;
 color: #333;
 font-size: 1.8em;
 word-wrap: break-word;
}

#artist-name {
 margin: 0;
 color: #666;
 font-size: 1.4em;
 word-wrap: break-word;
}

#login-button {
 background-color: #1db954;
 color: white;
 border: none;
 border-radius: 32px;
 padding: 10px 20px;
 font-size: 1.2em;
 cursor: pointer;
 transition: background-color 0.3s;
}

#login-button:hover {
 background-color: #1aa34a;
}

.spotify-card.show, .title-card.show, .not-playing-card.show {
 opacity: 1;
}

.not-playing-card {
 opacity: 0;
}