html,
body {
  background-color: black;
  color: white;
  font-size: large;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}

#btnStart{
  width:100vw;
  height:100vh;
}

.cardButton {
  width: 100%;
}

.cardButton button {
  width: 20vw;
  height: 7vh;
  font-size: x-large;
  margin-bottom: 3px;
}

#divButtons {
  display: none;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
  font-size: large;
}

#divReady {
  display: none;
  text-align: center;
}

.swiper {
  width: 100vw;
  height: 100%;
}

.swiper-slide{
  width: 100vw;
  min-height: 100vh;
}

.gesture {
  width: 100vw;
  height: 100vh;
  text-align: center;
  font-size: xx-large;
  padding-top: 20px;
}

.gesture p {
  text-align: center;
  font-size: xx-large;
  margin-top: 50%;
}

#message {
  text-align: center;
  font-size: xx-large;
}

.fixed-div {
  position: fixed;
  /* Fixed positioning */
  top: 0;
  /* Align to the top */
  left: 0;
  /* Align to the left */
  width: 100%;
  /* Optional: span the full width of the viewport */
  z-index: 1000;
  /* Ensure it's above other content */
  /* Add additional styling as needed (e.g., background, padding, etc.) */
}

ol {}

li {
  font-size: x-large;
  text-align: left;
}

#spectators {
  display: flex;
  flex-direction: column; /* Align children vertically */
  width: 100%; /* Set the width of the parent div to 100% of its container */
  height: 100%;
}

#spectators div {
  font-size: large;
  width: 100%;
  margin-bottom: 10px;
}

.centered-content {
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: left; /* Horizontally center the content, optional */
  height: 100%; /* Set a height for the div if not already defined */
}

#spectators input {
  width: 10vw;
  height: 5vh;
}

#stack-view{
  display: grid;
    grid-template-columns: repeat(8, 1fr); /* Creates 13 columns */
    gap: 3px; /* Optional: Adds some space between images */
    width: 100%; /* Sets the container width to 100% of the screen */
}

#stack-view img{
  width: 100%; /* Makes each image take the full width of its cell */
    height: auto; /* Maintains the aspect ratio of the images */
}

#stack-view-buttons button{
  width: 30vw;
  height: 15vh;
  font-size: x-large;
  margin-bottom: 3px;
}

.red-suit{
  color:red;
}