body {
  background: linear-gradient(
    rgb(255, 208, 0),
    orange,
    rgb(233, 204, 149),
    orange
  );
}
h3 {
  font-style: italic;
  font-family: "Beaufort for LOL", NotoSans-Medium, serif;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgb(254, 246, 243);
  line-height: 0.85;
  margin-top: 120px;
}

button {
  display: block;
  height: 50px;
  width: 230px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 600;
  background-color: #3ac7ff;
  color: #fff;
  transition: width 0.35s;
}

button:hover {
  background-color: #67d4ff;
  width: 200px;
}

/* showpage  */
.showpage {
  height: 700px;
  /* background-color: orange; */
  background: url(../images/cloud-1.png) no-repeat;
  background-size: 100%;
  text-align: center;
}

.showpage .vid_container {
  overflow: hidden;
  position: relative;
  height: 800px;
  width: 1000px;
  margin: 0 auto;
}

.showpage .vid_container video {
  margin-top: 60px;
  /* height: 800px; */
  width: 100%;
}
.showpage .news_banner_frame {
  position: absolute;
  width: 95%;
  top: 30px;
  left: 20px;
}
.showpage .vid_container .vid_cover {
  position: absolute;
  top: 60px;
  right: 0;
  width: 100%;
}

.showpage .vid_container .vid_cover > img {
  height: 200px;
  width: 400px;
  margin: 90px auto;
}

/* .showpage .vid_container .vid_cover button {
    display: block;
    height: 50px;
    width: 230px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 700;
    background-color: skyblue;
}
.showpage .vid_container .vid_cover button:hover {
    background-color: aliceblue;
} */
.showpage .vid_container .vid_cover h5 {
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin-top: 20px;
}

.showpage .vid_container .vid_cover .download_app {
  height: 100px;
  width: 400px;
  margin: 0 auto;
}

.showpage .vid_container .vid_cover .download_app .google_store {
  width: 150px;
}

.showpage .vid_container .vid_cover .download_app .apple_store {
  width: 120px;
}

.showpage h5 {
  letter-spacing: 2px;
}

/* battle start  */
.battle {
  position: relative;
  /* background-color: yellow; */
  text-align: center;
  padding: 30px 0 40px;
}

.battle h3,
.mobile h3,
.emote h3 {
  font-size: 80px;
  font-weight: 1700;
  color: white;
}

.battle p,
.mobile p,
.emote p {
  font-size: 18px;
  font-weight: 400;
  padding: 20px 0 30px;
}

/* .battle button {
    height: 50px;
    width: 230px;
    margin: 65px auto;
    font-size: 16px;
    font-weight: 700;
    background-color: skyblue;
} */

.battle .pengu {
  position: absolute;
  top: -200px;
  right: -60px;
  width: 300px;
  z-index: 1;
  transition: transform 0.8s;
}
.battle .pengu:hover {
  transform: translate(-5px, -5px);
}

.battle .portal {
  position: absolute;
  bottom: -100px;
  left: -60px;
  width: 300px;
  z-index: 1;
  transition: transform 1.5s;
}

.battle .portal:hover {
  transform: rotate(4deg);
}

/* mobile start  */
.mobile {
  /* background-color: lightcoral; */
  text-align: center;
}

.mobile_demo {
  position: relative;
  height: 500px;
  /* background-color: yellow; */
}

.mobile_demo .phone_frame {
  position: absolute;
  top: 0px;
  left: 220px;
  width: 760px;
  height: 490px;
  z-index: 2;
}

.mobile_demo video {
  position: absolute;
  top: 80px;
  left: 100px;
  width: 1000px;
  height: 320px;
  z-index: 1;
}

.mobile_demo .phone_cloud {
  position: absolute;
  top: 300px;
  left: 400px;
  width: 580px;
  z-index: 3;
}

/* emote start  */
.emote {
  position: relative;
  /* background-color: yellow; */
  background: url(../images/cloud-1.png) no-repeat;
  background-size: 100%;
  text-align: center;
}

.emote_char {
  padding: 50px 0;
}

@keyframes furyhorn_move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(4px, 3px);
  }
  50% {
    transform: translate(5px, 6px);
  }
  75% {
    transform: translate(3px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.emote_char .furyhorn {
  width: 320px;
  animation-name: furyhorn_move;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes hauntling_move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(4px, 5px);
  }
  50% {
    transform: translate(7px, 5px);
  }
  75% {
    transform: translate(5px, 5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.emote_char .hauntling {
  width: 320px;
  animation-name: hauntling_move;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes hushtail_move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(2px, 5px);
  }
  50% {
    transform: translate(6px, 3px);
  }
  75% {
    transform: translate(3px, 5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.emote_char .hushtail {
  width: 380px;
  animation-name: hushtail_move;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

/* season3 start  */
.season3 {
  position: relative;
  /* background-color: aliceblue; */
  height: 630px;
  background: url(../images/cloud-2.png) no-repeat;
  background-size: 100%;
}

.season3 .season3_intro {
  /* background-color: pink; */
  position: relative;
  height: 550px;
  width: 1050px;
  margin: 0 auto;
}

.season3 .season3_intro h3 {
  margin: 20px 0;
}

.season3_intro .news_banner_frame {
  position: absolute;
  width: 90%;
  height: 97%;
  top: 0px;
  left: 30px;
  z-index: 1;
}

.season3_content {
  height: 500px;
  width: 500px;
  padding: 40px 100px 0;
}

.season3_intro h6 {
  color: black;
  font-size: 18px;
}

.season3_intro h3 {
  font-size: 60px;
  color: #000;
}

.season3_intro p {
  font-size: 16px;
  color: #000;
}

.season3_intro h5 {
  font-size: 12px;
  color: #000;
}

.season3_intro img {
  position: absolute;
  top: 180px;
  right: 30px;
  width: 470px;
  z-index: 2;
}
.season3_content h6 {
  font-style: italic;
  letter-spacing: 1px;
}

/* lastest news start   */
.latest_news {
  height: 500px;
  /* background-color: pink; */
}
.latest_news h2 {
  font-style: italic;
}
.latest_news h5 {
  float: right;
  color: #000;
}

.news_header {
  height: 100px;
  line-height: 100px;
  padding: 0 30px;
}
.news_header > h2 {
  float: left;
  font-size: 40px;
}

.news_header > h5 {
  float: right;
  font-size: 20px;
}

.news_container ul li {
  position: relative;
  float: left;
  width: 300px;
  /* background-color: lightpink; */
  /* border: 2px solid black; */
  text-align: center;
  margin: 0 45px;
  padding-bottom: 30px;
}

.news_container ul li .news_image {
  position: absolute;
  top: 0;
  left: 30px;
  z-index: 2;
}

.news_container ul li .news_banner_frame {
  position: absolute;
  top: 18px;
  left: 0;
  height: 98%;
  width: 100%;
  z-index: 1;
}

.news_container ul li h4,
.news_container ul li p {
  text-align: left;
  margin: 10px 40px;
  color: #000;
}

.news_container ul li h4 {
  font-size: 16px;
  padding-top: 150px;
}
.news_container ul li img {
  /* height: 300px; */
  width: 80%;
}

/* how to play  */
.how_to_play {
  height: 800px;
  /* background-color: antiquewhite; */
}

.how_to_play_header {
  text-align: center;
}

.how_to_play_header h3 {
  font-size: 60px;
  color: white;
}

.how_to_play p {
  font-size: 18px;
  color: #000;
  margin-top: 20px;
}

.how_to_play_video {
  position: relative;
  text-align: center;
  margin-top: 20px;
}
.how_to_play_video iframe {
  position: absolute;
  top: 0;
  left: 90px;
  z-index: 2;
}

.how_to_play_video .news_banner_frame {
  position: absolute;
  top: -30px;
  left: 70px;
  height: 108%;
  width: 88%;
  z-index: 1;
}

/* game on  */
.game_on {
  padding-top: 40px;
}

.game_on_header {
  text-align: center;
}

.game_on_header h4 {
  font-size: 18px;
  color: #fff;
  font-style: italic;
  letter-spacing: 2px;
}

.game_on_header h3 {
  font-size: 60px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.chest_board {
  position: relative;
  height: 600px;
  overflow: hidden;
}

.chest_board img {
  width: 101%;
}

.chest_board .layer_background {
  position: absolute;
  bottom: 0;
  z-index: 1;
}

@keyframes layer1_move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(4px, 8px);
  }
  50% {
    transform: translate(10px, 3px);
  }
  75% {
    transform: translate(8px, 5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.chest_board .layer1 {
  position: absolute;
  bottom: -10px;
  left: -10px;
  z-index: 2;
  animation-name: layer1_move;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes layer2_move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(6px, 4px);
  }
  50% {
    transform: translate(-2px, 10px);
  }
  75% {
    transform: translate(4px, -2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.chest_board .layer2 {
  position: absolute;
  bottom: -10px;
  left: -10px;
  z-index: 4;
  animation-name: layer2_move;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes layer3_move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(5px, 4px);
  }
  50% {
    transform: translate(9px, 6px);
  }
  75% {
    transform: translate(5px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.chest_board .layer3 {
  position: absolute;
  bottom: -10px;
  left: -10px;
  z-index: 3;
  animation-name: layer3_move;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}