* {
  box-sizing: border-box;
  font-family: monopoly;
  margin:0;
  padding:0;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

#frame-page {
  height: calc(var(--vh, 1vh) * 100);
  border: white calc(var(--vh, 1vh) * 1) solid;
  background: white;
}

#board {
  background: grey;
  height: calc(var(--vh, 1vh) * 98);
  margin: 0 auto;
  width: 99.8%;
}

#tray-books {
  border: black 2px solid;
  height: 50%;
  padding: 1%;
  position: relative; 
  width: 100%;
}


.book {
  color: white;
  height: calc(var(--vh, 1vh) * 2);
  position: absolute;
  width:  0vh;
  animation-fill-mode: forwards;
  animation-duration: 30s;
  animation-play-state: running;
  animation-timing-function: linear;
}

#b01 {animation-name: b01; background: blue; color: white; left: 1%; top: calc(var(--vh, 1vh) * 2);}
@keyframes b01 {0% {width: 0%;} 0% {width: 0%;} 3.42% {width: 3.35%;} 100%{width: 3.35%;}}
#b02 {animation-name: b02; background: blue; color: white; left: 4.35%; top: calc(var(--vh, 1vh) * 4);}
@keyframes b02 {0% {width: 0%;} 3.42% {width: 0%;} 14.96% {width: 11.3%;} 100%{width: 11.3%;}}
#b03 {animation-name: b03; background: blue; color: white; left: 15.58%; top: calc(var(--vh, 1vh) * 6);}
@keyframes b03 {0% {width: 0%;} 14.88% {width: 0%;} 14.96% {width: 0.08%;} 100%{width: 0.08%;}}
#b04 {animation-name: b04; background: blue; color: white; left: 15.66%; top: calc(var(--vh, 1vh) * 8);}
@keyframes b04 {0% {width: 0%;} 14.96% {width: 0%;} 18.06% {width: 3.04%;} 100%{width: 3.04%;}}
#b05 {animation-name: b05; background: blue; color: white; left: 18.62%; top: calc(var(--vh, 1vh) * 10);}
@keyframes b05 {0% {width: 0%;} 17.98% {width: 0%;} 18.06% {width: 0.08%;} 100%{width: 0.08%;}}
#b06 {animation-name: b06; background: blue; color: white; left: 18.7%; top: calc(var(--vh, 1vh) * 12);}
@keyframes b06 {0% {width: 0%;} 18.06% {width: 0%;} 19.89% {width: 1.79%;} 100%{width: 1.79%;}}
#b07 {animation-name: b07; background: blue; color: white; left: 20.49%; top: calc(var(--vh, 1vh) * 14);}
@keyframes b07 {0% {width: 0%;} 19.89% {width: 0%;} 46.14% {width: 25.73%;} 100%{width: 25.73%;}}
#b08 {animation-name: b08; background: red; color: white; left: 24.39%; top: calc(var(--vh, 1vh) * 16);}
@keyframes b08 {0% {width: 0%;} 23.87% {width: 0%;} 24.74% {width: 0.86%;} 100%{width: 0.86%;}}
#b09 {animation-name: b09; background: blue; color: white; left: 41.54%; top: calc(var(--vh, 1vh) * 18);}
@keyframes b09 {0% {width: 0%;} 41.37% {width: 0%;} 49.48% {width: 7.95%;} 100%{width: 7.95%;}}
#b10 {animation-name: b10; background: blue; color: white; left: 49.57%; top: calc(var(--vh, 1vh) * 20);}
@keyframes b10 {0% {width: 0%;} 49.56% {width: 0%;} 52.51% {width: 2.88%;} 100%{width: 2.88%;}}
#b11 {animation-name: b11; background: blue; color: white; left: 52.46%; top: calc(var(--vh, 1vh) * 22);}
@keyframes b11 {0% {width: 0%;} 52.51% {width: 0%;} 62.77% {width: 10.06%;} 100%{width: 10.06%;}}
#b12 {animation-name: b12; background: blue; color: white; left: 61.81%; top: calc(var(--vh, 1vh) * 24);}
@keyframes b12 {0% {width: 0%;} 62.05% {width: 0%;} 89.1% {width: 26.51%;} 100%{width: 26.51%;}}
#b13 {animation-name: b13; background: blue; color: white; left: 49.57%; top: calc(var(--vh, 1vh) * 26);}
@keyframes b13 {0% {width: 0%;} 49.56% {width: 0%;} 52.74% {width: 3.12%;} 100%{width: 3.12%;}}
#b14 {animation-name: b14; background: blue; color: white; left: 52.69%; top: calc(var(--vh, 1vh) * 28);}
@keyframes b14 {0% {width: 0%;} 52.74% {width: 0%;} 92.52% {width: 38.98%;} 100%{width: 38.98%;}}
#b15 {animation-name: b15; background: blue; color: white; left: 91.67%; top: calc(var(--vh, 1vh) * 30);}
@keyframes b15 {0% {width: 0%;} 92.52% {width: 0%;} 98.09% {width: 5.46%;} 100%{width: 5.46%;}}
#b16 {animation-name: b16; background: blue; color: white; left: 97.99%; top: calc(var(--vh, 1vh) * 32);}
@keyframes b16 {0% {width: 0%;} 98.97% {width: 0%;} 100% {width: 1.01%;} 100%{width: 1.01%;}}
#b17 {animation-name: b17; background: blue; color: white; left: 95.1%; top: calc(var(--vh, 1vh) * 34);}
@keyframes b17 {0% {width: 0%;} 96.02% {width: 0%;} 97.45% {width: 1.4%;} 100%{width: 1.4%;}}
#b18 {animation-name: b18; background: red; color: white; left: 6.07%; top: calc(var(--vh, 1vh) * 36);}
@keyframes b18 {0% {width: 0%;} 5.17% {width: 0%;} 16.31% {width: 10.91%;} 100%{width: 10.91%;}}
#b19 {animation-name: b19; background: blue; color: white; left: 49.57%; top: calc(var(--vh, 1vh) * 38);}
@keyframes b19 {0% {width: 0%;} 49.56% {width: 0%;} 98.65% {width: 48.1%;} 100%{width: 48.1%;}}
#b20 {animation-name: b20; background: blue; color: white; left: 52.69%; top: calc(var(--vh, 1vh) * 40);}
@keyframes b20 {0% {width: 0%;} 52.74% {width: 0%;} 55.93% {width: 3.12%;} 100%{width: 3.12%;}}
#b21 {animation-name: b21; background: blue; color: white; left: 55.57%; top: calc(var(--vh, 1vh) * 42);}
@keyframes b21 {0% {width: 0%;} 55.69% {width: 0%;} 55.93% {width: 0.23%;} 100%{width: 0.23%;}}
#b22 {animation-name: b22; background: blue; color: white; left: 54.02%; top: calc(var(--vh, 1vh) * 44);}
@keyframes b22 {0% {width: 0%;} 54.1% {width: 0%;} 54.18% {width: 0.08%;} 100%{width: 0.08%;}}
#b23 {animation-name: b23; background: blue; color: white; left: 72.88%; top: calc(var(--vh, 1vh) * 46);}
@keyframes b23 {0% {width: 0%;} 73.35% {width: 0%;} 77.01% {width: 3.59%;} 100%{width: 3.59%;}}
#b24 {animation-name: b24; background: blue; color: white; left: 83.1%; top: calc(var(--vh, 1vh) * 48);}
@keyframes b24 {0% {width: 0%;} 83.77% {width: 0%;} 89.1% {width: 5.22%;} 100%{width: 5.22%;}}
#b25 {animation-name: b25; background: blue; color: white; left: 86.21%; top: calc(var(--vh, 1vh) * 50);}
@keyframes b25 {0% {width: 0%;} 86.95% {width: 0%;} 87.03% {width: 0.08%;} 100%{width: 0.08%;}}
#b26 {animation-name: b26; background: blue; color: white; left: 85.75%; top: calc(var(--vh, 1vh) * 52);}
@keyframes b26 {0% {width: 0%;} 86.48% {width: 0%;} 88.23% {width: 1.72%;} 100%{width: 1.72%;}}
#b27 {animation-name: b27; background: blue; color: white; left: 85.36%; top: calc(var(--vh, 1vh) * 54);}
@keyframes b27 {0% {width: 0%;} 86.08% {width: 0%;} 92.6% {width: 6.39%;} 100%{width: 6.39%;}}
#b28 {animation-name: b28; background: blue; color: white; left: 70.86%; top: calc(var(--vh, 1vh) * 56);}
@keyframes b28 {0% {width: 0%;} 71.28% {width: 0%;} 75.97% {width: 4.6%;} 100%{width: 4.6%;}}
#b29 {animation-name: b29; background: blue; color: white; left: 69.61%; top: calc(var(--vh, 1vh) * 58);}
@keyframes b29 {0% {width: 0%;} 70.01% {width: 0%;} 70.09% {width: 0.08%;} 100%{width: 0.08%;}}
#b30 {animation-name: b30; background: blue; color: white; left: 70.86%; top: calc(var(--vh, 1vh) * 60);}
@keyframes b30 {0% {width: 0%;} 71.28% {width: 0%;} 71.36% {width: 0.08%;} 100%{width: 0.08%;}}
#b31 {animation-name: b31; background: blue; color: white; left: 86.21%; top: calc(var(--vh, 1vh) * 62);}
@keyframes b31 {0% {width: 0%;} 86.95% {width: 0%;} 87.03% {width: 0.08%;} 100%{width: 0.08%;}}
#b32 {animation-name: b32; background: blue; color: white; left: 67.74%; top: calc(var(--vh, 1vh) * 64);}
@keyframes b32 {0% {width: 0%;} 68.1% {width: 0%;} 68.18% {width: 0.08%;} 100%{width: 0.08%;}}
#b33 {animation-name: b33; background: blue; color: white; left: 72.96%; top: calc(var(--vh, 1vh) * 66);}
@keyframes b33 {0% {width: 0%;} 73.43% {width: 0%;} 78.2% {width: 4.68%;} 100%{width: 4.68%;}}
#b34 {animation-name: b34; background: blue; color: white; left: 84.26%; top: calc(var(--vh, 1vh) * 68);}
@keyframes b34 {0% {width: 0%;} 84.96% {width: 0%;} 85.04% {width: 0.08%;} 100%{width: 0.08%;}}
#b35 {animation-name: b35; background: blue; color: white; left: 84.58%; top: calc(var(--vh, 1vh) * 70);}
@keyframes b35 {0% {width: 0%;} 85.28% {width: 0%;} 85.36% {width: 0.08%;} 100%{width: 0.08%;}}
#b36 {animation-name: b36; background: blue; color: white; left: 83.02%; top: calc(var(--vh, 1vh) * 72);}
@keyframes b36 {0% {width: 0%;} 83.69% {width: 0%;} 83.77% {width: 0.08%;} 100%{width: 0.08%;}}
#b37 {animation-name: b37; background: blue; color: white; left: 93%; top: calc(var(--vh, 1vh) * 74);}
@keyframes b37 {0% {width: 0%;} 93.87% {width: 0%;} 93.95% {width: 0.08%;} 100%{width: 0.08%;}}
#b38 {animation-name: b38; background: blue; color: white; left: 93%; top: calc(var(--vh, 1vh) * 76);}
@keyframes b38 {0% {width: 0%;} 93.87% {width: 0%;} 94.03% {width: 0.16%;} 100%{width: 0.16%;}}
#b39 {animation-name: b39; background: blue; color: white; left: 98.92%; top: calc(var(--vh, 1vh) * 78);}
@keyframes b39 {0% {width: 0%;} 99.92% {width: 0%;} 100% {width: 0.08%;} 100%{width: 0.08%;}}