* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /*This is to make sure that the padding and border are included in the total width and height of the element */
}

::selection {
  background-color: rgba(109, 36, 155, 0.9);
  color: #fff;
}

textarea {
  all: unset;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #e1e8eb; /* Common practice to add a little bit of blue to a grey background */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.background {
  position: absolute;
  top: 0;
  z-index: -1;
  height: 254px;
  width: 100%;
  background-image: linear-gradient(
      to right,
      rgba(101, 0, 163, 0.9),
      rgba(24, 120, 175, 0.9)
    ),
    url("https://images.unsplash.com/photo-1546453667-8a8d2d07bc20?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=100");
}

.first-heading {
  font-size: 65px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 75px;
}

.first-heading--special {
  font-weight: 300;
}

.container {
  width: 1050px;
  height: 520px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  margin-top: 55px;
  display: flex;
  overflow: hidden; /* Hides overflow of right side corners to maintain roundness */
}

.textarea {
  resize: none;
  flex: 2; /* textarea should get 2 portions of the available flex */
  font: inherit; /* Inputs and textareas often ignore font inheritance */
  padding: 30px 40px; /* Padding y, x */
  font-size: 22px;
}

.textarea::placeholder {
  font-weight: 500;
  color: #959c9f;
}

.stats {
  flex: 1.3; /* stats should get 1.3 portions of the available flex */
  background-color: #f1f6f8;
  display: flex;
  flex-wrap: wrap;
}

.stat {
  flex: 1 150px; /* 1 portion of the available flex and a minimum width of 150px. This will force wrap after 2 el*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Element with a class of stat, that is also the 1st and 2nd child */
.stat:nth-child(1),
.stat:nth-child(2) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.stat:nth-child(2),
.stat:nth-child(4) {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.stat__number {
  color: #4d5457;
  font-weight: 600;
  font-size: 35px;
  margin-bottom: 10px;
}

.stat__number--limit {
  color: rgb(228, 77, 77);
}

.second-heading {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  color: #747a7c;
}

.footer {
  width: 1050px;
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  opacity: 0.4;
}

@media (max-width: 1150px) {
  .container {
    width: 85vw;
    flex-direction: column;
  }

  .first-heading {
    font-size: 7vw;
  }

  .stat {
    padding: 15px 10px;
  }

  .stat:nth-child(1),
  .stat:nth-child(2),
  .stat:nth-child(4) {
    border: none;
  }

  .stat__number {
    font-size: 20px;
  }

  .footer {
    width: initial;
    flex-direction: column;
    align-items: center;
    padding: 0px 10px;
    text-align: center;
  }
}