body {
     position: fixed;
     display: flex;
     width: 100%;
     height: 100%;
     margin: 0px;
     padding: 3vh 3vw;
     overflow: hidden;
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
     -webkit-user-select: none;
     user-select: none;
     background-color: #4080bb;
     font-family: "'Courier New', Courier, monospace";
}

#Grid {
     width: 95%;
     height: 95%;
     display: grid;
     grid-template-columns: auto auto auto auto;
     gap: 4vmax;
}

.Card {
     width: 100%;
     height: 100%;
     perspective: 100vw;
}

.Back,
.Front {
     width: 100%;
     height: 100%;
     position: absolute;
     border-radius: 2.5vw;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transition: transform ease-out 0.5s;
}

.Back {
     background-color: #d7eeff;
     cursor: pointer;
}

.Front {
     position: absolute;
     display: flex;
     background-color: white;
     font-size: 20vmin;
     align-items: center;
     justify-content: center;
     transform: rotateY(-180deg);
     pointer-events: none;
}

.Flip.Back {
     transform: rotateY(-180deg) !important;
}

.Flip.Front {
     transform: rotateY(-360deg) !important;
}

@media (orientation: portrait) {
     #Grid {
          grid-template-columns: auto auto auto;
     }
}

#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;
}

#win {
     top: 40vh;
     left: 10vw;
     width: 75vw;
     height: 25vh;
     padding: 0 2vmin;
     display: flex;
     position: absolute;
     justify-content: space-between;
     align-items: center;
     border: 0.25vmin solid white;
     border-radius: 3vmin;
     box-shadow: 0 0 0.5vmin black;
     background-color: white;
     color: black;
     z-index: 1000;
     cursor: pointer;
     transition-property: border-radius, box-shadow, opacity;
     transition-duration: 0.5s;
}

#win:hover {
     box-shadow: 0 0 1vmin black;
     border-radius: 5vmin;
}

#win.none {
     opacity: 0;
}

#win-text,
#party-left,
#party-right {
     text-align: center;
     -webkit-user-select: none;
     user-select: none;
}

#win-text {
     width: 70%;
     font-size: 5vmin;
}

#party-left,
#party-right {
     width: 15%;
     font-size: 10vmin;
}


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

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

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

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