.hidden {
  display: none !important;
}

.game {
  position: relative;
  left: 20%;
}

.invisble {
  visibility: hidden;
}

.tile-container {
  display: grid;
  grid-template-rows: 180px 180px;
  grid-template-columns: 180px 180px;
  grid-gap: 20px;
  position: relative;
  align-self: center;
  margin-top: 30px;
  margin-bottom: 40px;
}

.unclickable {
  pointer-events: none;
}

.tile-red {
  background-color: #FF2E00;;
  transition: 0.15s;
}

.tile-red:hover,
.tile-red:focus {
  background-color: #FF481F;
}

.tile-green {
  background-color: #26C485;
  transition: 0.15s;
}

.tile-green:hover,
.tile-green:focus {
  background-color: #31D895;
}

.tile-yellow {
  background-color: #FFC145;
  transition: 0.15s;
}

.tile-yellow:hover,
.tile-yellow:focus {
  background-color: #FFC95C;
}

.tile-yellow:active,
.tile-yellow.activated,
.tile-blue:active,
.tile-blue.activated,
.tile-green:active,
.tile-green.activated,
.tile-red:active,
.tile-red.activated {
  background-color: #B4ACA7;
  transform: translateY(10px);
}

.tile-blue {
  background-color: #5E7CE2;
  transition: 0.15s;
}

.tile-blue:hover,
.tile-blue:focus {
  background-color: #758FE6;
}

.info-section {
  position: relative;
  align-self: center;
  margin-left: 70px;
}

.info {
  font-size: 22px;
}

@media screen and (max-width: 550px) {
  .game {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .tile-container {
    width: 100%;
    height: 100%;
    grid-template-rows: 150px 150px;
    grid-template-columns: 150px 150px;
  }
}