@media screen and ((max-width: 1000px) and (max-height: 100vw)) {
  .cabecalho {
    font-size: 2vw !important;
  }

  .mesa {
    height: 70% !important;
  }

  footer {
    background-color: transparent !important;
    color: black !important;
    text-align: right !important;
  }

  .bola1,
  .bola2,
  .bola3,
  .bola4,
  .bola5,
  .bola6,
  .bola7,
  .bola8,
  .bola9,
  .bola10,
  .bola11,
  .bola12 {
    font-size: 12px !important;
  }
}

@media screen and (max-width: 100vh) {
  .cabecalho {
    font-size: 4vw !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 10% !important;
  }

  .conteudo {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    height: auto !important;
    margin-top: 40% !important;
    float: none !important;
  }

  .mesa {
    height: auto !important;
    width: 80% !important;
  }

  footer {
    background-color: transparent !important;
    color: black !important;
    text-align: right !important;
  }

  .bola1,
  .bola2,
  .bola3,
  .bola4,
  .bola5,
  .bola6,
  .bola7,
  .bola8,
  .bola9,
  .bola10,
  .bola11,
  .bola12 {
    font-size: 12px !important;
  }
}




* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  background: linear-gradient(#87CEEB, #E0F6FF);
}

.conteiner {
  height: 95%;
  width: 100%;
}

.cabecalho {
  font-size: 1.5vw;
  width: 50%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.conteudo {
  width: 50%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.botao {
  float: left;
  width: 20px;
}

#numero {
  width: 30px;
  float: left;
  text-align: center;
}

.mesa {
  height: 80%;
  aspect-ratio: 1/1;
  border: 1px solid rgb(122, 122, 192);
  border-radius: 50%;
  background: linear-gradient(#71c6e7, #e0eaff);
  display: flex;
  position: absolute;
}


#div1,
#div2,
#div3,
#div4,
#div5,
#div6,
#div7,
#div8,
#div9,
#div10,
#div11,
#div12 {
  width: 8%;
  height: 100%;
  position: absolute;
  margin-left: 46%;
}

#div1 {
  rotate: 0deg;
}

#div2 {
  rotate: 15deg;
}

#div3 {
  rotate: 30deg;
}

#div4 {
  rotate: 45deg;
}

#div5 {
  rotate: 60deg;
}

#div6 {
  rotate: 75deg;
}

#div7 {
  rotate: 90deg;
}

#div8 {
  rotate: 105deg;
}

#div9 {
  rotate: 120deg;
}

#div10 {
  rotate: 135deg;
}

#div11 {
  rotate: 150deg;
}

#div12 {
  rotate: 165deg;
}

.bola1,
.bola2,
.bola3,
.bola4,
.bola5,
.bola6,
.bola7,
.bola8,
.bola9,
.bola10,
.bola11,
.bola12 {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
}

.bola1 {
  rotate: 0deg;
  top: 0%;
  animation: bola1 20s infinite linear;
}

.bola2 {
  rotate: -15deg;
  top: 1.56741%;
  animation: bola2 20s infinite linear;

}

.bola3 {
  rotate: -30deg;
  top: 6.16283%;
  animation: bola3 20s infinite linear;
}

.bola4 {
  rotate: -45deg;
  top: 13.47309%;
  animation: bola4 20s infinite linear;
}

.bola5 {
  rotate: -60deg;
  top: 23%;
  animation: bola5 20s infinite linear;
}

.bola6 {
  rotate: -75deg;
  top: 34.09432%;
  animation: bola6 20s infinite linear;
}

.bola7 {
  rotate: -90deg;
  top: 46%;
  animation: bola7 20s infinite linear;
}

.bola8 {
  rotate: -105deg;
  top: 57.90568%;
  animation: bola8 20s infinite linear;
}

.bola9 {
  rotate: -120deg;
  top: 69%;
  animation: bola9 20s infinite linear;
}

.bola10 {
  rotate: -135deg;
  top: 78.52691%;
  animation: bola10 20s infinite linear;
}

.bola11 {
  rotate: -150deg;
  top: 85.83717%;
  animation: bola11 20s infinite linear;
}

.bola12 {
  rotate: -165deg;
  top: 90.43259%;
  animation: bola12 20s infinite linear;
}

@keyframes bola1 {

  0%,
  100% {
    top: 0%;
  }

  4.167%,
  95.841% {
    top: 1.5%;
  }

  8.334%,
  91.674% {
    top: 6.1%;
  }

  12.501%,
  87.507% {
    top: 13.5%;
  }

  16.668%,
  83.34% {
    top: 23%;
  }

  20.835%,
  79.173% {
    top: 34.2%;
  }

  25.002%,
  75.006% {
    top: 46%;
  }

  29.169%,
  70.839% {
    top: 57.5%;
  }

  33.336%,
  66.672% {
    top: 69%;
  }

  37.503%,
  62.505% {
    top: 78.5%;
  }

  41.67%,
  58.338% {
    top: 85.7%;
  }

  45.837%,
  54.171% {
    top: 90.3%;
  }

  50% {
    top: 92%;
  }
}

@keyframes bola2 {

  0%,
  8.334%,
  100% {
    top: 1.5%;
  }

  4.167% {
    top: 0%;
  }

  12.501%,
  95.841% {
    top: 6.1%;
  }

  16.668%,
  91.674% {
    top: 13.5%;
  }

  20.835%,
  87.507% {
    top: 23%;
  }

  25.002%,
  83.34% {
    top: 34.2%;
  }

  29.169%,
  79.173% {
    top: 46%;
  }

  33.336%,
  75.006% {
    top: 57.5%;
  }

  37.503%,
  70.839% {
    top: 69%;
  }

  41.67%,
  66.672% {
    top: 78.5%;
  }

  45.837%,
  62.505% {
    top: 85.7%;
  }

  50%,
  58.338% {
    top: 90.3%;
  }

  54.171% {
    top: 92%
  }
}

@keyframes bola3 {

  0%,
  16.668%,
  100% {
    top: 6.1%;
  }

  4.167%,
  12.501% {
    top: 1.5%;
  }

  8.334% {
    top: 0%;
  }

  16.668%,
  100% {
    top: 6.1%;
  }

  20.835%,
  95.841% {
    top: 13.5%;
  }

  25.002%,
  91.674% {
    top: 23%;
  }

  29.169%,
  87.507% {
    top: 34.2%;
  }

  33.336%,
  83.34% {
    top: 46%;
  }

  37.503%,
  79.173% {
    top: 57.5%;
  }

  41.67%,
  75.006% {
    top: 69%;
  }

  45.837%,
  70.839% {
    top: 78.5%;
  }

  50%,
  66.672% {
    top: 85.7%;
  }

  54.171%,
  62.505% {
    top: 90.3%;
  }

  58.338% {
    top: 92%;
  }
}

@keyframes bola4 {

  0%,
  25.002%,
  100% {
    top: 13.5%;
  }

  4.167%,
  20.835% {
    top: 6.1%;
  }

  8.334%,
  16.668% {
    top: 1.5%;
  }

  12.501% {
    top: 0%;
  }

  29.169%,
  95.841% {
    top: 23%;
  }

  33.336%,
  91.674% {
    top: 34.2%;
  }

  37.503%,
  87.507% {
    top: 46%;
  }

  41.67%,
  83.34% {
    top: 57.5%;
  }

  45.837%,
  79.173% {
    top: 69%;
  }

  50%,
  75.006% {
    top: 78.5%;
  }

  54.171%,
  70.839% {
    top: 85.7%;
  }

  58.338%,
  66.672% {
    top: 90.3%;
  }

  62.505% {
    top: 92%;
  }
}

@keyframes bola5 {

  0%,
  33.336%,
  100% {
    top: 23%;
  }

  4.167%,
  29.169% {
    top: 13.5%;
  }

  8.334%,
  25.002% {
    top: 6.1%;
  }

  12.501%,
  20.835% {
    top: 1.5%;
  }

  16.668% {
    top: 0%;
  }

  37.503%,
  95.841% {
    top: 34.2%;
  }

  41.67%,
  91.674% {
    top: 46%;
  }

  45.837%,
  87.507% {
    top: 57.5%;
  }

  50%,
  83.34% {
    top: 69%;
  }

  54.171%,
  79.173% {
    top: 78.5%;
  }

  58.338%,
  75.006% {
    top: 85.7%;
  }

  62.505%,
  70.839% {
    top: 90.3%;
  }

  66.672% {
    top: 92%;
  }
}

@keyframes bola6 {

  0%,
  41.67%,
  100% {
    top: 34.2%;
  }

  4.167%,
  37.503% {
    top: 23%;
  }

  8.334%,
  33.336% {
    top: 13.5%;
  }

  12.501%,
  29.169% {
    top: 6.1%;
  }

  16.668%,
  25.002% {
    top: 1.5%;
  }

  20.835% {
    top: 0%;
  }

  45.837%,
  95.841% {
    top: 46%;
  }

  50%,
  91.674% {
    top: 57.5%;
  }

  54.171%,
  87.507% {
    top: 69%;
  }

  58.338%,
  83.34% {
    top: 78.5%;
  }

  62.505%,
  79.173% {
    top: 85.7%;
  }

  66.672%,
  75.006% {
    top: 90.3%;
  }

  70.839% {
    top: 92%;
  }
}

@keyframes bola7 {

  0%,
  50%,
  100% {
    top: 46%;
  }

  4.167%,
  45.837% {
    top: 34.2%;
  }

  8.334%,
  41.67% {
    top: 23%;
  }

  12.501%,
  37.503% {
    top: 13.5%;
  }

  16.668%,
  33.336% {
    top: 6.1%;
  }

  20.835%,
  29.169% {
    top: 1.5%;
  }

  25.002% {
    top: 0%;
  }

  54.171%,
  95.841% {
    top: 57.5%;
  }

  58.338%,
  91.674% {
    top: 69%;
  }

  62.505%,
  87.507% {
    top: 78.5%;
  }

  66.672%,
  83.34% {
    top: 85.7%;
  }

  70.839%,
  79.173% {
    top: 90.3%;
  }

  75.006% {
    top: 92%;
  }
}

@keyframes bola8 {

  0%,
  58.338%,
  100% {
    top: 57.5%;
  }

  4.167%,
  54.171% {
    top: 46%;
  }

  8.334%,
  50.004% {
    top: 34.2%;
  }

  12.501%,
  45.837% {
    top: 23%;
  }

  16.668%,
  41.67% {
    top: 13.5%;
  }

  20.835%,
  37.503% {
    top: 6.1%;
  }

  25.002%,
  33.336% {
    top: 1.5%;
  }

  29.169% {
    top: 0%;
  }

  62.505%,
  95.841% {
    top: 69%;
  }

  66.672%,
  91.674% {
    top: 78.5%;
  }

  70.839%,
  87.507% {
    top: 85.7%;
  }

  75.006%,
  83.34% {
    top: 90.3%;
  }

  79.173% {
    top: 92%;
  }
}

@keyframes bola9 {

  0%,
  66.672%,
  100% {
    top: 69%;
  }

  4.167%,
  62.505% {
    top: 57.5%;
  }

  8.334%,
  58.338% {
    top: 46%;
  }

  12.501%,
  54.171% {
    top: 34.2%;
  }

  16.668%,
  50.004% {
    top: 23%;
  }

  20.835%,
  45.837% {
    top: 13.5%;
  }

  25.002%,
  41.67% {
    top: 6.1%;
  }

  29.169%,
  37.503% {
    top: 1.5%;
  }

  33.336% {
    top: 0%;
  }

  70.839%,
  95.841% {
    top: 78.5%;
  }

  75.006%,
  91.674% {
    top: 85.7%;
  }

  79.173%,
  87.507% {
    top: 90.3%;
  }

  83.34% {
    top: 92%;
  }
}

@keyframes bola10 {

  0%,
  75.006%,
  100% {
    top: 78.5%;
  }

  4.167%,
  70.839% {
    top: 69%;
  }

  8.334%,
  66.672% {
    top: 57.5%;
  }

  12.501%,
  62.505% {
    top: 46%;
  }

  16.668%,
  58.338% {
    top: 34.2%;
  }

  20.835%,
  54.171% {
    top: 23%;
  }

  25.002%,
  50.004% {
    top: 13.5%;
  }

  29.169%,
  45.837% {
    top: 6.1%;
  }

  33.336%,
  41.67% {
    top: 1.5%;
  }

  37.503% {
    top: 0%;
  }

  79.173%,
  95.841% {
    top: 85.7%;
  }

  83.34%,
  91.674% {
    top: 90.3%;
  }

  87.507% {
    top: 92%;
  }
}

@keyframes bola11 {

  0%,
  83.34%,
  100% {
    top: 85.7%;
  }

  4.167%,
  79.173% {
    top: 78.5%;
  }

  8.334%,
  75.006% {
    top: 69%;
  }

  12.501%,
  70.839% {
    top: 57.5%;
  }

  16.668%,
  66.672% {
    top: 46%;
  }

  20.835%,
  62.505% {
    top: 34.2%;
  }

  25.002%,
  58.338% {
    top: 23%;
  }

  29.169%,
  54.171% {
    top: 13.5%;
  }

  33.336%,
  50.004% {
    top: 6.1%;
  }

  37.503%,
  45.837% {
    top: 1.5%;
  }

  41.67% {
    top: 0%;
  }

  87.507%,
  95.841% {
    top: 90.3%;
  }

  91.674% {
    top: 92%;
  }
}

@keyframes bola12 {

  0%,
  91.674%,
  100% {
    top: 90.3%;
  }

  4.167%,
  87.507% {
    top: 85.7%;
  }

  8.334%,
  83.34% {
    top: 78.5%;
  }

  12.501%,
  79.173% {
    top: 69%;
  }

  16.668%,
  75.006% {
    top: 57.5%;
  }

  20.835%,
  70.839% {
    top: 46%;
  }

  25.002%,
  66.672% {
    top: 34.2%;
  }

  29.169%,
  62.505% {
    top: 23%;
  }

  33.336%,
  58.338% {
    top: 13.5%;
  }

  37.503%,
  54.171% {
    top: 6.1%;
  }

  41.67%,
  50.004% {
    top: 1.5%;
  }

  45.837% {
    top: 0%;
  }

  95.841% {
    top: 92%;
  }
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 0.3%;
  position: fixed;
  bottom: 0;
  width: 100%;
}