p,
h1 {
  font-family: sniglet;
  color: #595959;
}
input {
  cursor: pointer;
}
.bg_full {
  filter: brightness(60%);
}
.bg5 {
  width: 100%;
  height: 100%;
}
.title {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #0b5394ff;
  color: #fff;
  font-size: 2vw;
  padding: 2%;
}
.slide {
  background-color: #79a2e9;
}
.title1 {
  font-size: 1.5vw;
  padding: 1% 18%;
  background-color: #5a95b5;
  color: #fff;
  font-weight: 400;
}

.table5 {
  border: 2px solid #111;
  width: 60%;
  height: 90%;
  margin: 0.2% 5% 5%;
  background-color: #fff;
  font-size: 1.5vw;
  user-select: none;
  background-color: #fff2cc;
  font-family: sniglet;
}
.table5 th {
  border: 2px solid #111;
  padding: 2%;
  width: 10%;
}
.table5 td {
  border: 2px solid #111;
  padding: 2%;
  text-align: center;
  width: 15% !important;
  height: 100% !important;
}
.firstrow .thead {
  white-space: nowrap;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  display: inline-block;
}
.firstrow td {
  text-align: center;
  background-color: #fff;
}

/* for firefox only */
@-moz-document url-prefix() {
  .firstrow td {
    background-color: rgb(250 250 250 / 0.5);
  }
}

.firstrow td:has(img) {
  text-align: end;
}

.firstrow {
  height: 90%;
}
.treeblock {
  position: absolute;
  top: 25%;
  right: 3%;
  width: 30%;
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.treeimg {
  background-color: #fff2ccff;
  width: 80%;
  height: 70%;
  border: 2px solid #f1c232;
  /* padding: 5%; */
  position: relative;
  border-radius: 10px;
}
.tree {
  width: 100%;
  z-index: 1;
}

.treeback {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  z-index: 0;
}
.playclass {
  background-color: #3c78d8;
  border: 2px solid #073763;
  padding: 2% 9%;
  margin-top: 7%;
  border-radius: 7px;
  cursor: pointer;
  z-index: 103;
  color: #fff;
}
.playclass p {
  color: #fff;
  font-weight: 3vw;
}
.info {
  width: 5%;
  position: absolute;
  top: 0.6%;
  right: 2%;
  z-index: 102;
  cursor: pointer;
}
.infobox {
  position: absolute;
  top: 25%;
  right: 17%;
  width: 70%;
  height: 60%;
  background-color: #fff;
  border: 5px solid #7f6000;
  border-radius: 4vw;
  display: none;
  z-index: 103;
}
.infobox div {
  top: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.infobox table {
  border: 3px solid #000;
  width: 70%;
  justify-content: center;
  align-items: center;
  font-size: 1.3vw;
}
:lang(np).infobox table {
  margin-top: -3%;
}
.hidetree {
  display: none;
}
.infobox table tr td:first-of-type {
  background-color: #fff2ccff;
  font-weight: 800;
}
.infobox table tr td {
  border: 3px solid #000;
  padding: 2%;
  text-align: center;
}
.infobox table tr td:nth-child(2) {
  width: 60%;
}
.infobox div .cancle {
  width: 3%;
  position: absolute;
  top: -20%;
  right: 5%;
  cursor: pointer;
}
.check {
  display: block;
  user-select: none;
}
td.mango {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
td.litchi {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

td.orange {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
td.banana {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
td.guava {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.table5 .mangoimg,
.table5 .litchiimg,
.table5 .orangeimg {
  padding: 0;
  vertical-align: bottom;
}
.table5 .mangoimg .img_Mango,
.table5 .litchiimg .img_Lichi,
.table5 .litchiimg .img_banana,
.table5 .orangeimg .img_orange {
  width: 50%;
}
.imgMango {
  width: 50%;
  cursor: pointer;
  padding: 2%;
  margin: 0 !important;
}
.img_Mango,
.img_lichi,
.img_orange,
.img_banana {
  width: 20%;
  cursor: pointer;
  padding: 4%;
  margin: 0 auto !important;
  display: flex;
  justify-content: end !important;
}
.wrong {
  width: 3%;
  position: absolute;
  top: 75%;
  right: 12%;
  z-index: 105;
  display: none;
}
.correct {
  width: 3%;
  position: absolute;
  top: 75%;
  right: 12%;
  z-index: 105;
  display: none;
}
.td {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50%;
}

@media (min-aspect-ratio: 4/3) {
  .table5 {
    height: 84%;
    width: 63%;
  }
  .title1 {
    font-size: 3vh;
  }
}