body {
  font-family: 'Roboto', sans-serif;
  background-color: #222;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#debug { color: white }

@keyframes appear {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes disappear {
  0% { transform: translateY(0); }
  90% { transform: translateY(100%); }
}

article#about {
  background-color: #444;
  color: #eee;
  padding: 16px;
  display: inline-block;
  margin: auto;
  a {
    color: white;
  }
  * {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }

}

body.use-enhanced-graphics {
  &.shadows {
    polo-element {
      filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    }
  }
}

.polos {
  justify-content: space-between;
  max-width: 520px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  aspect-ratio: 13/5;
  background-image: url('../img/backdrop-bright.svg');
  background-position: 40% 0%;
  background-size: 140%;

  polo-element {
    position: absolute;
    min-width: 70px;
    height: 160px;
    translate: 0px;
    
    img { 
      transition: all 300ms;
      position:absolute;
      bottom: 0;
      left: 50%;
      transform: scale(0.6); /* Adjust the scale factor as needed */
      transform-origin: -50% 100%; /* Change the origin to top-left corner */
      filter: brightness(1);
    }

    &:nth-child(1) { inset: auto auto -18px 0; }
    &:nth-child(2) { inset: auto auto -22px 70px; }
    &:nth-child(3) { inset: auto auto -14px 140px; }
    &:nth-child(4) { inset: auto auto -16px 210px; }
    &:nth-child(5) { inset: auto auto -18px 280px; }
    &:nth-child(6) { inset: auto auto -16px 350px; }
    &:nth-child(7) { inset: auto auto -20px 420px; }

    /* Fixes */
    &[controller="oren"] img { transform: scale(0.6) translate(-7px, 5px) }
    &[controller="raddy"] img { transform: scale(0.6) translate(-5px, 0) }
    &[controller="clukr"] img { transform: scale(0.6) translate(-15px, 35px); }
    &[controller="vineria"] img { transform: scale(0.6) translate(-15px, 0); }
    &[controller="gray"] img { transform: scale(0.6) translate(-5px, 0); }
    &[controller="brud"] img { transform: scale(0.6) translate(10px, 0); }
    &[controller="owakxc"] img { transform: scale(0.6) translate(5px, 0); }
    &[controller="sky"] img { transform: scale(0.6) translate(-3px, 0); }
    &[controller="durple"] img { transform: scale(0.6) translate(-3px, 0); }
    &[controller="mr-tree"] img { transform: scale(0.6) translate(-20px, 0); }
    &[controller="simon"] img { transform: scale(0.6) translate(-8px, 0); }
    &[controller="tunner"] img { transform: scale(0.6) translate(-8px, 12px); }
    &[controller="mr-fun-computer"] img { transform: scale(0.6) translate(0, 70px); }
    &[controller="wenda"] img { transform: scale(0.6) translate(-8px, 0); }

    /* Darken polos under the tree */
    /* &[controller="mr-tree"] + & img { filter: brightness(0.6) }
    &:has(+ &[controller="mr-tree"]) img { filter: brightness(0.6) } */

    /* Animations */
    &.disappear { animation: disappear 500ms; }
    &:not(.disappear) { animation: appear 500ms; }
  }
}

#selectors {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  width: 460px;
  margin: 0 auto;
  justify-content: center;

  polo-selector {
    &:nth-child(11n) { margin-left: 40px; }
    transition: all 500ms;
    &[disabled] {
      filter: grayscale(1) contrast(0.5);
      opacity: 0.5;
    }

    .p2 {
      filter: sepia(1) saturate(5) invert() hue-rotate(170deg);
    }
  }
}