click.css

body {
    background-color: #f5f5f5;
    font-size: 25px;
}
main {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}
main button.click {
    height: 25px;
}

main div {
  justify-self: center;
}

.arena {
  height: 50vh;
  justify-self: center;
  align-self: center;
}

.arena button {
}

.upgrades ul {
  list-style-type: none;
}

@media only screen {
}

/* Define mobile styles */

@media only screen and (max-width: 40em) {
  main div.arena button.click {
    height: 110px !important;
    width: 180px;
  }
}

/* max-width 640px, mobile-only styles, use when QAing mobile issues */

@media only screen and (min-width: 40.063em) {
}

/* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    main div.arena button.click {
      height: 110px !important;
      width: 180px;
      font-size: 2em;
    }
    main div.upgrades button {
        height: 110px !important;
        font-size: 2em;
    }
}

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

@media only screen and (min-width: 64.063em) {
}

/* min-width 1025px, large screens */


@media only screen and (min-width: 64.063em) and (max-width: 90em) {}

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

@media only screen and (min-width: 90.063em) {
}

/* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {}

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

@media only screen and (min-width: 120.063em) {
}

/* min-width 1921px, xxlarge screens */