* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      /* Fonts */
      --font-body: 'Roboto', sans-serif;
      --font-title: 'Sarpanch', sans-serif;
      --font-button: 'Playfair Display', serif;

      /* Colors */
      --color-text-main: #000;
      --color-shadow-light: #dcd8f6;
      --color-shadow-dark: #a39fcd;

      /* Button Default State */
      --color-button-text: #e2f8de;
      --color-button-bg: rgb(185, 182, 104, .6);
      --color-button-border: #b8f1bc;
      --color-button-shadow: rgba(0, 0, 0, 0.8);
      --color-button-text-shadow: rgba(0, 0, 0, 0.5);
      --color-svg-shadow: rgba(37, 36, 34, 0.8);

      /* Button Hover State */
      --color-button-text-hover: #dddd0e;
      --color-button-bg-hover: rgba(240, 238, 170, 0.6);
      --color-button-text-shadow-hover: rgba(50, 55, 47, 0.5);
    }

    body, html {
      height: 100%;
      font-family: var(--font-body);
      color: var(--color-text-main);
      background: url('img/bg-torc.jpg') no-repeat center center/cover;
      /* Create a new stacking context so z-index on ::before works correctly */
      overflow: hidden; /* Prevent scrolling on the page */
      isolation: isolate;
    }

    /* Ripple effect element */
    body::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 250vmax; /* Large enough to cover the screen */
      height: 250vmax;
      border-radius: 50%;
      /* Start scaled down and centered */
      transform: translate(-50%, -50%) scale(0);
      /* The filter that creates the distortion on the background */
      backdrop-filter: blur(4px) brightness(1.1);
      /* Animation for the ripple effect */
      transition: transform 0.2s ease-out; /* This makes the mouse-off effect very quick */
      pointer-events: none; /* Make sure it's not clickable */
      z-index: -1; /* Place it behind the content but in front of the body's background */
    }

    .station-info {
      position: absolute;
      top: 2rem;
      right: 2rem;
      display: flex;
      flex-direction: row;
      align-items: center; /* Vertically center logo and text */
      text-align: left;
    }

    .station-info img {
      width: 70px; /* Set a specific width for the logo */
      height: auto; /* Maintain aspect ratio */
      margin-right: 1rem;
      filter: drop-shadow(2px 2px 0 var(--color-shadow-light));
    }

    .station-text{
        border-left: solid 1px var(--color-text-main);
        padding-left: 2rem;
    }

    .station-text h1 {
      font-family: var(--font-title);
      font-weight: 800;
      font-size: 3rem;
      margin-bottom: 0.2rem;
      text-shadow: 1px 2px 0 var(--color-shadow-dark);
    }

    .station-text h2 {
      font-weight: 400;
      font-size: .75rem;
      color: var(--color-text-main);
      text-shadow: 1px 1px 0 var(--color-shadow-light);
    }

    .content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .listen-button {
      font-family: var(--font-button);
      font-weight: 400;
      font-style: italic;
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 2rem;
      color: var(--color-button-text);
      background-color: var(--color-button-bg);
      padding: 1rem 3rem;
      border: 1px solid var(--color-button-border);
      border-radius: 2px;
      text-decoration: none;
      transition: background-color 0.3s, color 0.3s, transform 0.3s ease-out;
      text-shadow: 2px 2px 2px var(--color-button-text-shadow);
      filter: drop-shadow(4px 4px 2px var(--color-button-shadow));
    }

    .button-content {
      display: inline-flex; /* Use flex to align children */
      align-items: center;
      gap: 0.75rem;
    }



    .listen-button svg {
      width: 1.2em; /* Size the SVG relative to the font size */
      height: 1.2em;
      fill: currentColor; /* Inherit the color from the parent */
      filter: drop-shadow(2px 2px 2px rgba(37, 36, 34, 0.8));
    }

    /* When the body :has a hovered .listen-button, trigger the ripple */
    body:has(.listen-button:hover)::before {
      transform: translate(-50%, -50%) scale(1);
      transition-duration: 0.7s; /* This keeps the mouse-on effect slower and more dramatic */
    }

    .listen-button:hover {
      /* background-color: #e3b05e; */
      background-color: var(--color-button-bg-hover);
      color: var(--color-button-text-hover);
      border: 1px solid var(--color-button-text-hover);
      /* Add a light shadow on hover for the dark text */
      text-shadow: 1px 1px 2px var(--color-button-text-shadow-hover);
      transform: scale(1.02); /* Combine scale and skew on hover */
    }

    .listen-button:hover svg {
      filter: drop-shadow(1px 1px 2px var(--color-button-text-shadow-hover));
      animation: svg-glitch 0.4s infinite linear;
    }

    @keyframes svg-glitch {
      0% { transform: translate(0, 0) rotate(0deg); }
      15% { transform: translate(-2px, 1px) rotate(-3deg); }
      30% { transform: translate(1px, -2px) rotate(2deg); }
      45% { transform: translate(2px, 2px) rotate(-1deg); }
      60% { transform: translate(-2px, -1px) rotate(3deg); }
      75% { transform: translate(1px, 1px) rotate(-2deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }


    @media (max-width: 768px) {
      .station-info {
        position: static;
        flex-direction: row;
        text-align: center;
        justify-content: center;
        padding: 1rem;
      }
      .station-info img {
        width: 100px;
        margin: 0 1rem 0 0;
      }
      .station-text h1 {
        font-size: 2rem;
      }
      .station-text h2 {
        font-size: 1rem;
      }

      .listen-button {
        padding: 1rem 2rem;
        font-size: 1.5rem
      }
    }