style.styl

// Variables
$text-color = white
$primary-color = #f0532d //rgb(240, 83, 45)
$background-color = rgb(59,3,87)
$background-color-to = deeppink
$animation-delay = 0s
$animation-duration = 10s
$animation-timing-function = cubic-bezier(1, 0.1, 0.68, 0.92)

// Animations
@keyframes background-color
    0%
      background-color: $background-color
    100%
      background-color: $background-color-to

@keyframes text-color
    0%
      filter: invert(0)
    100%
      filter: invert(1)

animate(animation)
  animation: animation $animation-duration $animation-timing-function $animation-delay infinite alternate

// Reset browser basic styling
a, p
  text-decoration: none
  color: $text-color
html
  box-sizing: border-box
*, *:before, *:after
  box-sizing: inherit

// Main style
body
  background-color: $background-color
  font-family: 'Exo 2', sans-serif
  height: 100vh
  padding: 1vh
  margin: 0
  display: flex
  flex-flow column
  justify-content: space-between
  animate(background-color)
  .primary-color
    color: $primary-color
  img
    max-width: 100%
  header
    display: flex
    justify-content: space-between;
  main
    animate(text-color)
    .banner
      text-align: center
      p
        margin: 0.5em
        font-size: calc(3vw + 3vh)
  footer
    display: flex
    justify-content: space-around
    flex-flow: row-reverse
    .envelope
      animate(text-color)
      img
        filter: invert(1)
        padding: 0.05em
    img
      height: 2em