:root {
  --purple: #7E3565;
  --purple-dark: #4c203d;
  --jade: #408182;
  --jade-dark: #264d4e;
  --blue: #3258B8;
  --blue-dark: #1e356e;
}

body {
  padding: 40px 30px;
}

.header {
  display: flex;
  align-items: center;
  font-size: 2rem;

  img {
    height: 3.5em;
  }

  h1 {
    margin: 0;
    font-family: 'Sukar', Helvetica, sans-serif;
    font-size: inherit;
  }
}

h2 {
  margin: 40px 0;
  text-align: center;
  text-wrap: balance;
}

h2, .footer {
  font-family: 'Fredoka One', Helvetica, sans-serif;
}

h2, p {
  color: white;
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.instagram {
  width: 300px;
  height: 300px;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;

  p {
    padding: 0 20px;
    text-align: center;
  }
}

.border-right {
  border-right: 1px solid white;
}

.bg-purple-gradient {
  background: var(--purple);
  background: -moz-linear-gradient(to bottom, var(--purple) 0%, var(--purple-dark) 100%);
  background: -webkit-linear-gradient(to bottom, var(--purple) 0%, var(--purple-dark) 100%);
  background: linear-gradient(to bottom, var(--purple) 0%, var(--purple-dark) 100%);
}

.bg-jade-gradient {
  background: var(--jade);
  background: -moz-linear-gradient(to bottom, var(--jade) 0%, var(--jade-dark) 100%);
  background: -webkit-linear-gradient(to bottom, var(--jade) 0%, var(--jade-dark) 100%);
  background: linear-gradient(to bottom, var(--jade) 0%, var(--jade-dark) 100%);
}

.bg-blue-gradient {
  background: var(--blue);
  background: -moz-linear-gradient(to bottom, var(--blue) 0%, var(--blue-dark) 100%);
  background: -webkit-linear-gradient(to bottom, var(--blue) 0%, var(--blue-dark) 100%);
  background: linear-gradient(to bottom, var(--blue) 0%, var(--blue-dark) 100%);
}