/**
 * 1. Set default font family to montserrat.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: "Roboto", sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/**
     * Remove default margin and padding.
     */

body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
}

.background {
  display: grid;
  grid-template-columns: 25vw 25vw 15vw 10vw 1fr;
  grid-template-rows: 20vh 30vh 15vh 1fr;
}

.shape-1 {
  grid-row: 4;
}

.shape-2 {
  grid-column: 2;
  grid-row: 2/2;
}

.shape-3 {
  grid-column: 4;
  grid-row: 3;
  z-index: 1;
}

.shape-4 {
  grid-column: 5;
  grid-row: 1/4;
}

.circle-pink {
  background-color: #e1afb0;
  border-radius: 0 100% 0 0;
  height: 45vh;
}

.circle-red {
  background-color: #e85a6a;
  width: 250px;
  height: 250px;
  border-radius: 100%;
}

.circle-yellow {
  background-color: #dfb545;
  width: 250px;
  height: 250px;
  border-radius: 100%;
}

.square-blue {
  background-color: #4189bb;
  width: 100%;
  height: 100%;
}

.main-text-box {
  grid-column: 1 / span 2;
  grid-row: 1/4;
  margin: auto;
}

.main-text-box h1 {
  font-size: 6em;
}

.main-text-box h3 a {
  text-decoration: none;
  color: inherit;
}

.paragraph-1 {
  font-weight: 300;
  grid-column: 3 / span 2;
  grid-row: 1/3;
  line-height: 2em;
  margin: auto;
  padding: 0 2em;
}

.paragraph-2 {
  grid-column: 3 / span 2;
  grid-row: 3 / span 2;
  z-index: 2;
}

.paragraph-2 p {
  line-height: 2em;
  margin: auto;
  padding: 0 2em;
  font-weight: 300;
}

.paragraph-3 {
  grid-column: 5;
  grid-row: 4;
  line-height: 2em;
  margin: auto;
  padding: 0 2em;
  font-weight: 300;
  z-index: 3;
}