:root {
  --stnd-darkgreen: rgb(68, 82, 87);
  --stnd-limegreen: rgb(70, 180, 80);
  --stnd-darkblue: rgb(48, 60, 72);
  --stnd-lightblue: rgb(150, 168, 185);
  --stnd-white: rgb(204, 211, 211);
  --stnd-red: rgb(192, 43, 10);
  --stnd-lightgray: rgb(210, 210, 210);
  --stnd-medgray: rgb(100, 100, 100);
  --stnd-darkgray: rgb(50, 50, 50);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: var(--stnd-darkgreen);
  height: 8.5in;
  width: 11.5in;
}

div{
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  }

span {
  vertical-align: middle;
  line-height: normal;
}

h1{
  font-family: "Times New Roman", Sans-serif;
  padding:2px;
  text-align: center; /* this may also align non text such as img etc only centers horizontally */
  padding-right: 0.125in;
  padding-left: 0.125in;
  font-size:100px;
  color: var(--stnd-lightblue);
  animation-name: fadein;
  animation-duration: 14s;
  animation-iteration-count: 5;

  /* Firefox */
    moz-animation-name: fadein;
    moz-animation-duration: 14s;
    moz-animation-iteration-count: 5;

  /* Safari and Chrome */
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 14s;
    -webkit-animation-iteration-count: 5;

  /* Opera */
    -o-animation-name: fadein;
    -o-animation-duration: 14s;
    -o-animation-iteration-count: 5;
  }

@keyframes fadein {
    0% {
    opacity:100%;
    color:var(--stnd-lightblue);
    }

    20% {
    opacity:100%;
    color:var(--stnd-limegreen);
    }

    40% {
    opacity:100%;
    color:var(--stnd-white);
    }

    60% {
    opacity:100%;
    color:var(--stnd-red);
    }

    80% {
    opacity:100%;
    color:var(--stnd-lightblue);
    }
}