html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* font-family: 'sunflower'; */
    font-family: 'Public Sans', sans-serif;
}
html { 
    background: url(../assets/ANIMATION/loopBgTwo.gif) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
/* body {
    animation: colorchange 40s;
    -webkit-animation: colorchange 40s;
    animation-iteration-count: infinite;
  }
  @keyframes colorchange
  {
    0% {background: rgb(162, 229, 212);}
    25%   {background: rgb(228, 232, 202);}
    50%  {background: rgb(236, 194, 178);}
    75%  {background:rgb(200, 196, 239);}
    100%  {background: rgb(162, 229, 212);} 
  }

  @-webkit-keyframes colorchange
  {
    0% {background: rgb(162, 229, 212);}
    25%   {background: rgb(228, 232, 202);}
    50%  {background: rgb(236, 194, 178);}
    75%  {background: rgb(200, 196, 239);}
    100%  {background: rgb(162, 229, 212);} 
  } */
  #container {
      position: absolute;
      width: 70%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
  }
  h1 a, h2 a {
      color: white;
      font-weight: 600;
  }
  h1, h2 {
    font-style: italic;
    font-size: 3rem;
    font-weight: 300;
    color: white;
  }
  @media only screen 
and (max-device-width: 812px) {
    #container {
        width: 90%;
    }
    h2 {
        position: relative;
        top: 40px;
    }
}