.thebg {
  background-color: #afd4ff;
}
.bgcp {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
}
.flexblock {
  width: 100%;
    height: 70%;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: 20%;
    left: 2.5%;
}
.eachblock,.afternumberbox {
  width: 8.5%;
    height: 18%;
    background: #f0fffe;
    border: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2vw;
    margin: 4px 5px;
}
.eachblockspan{
  margin-left: -2500%;
}
.eachblock span {
  margin-left: -2500%;
}
.eachblock1span {
  margin-left: -2700%;
}
.eachblock:nth-child(10n + 0) {
  /* border-right: 2px solid #ffca78; */
  /* border:none; */
}
.afternumberbox{
  border-right: 1px solid grey;
  border-left: 1px solid grey;
  box-shadow: #72beb8 0px 2px 5px 1px;
  -webkit-box-shadow: 0px 4px 10px 1px #72beb8;
-moz-box-shadow: 0px 4px 10px 1px #72beb8;
}
.afternumberbox:hover{
  transform:scale(1.05) !important;
  border: 2px solid #fad270 !important;
  cursor: pointer;
}
.afternumberbox1{
  box-shadow:inset 0 2px 5px #969c9c;
  box-shadow: #72beb8 0px 2px 5px 1px;
  -webkit-box-shadow: 0px 4px 10px 1px #72beb8;
-moz-box-shadow: 0px 4px 10px 1px #72beb8;
}
@media(max-width:800px){
  .flexblock,.flexblock1 {
    width: 100%;
    height: 70%;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: 16%;
    left: 6.5%;
  }
  .flexblock1{
    height: 44%;
    top: 16%;
    left: 0.5%;
  }
  .eachblock,.eachblock1,.afternumberbox {
    width: 12%;
      height: 19%;
      background: #f0fffe;
      border: none;
      border-radius: 5px;
      border-right: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.2vw;
      margin: 4px 5px;
  }
  .eachblock1{
    width: 7.5%;
    height: 30%;
  }
  .eachblock span {
    margin-left: -2600%;
  }
  .eachblock:nth-child(10n + 0) {
    border: none;
  }
}
.toptxt {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  text-align: center;
  font-size: 2.5vw;
  background-color: #fad270;
  padding: 2% 1% 1% 1%;
  z-index: 9;
}
.num {
  position: absolute;
  top: 30%;
  width: 20%;
  font-size: 16vw;
}
.grayscl {
  color: #999999;
}
.scalenum {
  animation: scl 1s linear forwards;
}
@keyframes scl {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}
/*************************************mediaquery**********************/
@media (min-aspect-ratio: 4/3) {
  .eachblock{
    font-size: 6vh;
  }
  .p3s0 {
    font-size: 2.2vw;
  }
  .num {
    font-size: 16vw;
  }
}@media (max-aspect-ratio: 4/3) {
  .eachblock{
    font-size: 4vw;
  }
}