#blues-clues {
  --bg-size: 200px;

  --light-blue: rgb(53, 158, 218);
  --deep-blue: rgb(26, 92, 167);

  details {
    border: 1px solid #aaaaaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;

    background-color: white;
  }

  summary {
    margin: -0.5em -0.5em 0;
    padding: 0.5em;

    font-weight: bold;

    cursor: pointer;
  }
  
  summary::marker {
    color: var(--light-blue);
  }

  details[open] {
    padding: 0.5em;
  }


  .cat-bg {
    background-image: url("../images/blue/cat-bg.jpg");
    background-size: var(--bg-size);
    background-repeat: repeat; /* this is the default but better safe than sorry */
    animation: scroll-bg 5s infinite linear;

    > * {
      padding: 1vmin;

      /* give text a white stroke so it's legible - might remove */
      -webkit-text-stroke: 2px whitesmoke;
      paint-order: stroke fill;
    }
  }

  /* CSS grid is dog shit so i made my own*/
  .grid {
    display: flex;
    gap: 0.5em;

    align-items: stretch;

    > * {
      flex-direction: column;
    }

    > .left {
      flex: 2;
    }

    > .right {
      flex: 1
    }
  }

  .figure {
    display: flex;
    flex-direction: column;
    height: 100%;

    img, video {
      width: 100%;
      height: auto;
    }
  }

  .video-container {
    aspect-ratio: 16 / 9;
  }

  .card {
    display: flex;
    justify-content: space-around;
    align-items: center;

    font-size: x-large;

    .cake {
      aspect-ratio: 1 / 1;
    }

    span {
      font-size: xx-large;
      font-weight: bold;
      color: var(--light-blue);
      -webkit-text-stroke: var(--deep-blue) 2px;
    }
  }
}

.floaty-char {
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}

#el-comandante {
  /* fill the entire container; use that to control size and forget about it */
  width: 100%;
  height: 100%;
  object-fit: fill;
}

@keyframes scroll-bg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: var(--bg-size) var(--bg-size);
  }
}

.rainbow {
  background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
  background-clip: text;
  color: transparent;
  animation: rainbow-scroll 4s ease-in-out infinite;
  background-size: 400% 100%;
}

@keyframes rainbow-scroll {
  0%, 100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(10px)
  }
}