body {
     position: fixed;
     display: flex;
     background-color: black;
     width: 100vw;
     height: 100vh;
     padding: 0px;
     margin: 0px;
     overflow: hidden;
     justify-content: center;
     align-items: center;
}

#slide-puzzle {
     position: absolute;
     display: flex;
     background: rgb(236, 192, 153);
     border: 1px rgba(147, 77, 85, 0.5) solid;
     box-shadow: 0 0 100px rgb(94, 46, 3) inset;
     width: 2000px;
     height: 2000px;
     border-radius: 200px;
}

#groove {
     position: absolute;
     left: 100px;
     top: 100px;
     width: 1800px;
     height: 1800px;
     border-radius: 100px;
     overflow: hidden;
}

.tile {
     position: absolute;
     background-repeat: no-repeat;
     width: 450px;
     height: 450px;
     min-height: 450px;
     cursor: pointer;
     box-shadow: 0 0 4px rgb(94, 46, 3) inset;
}

.🔢 .tile {
     background-image: url("slide-puzzle-numbers.svg");
     background-color: rgb(255, 245, 211);
     background-size: 400%;
}

#t1 {
     background-position: 0% 0%;
     transform: translate(0px, 0px);
}

#t2 {
     background-position: 33.3% 0%;
     transform: translate(450px, 0px);
}

#t3 {
     background-position: 66.7% 0%;
     transform: translate(900px, 0px);
}

#t4 {
     background-position: 100% 0%;
     transform: translate(1350px, 0px);
}

#t5 {
     background-position: 0% 33.3%;
     transform: translate(0px, 450px);
}

#t6 {
     background-position: 33.3% 33.3%;
     transform: translate(450px, 450px);
}

#t7 {
     background-position: 66.7% 33.3%;
     transform: translate(900px, 450px);
}

#t8 {
     background-position: 100% 33.3%;
     transform: translate(1350px, 450px);
}

#t9 {
     background-position: 0% 66.7%;
     transform: translate(0px, 900px);
}

#t10 {
     background-position: 33.3% 66.7%;
     transform: translate(450px, 900px);
}

#t11 {
     background-position: 66.7% 66.7%;
     transform: translate(900px, 900px);
}

#t12 {
     background-position: 100% 66.7%;
     transform: translate(1350px, 900px);
}

#t13 {
     background-position: 0% 100%;
     transform: translate(0px, 1350px);
}

#t14 {
     background-position: 33.3% 100%;
     transform: translate(450px, 1350px);
}

#t15 {
     background-position: 66.7% 100%;
     transform: translate(900px, 1350px);
}

#space {
     background-position: 100% 100%;
     transform: translate(1350px, 1350px);
}

#scramble {
     position: absolute;
     width: 1800px;
     height: 1800px;
     cursor: pointer;
}

#gear {
     position: absolute;
     top: 10vh;
     left: 12.5vw;
     width: 70vw;
     height: 80vh;
     padding: 0 5vmin;
     border: 0.25vmin solid white;
     border-top-left-radius: 3vmin;
     border-bottom-left-radius: 3vmin;
     border-collapse: collapse;
     box-shadow: 0 0 2vmin black;
     background-color: rgba(0, 25, 50, 0.88);
     color: white;
     z-index: 1500;
     overflow-y: scroll;
     overflow-wrap: break-word;
     scrollbar-color: rgb(100, 200, 255) rgba(0, 0, 0, 0.25);
     scrollbar-width: thick;
}

#gear::-webkit-scrollbar {
     width: 12px;
     border-left: 20px;
}

#gear::-webkit-scrollbar-track {
     background-color: black;
     opacity: 0.15;
}

#gear::-webkit-scrollbar-thumb {
     border: 2vmin;
     background-color: rgb(100, 200, 255);
}

#gear h1 {
     text-align: center;
     padding-bottom: 2vmin;
     border-bottom: 1px solid white;
}

#gear h2 {
     font-size: 5vmin;
}

#gear hr {
     border: 0.5px dashed white;
}

#gear a {
     color: rgb(200, 225, 255);
}

#gear li {
     margin-bottom: 3vmin;
}

#toolbar {
     position: absolute;
     top: 0px;
     right: 0px;
     z-index: 2000;
}

.button {
     color: white;
     padding: 0vmin 1vmin;
     background-color: rgba(128, 128, 128, 0.5);
     font-size: 5vmin;
     text-align: center;
     cursor: pointer;
     transition: all ease-out 0.5s;
}

.button:hover {
     background-color: rgba(50, 150, 255, 0.75);
}

#picture-buttons {
     display: flex;
     justify-content: center;
     user-select: none;
}

#picture-buttons>span {
     margin: 1vmin;
     padding: 1vmin 2vmin;
     border: 1px solid white;
     border-radius: 1vmin;
     background-color: rgba(255, 255, 255, 0.5);
     vertical-align: center;
     cursor: pointer;
}

#picture-buttons>span:hover {
     background-color: rgba(255, 255, 255, 0.75);
}

#picture-buttons>.picture-selected {
     background-color: rgba(80, 160, 200, 0.5) !important;
     cursor: default;
     pointer-events: none;
}


.no-select {
     user-select: none;
}

.none {
     display: none;
     visibility: hidden;
}


@media (prefers-color-scheme: dark) {

     #slide-puzzle {
          background: rgb(110, 120, 145);
          border: 1px rgba(128, 128, 128, 0.5) solid;
          box-shadow: 0 0 100px rgb(4, 17, 38) inset;
     }

     .🔢 .tile {
          background-image: url("slide-puzzle-numbers-dark-mode.svg");
          background-color: rgb(0, 35, 65);
          background-size: 400%;
     }

}

.🚀 .tile {
     background-image: url("nasa-space-shuttle-sts125-s-048.jpg");
}

.😻 .tile {
     background-image: url("fluffy.jpg");
}

#slide-puzzle.🚀 {
     background: rgb(70, 110, 170);
     border: 1px rgba(128, 128, 128, 0.5) solid;
     box-shadow: 0 0 100px rgb(4, 17, 38) inset;
}