@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Urbanist:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

html > body {
  margin: 0px;
}

html > body > main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 5vw;
}

html > body > header {
  width: 100%;
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  padding: 0 20vw;
  display: flex;
  align-items: center;
  background-color: #F1F1EF;
  height: 66px;
  color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
}

html > body #title { width: 100% }
html > body #content {
  display: flex;
  flex-direction: row;
  max-width: 900px;
}
html > body #content .actions { margin: 10px 20px; }
html > body #content .actions a {
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  margin-bottom: 20px;
  text-align: center;
  background-color: #56ACB7;
  border-radius: 25px;
}

html > body #content .txt { width: 100%; }

html > body h1 {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  color: white;
  font-size: 45px;
  height: 6em;
  background: linear-gradient(0.25turn, #F37071, #F34D5F);
  display: flex;
  align-items: flex-end;
  padding: 10px 20vw;
}

html > body h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  color: #285264;
}

html > body h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  margin-top: 25px;
  text-transform: uppercase;
  font-size: 14px;
  color: #285264;
}

html > body p, ul {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #285264;
  font-size: 12px;
}
html > body p.subtitle { font-weight: 700; }