@media only screen and (min-width: 700px) {
  section#Purple.non-text {
    background: radial-gradient(
      circle at top,
      transparent,
      transparent 20%,
      hsla(var(--color-purple-a), 0.9) 99%
    );

    article h1 {
      margin: 0;
      padding: 0;
      white-space: nowrap;
    }
  }

  section#Purple.non-text article {
    margin: 20px;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  form#Search-bar {
    max-width: 60vw;
    width: 100%;
    margin-left: 10px;

    label {
      font-size: 0.75rem;
      padding-left: 20px;
      margin: 0;
      color: var(--color-gray-450);
    }

    div {
      display: flex;
      width: 100%;
      box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      margin-bottom: 2px;
    }

    input {
      width: 100%;
      box-shadow: inset 0 0 5px 5px hsla(0, 0%, 10%, 1);
      margin: 0;
      background-color: var(--color-gray-800);
      border: var(--glass-border);
      color: var(--color-white);
      border-radius: 10px 0 0 10px;
      padding: 0.3rem 0.5rem;
      padding-bottom: 2.5px;
      font-family: inherit;
      font-size: 0.75rem;
      resize: none;

      &::placeholder {
        color: var(--color-gray-600);
      }

      &:focus {
        background-color: var(--color-gray-750);
        box-shadow: inset 0 0 5px 5px hsla(0, 0%, 10%, 0.3);
        outline: none;

        &::placeholder {
          color: var(--color-gray-500);
        }
      }
    }

    button {
      padding: 0 20px;
      margin: 0;
      border-radius: 0 10px 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #0d400a;
      border: var(--glass-border);
      color: var(--color-white);
      cursor: pointer;
      user-select: none;

      &:focus,
      &:hover {
        background-color: #11660e;
      }

      img {
        filter: invert(1);
      }
    }
  }

  div#Deck {
    margin: 40px 10px 25px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 25px;
    justify-content: center;

    .card {
      text-decoration: none;
      border: var(--glass-border);
      border-radius: 10px;
      flex: 1 1 290px;
      display: flex;
      justify-content: center;
      max-width: 290px;
      height: 400px;
      overflow: hidden;
      transition: transform 0.3s ease-out;
      will-change: transform;
      background: linear-gradient(to bottom, hsl(0, 0%, 6%), hsl(0, 0%, 8%));
      box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.5);
      cursor: pointer;
      align-items: center;
      font-size: 1.2rem;
      color: hsla(var(--color-green-light-a), 0.5);
      font-family: var(--font-mono);

      img {
        min-width: 100%;
        min-height: 100%;
        filter: brightness(0.8);
        object-fit: cover;
      }

      &:has(#SpotifyWidget) {
        align-items: flex-start;
      }

      &:hover,
      &:focus-visible {
        transform: scale(1.06);
        z-index: 1;
        border: 0.25px solid rgba(255, 255, 255, 0.4);

        img {
          filter: brightness(1);
        }
      }
      &:hover::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
        box-shadow: inset 0 0 50px 8px hsla(var(--color-green-light-a), 0.2);
      }
    }
  }

  img#SpotifyWidget,
  img#SpotifyWidgetPlaceholder {
    border-radius: 20px;
    background-color: #121212;
    max-width: 290px;
    height: 102.5%;
    position: absolute !important;
  }

  img#SpotifyWidgetPlaceholder {
    height: 101% !important;
    z-index: -1;
  }

  hr {
    color: hsla(var(--color-gray-100-a), 0.4);
    border: 0.5px solid;
    border-radius: 100%;
  }
}