:root{
  --clr-cyan: hsl(179, 62%, 43%);
  --clr-lighter-cyan: hsl(179, 47%, 52%);
  --clr-bright-yellow: hsl(71, 73%, 54%);
  --clr-darker-bright-yellow: hsla(71, 73%, 54%, 0.8);
  --clr-light-gray: hsl(204, 43%, 93%);
  --clr-grayish-blue: hsl(218, 22%, 67%);

  --ff-base: 'Karla', sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;
}

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: var(--ff-base);
  font-size: 1em;
  background-color: var(--clr-light-gray);

  /* Centering */
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  font-weight: var(--fw-regular);
}

.container{
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 0.3rem;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0px;
}

.container h1{
  font-size: 1.2em;
}

.first-box{
  background-color: #fefefe;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.first-box h1{
  color: var(--clr-cyan);
}

.first-box h3{
  color: var(--clr-bright-yellow);
}

.first-box p{
  color: var(--clr-grayish-blue);
}

.second-box{
  color: #fefefe;
  background-color: var(--clr-cyan);
  padding: 2rem;
  display: grid;
  gap: 1rem;
}

.second-box .dollar{
  font-weight: var(--fw-bold);
  font-size: 2em;
}

.second-box .per-month{
  font-weight: var(--fw-regular);
  color: var(--clr-light-gray);
}

.second-box .flex-group{
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.second-box .button{
  color: #fefefe;
  border-style: none;
  background-color: var(--clr-bright-yellow);
  padding: 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px 1px;
  margin-top: 1rem;
  transition: 0.3s;
  font-weight: var(--fw-bold);
}

.second-box .button:hover{
  background-color: var(--clr-darker-bright-yellow);
}

.third-box{
  color: #fefefe;
  background-color: var(--clr-lighter-cyan);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.third-box p{
  color: var(--clr-light-gray);
}

@media (min-width: 600px) {
  .first-box{
    grid-area: first;
  }
  .second-box{
    grid-area: second;
  }
  .third-box{
    grid-area: third;
  }

  .container{
    max-width: 40rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "first first"
    "second third"
    ;
  }
}