html {
  background-color: black;
}

h1 {
  color: #FFF;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: bold;
  font-size: 500%;
  letter-spacing: 1px;
  position: fixed;
  top: 30%;
  left: 15%;
  z-index:1;
}

a:hover {
  font-size: 90%;
}

.colour {
  opacity: 0;
  animation-name: stay;
  animation-duration: 90s;
  -webkit-animation-duration: 90s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

@keyframes stay {
  0% {
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  98% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@-webkit-keyframes stay {
  0% {
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  98% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.cont {
  position: fixed;
  right: 30px;
  top: -70px;
  z-index:0;
}

.slideRight {
  animation-name: slideRight;
  -webkit-animation-name: slideRight;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

@keyframes slideRight {
  0% {
    transform: translateX(-250%);
    opacity: 0;
  }

  75% {
    transform: translateX(8%);
    opacity: 0.9;
  }

  90% {
    transform: translateX(-4%);
    opacity: 1;
  }

  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(-250%);
    opacity: 0;
  }

  75% {
    -webkit-transform: translateX(8%);
    opacity: 0.9;
  }

  90% {
    -webkit-transform: translateX(-4%);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
}


.active {-webkit-animation: colourchange 1.8s linear infinite;animation: colourchange 1.8s linear infinite;}

.activeTemp {-webkit-animation: colourchange 1.8s linear 2;animation: colourchange 1.8s linear 2;}


@-webkit-keyframes colourchange {
  0% {
    fill: #0057B8;
  }

  20% {
    fill: #F11E4A;
  }

  40% {
    fill: #F8A527;
  }

  60% {
    fill: #266D7F;
  }

  80% {
    fill: #82A;
  }

  100% {
    fill: #0057B8;
  }
}

@keyframes colourchange {
  0% {
    fill: #0057B8;
  }

  20% {
    fill: #F11E4A;
  }

  40% {
    fill: #F8A527;
  }

  60% {
    fill: #266D7F;
  }

  80% {
    fill: #82A;
  }

  100% {
    fill: #0057B8;
  }
}