html, #visualWrapper{
  background-color:#fafaf7;
}

#visualWrapper {
  height: max-content;
  z-index:5;
  position: sticky;
  top: 0;
  font-size: 0.75rem;
}
#visualizer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: stretch;
  align-items: stretch;
  gap: 0px;
  max-width: 20vh;
  margin-inline: auto;
}

#visualizer > div{
  aspect-ratio: 1;
  position: relative;
  border: 0.05em solid #ccc;
}
.tl{
  top: 0;
  left: 0;
}
.tr{
  top: 0;
  right: 0;
}
.bl{
  bottom: 0;
  left: 0;
}
.br{
  bottom: 0;
  right: 0;
}
@media screen and (min-width: 769px){
  #visualizer{
    margin-left: 0;
    max-height:25vh;
  }
  #visualWrapper {
    font-size: 1rem;
  }
}

#visualizer > div > *{
  position: absolute
}
#aasl{
  justify-content: end;
}
#visualizer > * > div{
  border: 2px solid blue;
  border-radius: 9999px;
  transition: width 1s ease-in-out 0s, height 1s ease-in-out 0s;
  z-index: 6;
}
#aihl > div{
  border-radius: 9999px 0 0;
  border-color: purple;
  background-color: rgba(128, 0, 128, 0.4);
}
#aisl > div{
  border-radius: 0 0 0 9999px;
  border-color: orange;
  background-color: rgba(255, 165, 0, 0.4);
}
#aahl > div{
  border-radius: 0 9999px 0 0;
  border-color: green;
  background-color: rgba(0, 128, 0, 0.4);
}
#aasl > div{
  border-radius: 0 0 9999px 0;
  border-color: black;
  background-color: rgba(20, 20, 20, 0.4);
}

@media (prefers-color-scheme: dark){
  body, #visualWrapper{
    background-color: #222;
  }
  #aihl > div{
    border-radius: 9999px 0 0;
    border-color: rgba(238, 201, 244, 0.4);
    background-color: rgba(230, 143, 243, 0.4);
  }
  #aisl > div{
    border-radius: 0 0 0 9999px;
    border-color: rgba(244, 240, 201, 0.4);
    background-color: rgba(243, 208, 143, 0.4);
  }
  #aahl > div{
    border-radius: 0 9999px 0 0;
    border-color: rgba(201, 244, 203, 0.4);
    background-color: rgba(143, 243, 143, 0.4);
  }
  #aasl > div{
    border-radius: 0 0 9999px 0;
    border-color: rgba(201, 223, 244, 0.4);
    background-color: rgba(143, 226, 243, 0.4);
  }
  .modal-card-body{
    scrollbar-color: darkgrey black;
  }
}