@import 'my_root.css';
html,
body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  background: var(--my-game-bgcolor);
}
.my_ifram {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.my_ifram iframe {
  width: 100%;
  height: 100%;
}
.games_all {
  width: 80%;
  max-width: 800px;
  margin: 30px auto;
}
.games_all a {
  text-decoration: none;
}
@media (max-width: 420px) {
  .games_all {
    width: 100%;
  }
}
.my_box {
  padding: 15px;
}
.my_box .game_play {
  width: 80%;
  max-width: 800px;
  margin: 30px auto;
  border-radius: 15px;
  overflow: hidden;
}
.my_box .game_play .img_box {
  position: relative;
  display: flex;
}
.my_box .game_play .img_box .img {
  width: 100%;
  display: flex;
}
.my_box .game_play .img_box .img img {
  width: 100%;
}
.my_box .game_play .img_box .play_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes mymove {
  25% {
    transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
  }
  50% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  75% {
    transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
}
.my_box .game_play .img_box .play_box a {
  text-decoration: none;
}
.my_box .game_play .img_box .play_box .play {
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 12.8vw;
  width: 260px;
  height: 60px;
  font-size: var(--my-game-play-font-size-big);
  font-weight: var(--my-game-play-font-weight);
  color: var(--my-game-play-color);
  background: var(--my-game-play-bgcolor);
  border-radius: 25px;
  animation: mymove 0.5s infinite;
  -webkit-animation: mymove 0.5s infinite;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: 2;
}
@media (max-width: 750px) {
  .my_box .game_play .img_box .play_box .play {
    font-size: var(--my-game-play-font-size-sm);
    height: 11.2vw;
    width: 43vw;
  }
}
.my_box .game_play .game_title {
  padding: 10px;
  background: var(--my-game-game-title-bgcolor);
  display: flex;
  align-items: center;
}
.my_box .game_play .game_title img {
  margin-right: 15px;
  width: 50px;
  border-radius: 1vw;
}
.my_box .game_play .game_title .title {
  font-size: var(--my-game-game-title-font-size-big);
  font-weight: var(--my-game-game-title-font-weight);
  color: #fff;
}
@media (max-width: 750px) {
  .my_box .game_play .game_title img {
    margin-right: 3vw;
    width: 9vw;
  }
  .my_box .game_play .game_title .title {
    font-size: var(--my-game-game-title-font-size-sm);
  }
}
.my_box .game_detail {
  width: 80%;
  max-width: 800px;
  margin: 10px auto;
  background: var(--my-game-detail-bgcolor);
  border-radius: 13px;
  padding: 20px 0px;
}
.my_box .game_detail .title {
  padding: 0px 20px;
  color: var(--my-game-detail-title-color);
  font-size: var(--my-game-detail-title-font-size-big);
  overflow: hidden;
  font-weight: var(--my-game-detail-title-font-weight);
}
.my_box .game_detail .detailed {
  padding: 0px 20px;
  padding-bottom: 60px;
  margin-top: 10px;
  color: var(--my-game-detail-detailed-color);
  font-size: var(--my-game-detail-detailed-font-size-big);
}
@media (max-width: 750px) {
  .my_box .game_detail {
    padding: 3.5vw 0px;
    border-radius: 3.5vw;
  }
  .my_box .game_detail .title {
    padding: 0px 3.5vw;
    font-size: var(--my-game-detail-title-font-size-sm);
  }
  .my_box .game_detail .detailed {
    padding: 0px 3.5vw;
    padding-bottom: 16vw;
    font-size: var(--my-game-detail-detailed-font-size-sm);
  }
}
@media (max-width: 420px) {
  .my_box .game_detail {
    width: 100%;
  }
  .my_box .game_play {
    width: 100%;
  }
}
.go_home {
  position: fixed;
  top: 55px;
  background: var(--my-game-go-home-bgcolor);
  border-radius: 0px 25px 25px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.go_home a {
  padding: 5px 10px;
}
.go_home a img {
  width: 30px;
}
@media (max-width: 750px) {
  .go_home a {
    padding: 1vw 1.5vw;
  }
  .go_home a img {
    width: 9vw;
  }
}