.battle_date {
    position: absolute;
    bottom: 91%;
    right: 4%;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
  }
  @media screen and (max-width: 460px) {
    .battle_date {
    position: absolute;
    bottom: 91%;
    right: 2%;
    font-size:14px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    }
  }
  @media screen and (max-width: 430px) {
    .battle_date {
    position: absolute;
    bottom: 91%;
    right: 2%;
    font-size:13px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    }
  }
  @media screen and (max-width: 400px) {
    .battle_date {
    position: absolute;
    bottom: 91%;
    right: 2%;
    font-size:12px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    }
  }
  @media screen and (max-width: 360px) {
    .battle_date {
    position: absolute;
    bottom: 91%;
    right: 2%;
    font-size:11px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    }
  }
  @media screen and (max-width: 340px) {
    .battle_date {
    position: absolute;
    bottom: 91%;
    right: 2%;
    font-size:10px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    }
  }
  @media screen and (max-width: 325px) {
    .battle_date {
    position: absolute;
    bottom: 91%;
    right: 2%;
    font-size:9px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    }
  }
  @media screen and (max-width: 315px) {
    .battle_date {
    position: absolute;
    bottom: 91%;
    right: 2%;
    font-size:8px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    }
  }
  @media screen and (max-width: 300px) {
      .battle_date {
      position: absolute;
      bottom: 91%;
      right: 2%;
      font-size:8px;
      color: white;
      padding-left: 20px;
      padding-right: 20px;
    }
  }