body {
    background: black;
    color: white;
    font-family: Garamond, serif;
    font-size: 3vw;
}

p {
    padding: 10px;
}

@keyframes example1 {
    0%   { color: black;  }
    16%  {   color: white;  }
    67%  {   color: black;  }
    100% {   color: black;  }
}


@keyframes example2 {
    0%   { color: black;  }
    16%  { color: black;  }
    33%  { color: white;  }
    83%  { color: black;  }
    100% { color: black;  }
}


@keyframes example3 {
    0%   { color: black;  }
    33%  { color: black;  }
    50%  { color: white;  }
    100% { color: black;  }
}


.Aligner {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    justify-content: center;
}

.Aligner--item {
    text-align: center;
}


.Aligner--fader1 {
    animation-name: example1;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}

.Aligner--fader2 {
    animation-name: example2;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}

.Aligner--fader3 {
    animation-name: example3;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}


.Aligner--item__image {
    height: 8vw;
    width: 8vw;
}