style.css

a,
p {
  text-decoration: none;
  color: #fff;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background-color: #3b0357;
  font-family: 'Exo 2', sans-serif;
  height: 100vh;
  padding: 1vh;
  margin: 0;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  animation: background-color 10s cubic-bezier(1, 0.1, 0.68, 0.92) 0s infinite alternate;
}
body .primary-color {
  color: #f0532d;
}
body img {
  max-width: 100%;
}
body header {
  display: flex;
  justify-content: space-between;
}
body main {
  animation: text-color 10s cubic-bezier(1, 0.1, 0.68, 0.92) 0s infinite alternate;
}
body main .banner {
  text-align: center;
}
body main .banner p {
  margin: 0.5em;
  font-size: calc(3vw + 3vh);
}
body footer {
  display: flex;
  justify-content: space-around;
  flex-flow: row-reverse;
}
body footer .envelope {
  animation: text-color 10s cubic-bezier(1, 0.1, 0.68, 0.92) 0s infinite alternate;
}
body footer .envelope img {
  filter: invert(1);
  padding: 0.05em;
}
body footer img {
  height: 2em;
}
@-moz-keyframes background-color {
  0% {
    background-color: #3b0357;
  }
  100% {
    background-color: #ff1493;
  }
}
@-webkit-keyframes background-color {
  0% {
    background-color: #3b0357;
  }
  100% {
    background-color: #ff1493;
  }
}
@-o-keyframes background-color {
  0% {
    background-color: #3b0357;
  }
  100% {
    background-color: #ff1493;
  }
}
@keyframes background-color {
  0% {
    background-color: #3b0357;
  }
  100% {
    background-color: #ff1493;
  }
}
@-moz-keyframes text-color {
  0% {
    filter: invert(0);
  }
  100% {
    filter: invert(1);
  }
}
@-webkit-keyframes text-color {
  0% {
    filter: invert(0);
  }
  100% {
    filter: invert(1);
  }
}
@-o-keyframes text-color {
  0% {
    filter: invert(0);
  }
  100% {
    filter: invert(1);
  }
}
@keyframes text-color {
  0% {
    filter: invert(0);
  }
  100% {
    filter: invert(1);
  }
}