@import url('../style/background-image.scss');

.army-content-container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
  position: relative;
}

@media all and (max-width: 599px) {
  h1 {
    font-size: 26px;
    margin: 0.5em 0;
  }

  .army-content-container {
    width: 100%;
  }

  div.army-column {
    width: 100%!important;

    h3 {
      background: #222;
      font-size: 18px;
      margin: 0.2em 0;
      padding: 1.5vh 0;

      button {
        position: absolute;
        margin-top: -10px;
        display: inline-block;

        &.switch-btn-blufor {
          right: 5vw;
        }

        &.switch-btn-opfor {
          transform: rotate(180deg);
          left: 5vw;
        }

        mat-icon {
          width: 2.5em;
          height: 2.5em;
        }
      }
    }
  }
}

@media all and (max-width: 959px) {
  div.army-column {
    width: 49%;
  }
  .army-content-container {
    width: 98%;
  }
}

.army-column {
  width: 45%;
}

h1 {
  text-align: center;
}

h3 button {
  display: none;
}

.army-head {
  font-weight: bolder;
  text-align: center
}

.member-count {
  margin-top: 15px;
  padding: 8px;
  text-align: center;
  font-weight: bold;
  color: whitesmoke;
  background: #222222;
  border-radius: 12px;
}