.main{
  display: flex; 
  flex-direction: row; 
  align-items: center;
  justify-content: center;
  flex-wrap:wrap;
  margin: 20px;
  gap: 20px;
  .bead:hover{
    opacity: 0.5;
  }

  .holder{
    padding: 10px;
    background-image: linear-gradient(gray, black);
  }
  .selector{
    height: 300px;
    h3{
      box-shadow: 2px 2px 2px black;
      color:white;
      text-shadow:
                -2px -2px 0 #000,
                2px -2px 0 #000,
                -2px 2px 0 #000,
                2px 2px 0 #000,
                -3px 0px 0 #000,
                3px 0px 0 #000,
                0px -3px 0 #000,
                0px 3px 0 #000;

    }
    button{
      height: 16px;
    }
    .selections{
      display: grid;
      grid-template-columns: 20px 20px 20px 20px 20px;
      gap: 4px;
    }
  }
  .goback{
    align-self:start;
  }
}
.selector, .goback{
  background-color:white;
  padding:5px;
  box-sizing: border-box;
  border: 1px solid grey;
}
.snapmain{
  margin: 20px;
  .snapshots{
    display: grid; 
    grid-template-columns: 488px 488px 488px 488px 488px 488px 488px 488px 488px 488px; 
    margin-top: 10px;
  }
}
.beads-base{
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="35" stroke="black" stroke-width="30" fill="none"/></svg>');
    mask-size: 16px 16px;
  grid-template-columns: 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px;
  display: grid; 
  margin: none;
  position: absolute;
  top: auto;
  z-index: 100;
}
  .bead{
    box-sizing: border-box;
    border: none;
    background-color: #ECE9E3; 
    width: 16px; 
    height: 16px;
  }

  .backgr{
    background-color:#ffffff;
    padding: 2px;
    box-sizing: border-box;
    border: 2px outset white;
    transition: transform 1s;
  }
body{
  margin: 0px;
  background-image:linear-gradient(white, gray);
  height: 100vh;
  background-attachment: fixed;

}
.beads-back{
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="35" stroke="black" stroke-width="30" fill="none"/></svg>');
    mask-size: 16px 16px;
  grid-template-columns: 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px 16px;
  display: grid; 
  margin: none;
  top: 3px;
  position: relative;
  .bead{
    filter: brightness(50%);
  }
}
:root{
  margin: 0px;
}
.playbackMain{
  display: flex; 
  flex-direction: column; 
  #timeline{
    width: 100%;
  }
  .options{
    display: flex; 
    flex-direction: row; 
    align-items: center;
    gap: 40px;
  }
}
.goback:has(input:checked#flip) ~ div .backgr{
  transform:rotateY(180deg);
}