:root {
--color-primary: #30A9DE;
--color-secondary: #30A9DE;
--color-tertiary: #30A9DE;
--color-primary-light: #6AAFE6;
--color-primary-dark: #8EC0E4;
--error-code-color1: #1b70bd;
--error-code-color2: #0549ac;
--error-code-color3: #051668;
--cog0: -250px, -80px, 0;
}

body{
  overflow: hidden;
}

html, body {
  background: #D4DFE6 ;
  min-height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  color: #274c5e;
}

.Container {
  Height: 100%;
  text-align: center;
  position: relative;
}

.MainTitle {
  display: block;
  font-size: 1.2rem;
  font-weight: lighter;
  text-align: center;
  padding-top: 10%;
}

.error-message {
  font-weight: lighter;
}
.error-text {
  margin: auto;
  color: #006400;
}

.MainGraphic {
  position: arelative;
}

.Cog {
  width: 250px;
  height: 250px;
  fill: var(--color-primary-light);
  transition: easeInOutQuint();
  animation: CogAnimation 8s infinite;
}

.Spanner {
  position: absolute;
  transform: rotate(20deg);
  width: 10rem;
  height: 10rem;
  fill:  var(--error-code-color1);
  animation: SpannerAnimation 8s infinite; 
}

@keyframes CogAnimation {
    0%   {transform: rotate(0deg);}
    10%   {transform: rotate(36deg);}
    30%   {transform: rotate(40deg);}
    100% {transform: rotate(360deg);}
}

@keyframes SpannerAnimation {
    0%   {
      transform: 
        translate3d(val(--cog0))
        rotate(50deg);
    }  
    5%   {
      transform: 
        translate3d(-250px, -80px, 0)
        rotate(0deg);
    } 
    10% {
      transform: 
        translate3d(-260px, -180px, 0px)           
        rotate(-30deg);
    }  
    13% {
      transform: 
        translate3d(-230px, -155px, 0px)           
        rotate(10deg);
    }  
    17% {
      transform: 
        translate3d(-240px, -180px, 0px)           
        rotate(-30deg);
    }   
    20% {
      transform: 
        translate3d(-220px, -155px, 0px)           
        rotate(10deg);
    }   
    23% {
      transform: 
        translate3d(-240px, -180px, 0px)           
        rotate(-30deg);
    } 
    30% {
      transform: 
        translate3d(-250px, -80px, 0px)           
        rotate(300deg);
    }   
    50% {
      transform: 
        translate3d(-250px, -80px, 0px)           
        rotate(0deg);
    }   
    100% {
      transform: 
        translate3d(-250px, -80px, -300px)           
        rotate(50deg);
    }  
}

.error-container {
  text-align: center;
  font-size: 80px;
  font-family: 'Catamaran', sans-serif;
  font-weight: 800;
  margin: 0px 15px;
  padding-bottom: 10%;
}
.error-container > span {
  display: inline-block;
  position: relative;
  color: var(--error-code-color2);
}
.error-container > span > span {
  display: inline-block;
  position: relative;
}
.error-container > span:nth-of-type(1) {
  perspective: 1000px;
  perspective-origin: 500% 50%;
  color: var(--error-code-color1);
}
.error-container > span:nth-of-type(1) > span {
  transform-origin: 50% 100% 0px;
  transform: rotateX(0);
  animation: easyoutelastic 8s infinite;
}

.error-container > span:nth-of-type(3) {
  perspective: none;
  perspective-origin: 50% 50%;
  color: var(--error-code-color3);
}
.error-container > span:nth-of-type(3) > span {
  transform-origin: 100% 100% 0px;
  transform: rotate(0deg);
  animation: rotatedrop 8s infinite;
}
@keyframes easyoutelastic {
  0% {
    transform: rotateX(0);
  }
  9% {
    transform: rotateX(210deg);
  }
  13% {
    transform: rotateX(150deg);
  }
  16% {
    transform: rotateX(200deg);
  }
  18% {
    transform: rotateX(170deg);
  }
  20% {
    transform: rotateX(180deg);
  }
  60% {
    transform: rotateX(180deg);
  }
  80% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}

@keyframes rotatedrop {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(30deg);
  }
  15% {
    transform: rotate(90deg);
  }
  70% {
    transform: rotate(90deg);
  }
  80% {
    transform: rotate(0);
  }
  100% {
    transform: rotateX(0);
  }
}