:root {
  --xviColorWhite: #ffffff;
  --xviColorDarkgrey: #3a3c42;
  --xviColorBlue: #009bc0;
  --xviColorGreen: #6bc4b7;
  --xviColorDarkblue: #00557f;
  --xviColorBeige: #d3ae9f;
  --xviColorPink: #f08ca6;
  --xviColorOrange: #f18b6e;
  --xviColorYellow: #e3dd93;
  --xviColorBrown: #b55a59;
  --xviColorLightgrey: #bcbfc1;
  --xviColorLightblue: #6cbbd3;
}

body {
  margin: inherit;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 1vw;
  font-style: normal;
  font-variant: normal;
  font-weight: 100;
  text-rendering: optimizeLegibility;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  background-color: var(--xviColorWhite);
  background-color: #ffffff;
  animation-name: xviBgColors;
  animation-duration: 10s;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.xviColors{
  opacity:0;
  position: absolute;
  left:0;
  top:0;
  width: 7vw;
  height: 100vh;
  animation-name: xviColorsFadeIn;
  animation-duration: 2s;
  animation-delay: 8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.xviLogo {
  opacity:0;
  position: absolute;
  margin: auto;
  right:0;
  left:0;
  top:0;
  bottom:0;
  max-width: 65vw;
  height: auto;
  animation-name: xviLogoFadeIn;
  animation-duration: 8s;
  animation-delay: 0s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

footer {
  color: var(--xviColorWhite);
  color: #ffffff;
  opacity:0;
  position: absolute;
  bottom:2%;
  margin:auto;
  right:0px;
  left:0px;
  width: 80vw;
  text-align: center;
  animation-name: xviFooterFadeIn;
  animation-duration: 2s;
  animation-delay: 8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes xviLogoFadeIn {
  from {
    opacity: 0;
    transform: translate(0px,-70vh)
  }
  to {
    opacity: 1;
  }
}

@keyframes xviFooterFadeIn {
  from {
    opacity: 0;
    transform: translate(0%,+100%)
  }
  to {
    opacity: 1;
  }
}

@keyframes xviColorsFadeIn {
  from {
    opacity: 0;
    transform: translate(-100vw,0px)
  }
  to {
    opacity: 1;
  }
}

@keyframes xviBgColors {
  0% {
    background-color: var(--xviColorWhite);
    background-color: #ffffff;
  }
  12% {
    background-color: var(--xviColorBlue);
    background-color: #009bc0;
  }
  25% {
    background-color: var(--xviColorGreen);
    background-color: #6bc4b7;
  }
  37% {
    background-color: var(--xviColorDarkblue);
    background-color: #00557f;
  }
  50% {
    background-color: var(--xviColorBeige);
    background-color: #d3ae9f:
  }
  62% {
    background-color: var(--xviColorPink);
    background-color: #f08ca6;
  }
  75% {
    background-color: var(--xviColorOrange);
    background-color: #f18b6e;
  }
  87% {
    background-color: var(--xviColorYellow);
    background-color: #e3dd93;
  }
  100% {
    background-color: var(--xviColorDarkgrey);
    background-color: #3a3c42;
  }
}