styles.css

html,
body {
  height: 100%;
  margin: 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: beige;
}

h4 {
  color: beige;
}

@keyframes dragAnimation {
  from {right: 20px;}
  to {right: 60px;}
}

.flex-item {
  margin: auto;
}

.flex-item-container {
  display: flex;
  gap: 100px;
}

.flex-item-container-col {
  display: flex;
  flex-direction: column;
  gap: 30px;

  perspective: 1000px;
  margin-bottom: 30px;
  height: 100%;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.screen {
  background: rgba(255, 255, 255, 0.808);
  height: 100px;
  width: 70%;
  margin: 15px 0;
  transform: rotateX(-45deg);
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
  align-self: center;
}

.showcase li small {
  margin-left: 2px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.fixed-container {
  color: beige;
  background-color: rgba(57, 84, 153, 0.9);
  text-align: center;
  border-radius: 10px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  position: fixed;
  top: 0;
  margin-top: 20px;
  padding: 10px;
  left: 50%;
  transform: translate(-50%,0);
  z-index: 99;
  -webkit-backface-visibility: hidden;
  backface-visibility:hidden;
}

.showcase {
  color: beige;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.showcase li {
  display: flex;
  align-items: center;
  margin: 0 10px;
}

.puesto {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: x-small;
  color: beige;
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 24px;
  width: 30px;
  margin: 3px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.libre {
  background-color: #444451;
}

.discapacidad {
  background-color: #0081cb;
}

.seleccionado {
  background-color:#fff;
  color: black;
}

.ocupado {
  background-color:#40E0D0;
  color: black;
}

.logo {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 99;
  -webkit-backface-visibility: hidden;
  backface-visibility:hidden;
}

.drag {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: beige;
  position: fixed;
  gap: 10px;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  animation-name: dragAnimation;
  animation-duration: 2s;
  animation-timing-function: ease;
  -webkit-backface-visibility: hidden;
  backface-visibility:hidden;
}

#spinner {
  display: none;
  position: fixed;
  z-index: 1031; /* High z-index so it is on top of the page */
  top: 50%;
  right: 50%; /* or: left: 50%; */
}

@media screen and (max-width: 64em) {
  body {
    font-size: 80%;
  }
}

@media screen and (max-width: 50em) {
  body {
    font-size: 70%;
  }
}

@media screen and (max-width: 30em) {
  body {
    font-size: 60%;
  }
}