:root {
  font-family: 'Source Code Pro', monospace;
  --red: #d63031;
  --black: #2d3436;
  --green: #00b894;
  --white: #fff;
  --medPadding: 1rem;
  --body-text: 1rem;
  --smallertxt: calc(var(--body-text) * 0.75);
  --largetxt: calc(var(--body-text) * 1.5);
  --smallCard: 1.5rem;
  --largeCard: calc(var(--smallCard) * 1.5);
}

body {
  display: grid;
  text-align: center;
  grid-template-rows: 1.6rem 70% 1fr;
  grid-gap: var(--medPadding);
  color: var(--black);
}

.card {
  font-size: var(--smallCard);
  margin-bottom: 0.313rem;
}

h1 {
  font-size: var(--largetxt);
}

nav {
  grid-area: 1/ 1 / 2 / 3;
  display: grid;
  grid-template-columns: 1fr 25%;
}

nav h1 {
  margin: 0;
}

.play-area {
  grid-column: 1/3;
  display: grid;
  grid-template-rows: 2.5rem 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

#msg {
  grid-area: 1/ 1 / 2 / 5;
  margin: 0;
  font-size: var(--body-text);
  text-transform: uppercase;
}

#p-1 {
  grid-area: 2 / 1 / 3 / 2;
}

#battle-arena {
  grid-area: 2 / 1 / 3 / 5;
  padding: var(--medPadding);
}

#p-2 {
  grid-area: 2 / 4 / 3 / 5;
}

#p-1,
#p-2 {
  padding: var(--medPadding);
  font-size: var(--smallertxt);
}

footer {
  grid-area: 3 / 1 / 4 / 3;
  padding-top: 0.625rem;
}

.winner {
  box-shadow: 0.125rem 0.125rem 0.188rem 0 rgb(214 48 49 / 0.7) !important;
}

.cards-left {
  padding: 0.4rem;
  margin: 0;
}

.eyebrow {
  padding-top: 1rem;
  font-weight: 200;
  text-transform: uppercase;
  font-size: var(--smallertxt);
}

.btn {
  font-family: 'Source Code Pro', monospace;
  background-color: var(--green);
  color: var(--white);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  border: none;
  border-radius: 2.813rem;
}

.btn:hover {
  box-shadow: 0 0.938rem 1.25rem rgba(46, 229, 157, 0.1);
  transform: translateY(-1px);
}

button:disabled,
button[disabled] {
  background-color: var(--red);
}

.card.outline {
  background-color: var(--white);
}

@media (min-width: 1000px) {
  :root {
    --body-text: 1.2rem;
    --medPadding: 1.2rem;
  }

  #msg {
    padding-top: 0.5rem;
  }

  .card {
    font-size: var(--largeCard);
  }

}