* {
  margin: 0px;
}

.site-container {
  background-color: #2E4374;
  height: 100vh;
  display: grid;
  grid-template-areas: "header header header header" "side1 content content side2" "footer footer footer footer";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 10% auto 10%;
}

.header {
  grid-area: header;
  color: #E5C3A6;
  background-color: #4B527E;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
}

.col1 {
  grid-area: side1;
  color: #E5C3A6;
  display: flex;
  flex-direction: column;
  padding: 10px;
  align-items: center;
  gap: 40px;
  font-size: 1.5rem;
  border-right: solid 2px #7C81AD;
}
.col1 img {
  max-height: 80px;
}

.col2 {
  grid-area: side2;
  color: #E5C3A6;
  display: flex;
  flex-direction: column;
  padding: 10px;
  align-items: center;
  gap: 40px;
  font-size: 1.5rem;
  border-left: solid 2px #7C81AD;
}
.col2 img {
  max-height: 80px;
}

.player-profile, .choice-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.player-profile img {
  border-radius: 50%;
}

.game {
  grid-area: content;
  color: #7C81AD;
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 30px;
}

.choices {
  display: flex;
  gap: 20px;
}
.choices img {
  max-height: 64px;
}
.choices button {
  background-color: transparent;
  padding: 10px;
}

.footer {
  grid-area: footer;
  color: #E5C3A6;
  background-color: #4B527E;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
}

.reset {
  padding: 10px 20px;
  color: #2E4374;
  background-color: #7C81AD;
  border-radius: 10px;
}/*# sourceMappingURL=style.css.map */