:root{
    --body-font: 'Open Sans', sans-serif;
    --primary-color: #F4F6F8;
    --text-color: #212b36;
    --secounday-color: #fff;
}

body{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--primary-color);
    font-family: var(--body-font);
    color: var(--text-color);
    width: 100%;
    overflow: auto;
    margin: 1.5rem 0 1.5rem 0;
}
.Container {
    text-align: center;
    position: relative;
  }
  
  .MainTitle {
    display: block;
    font-size: 2rem;
    text-align: center;
  }
  
  .MainDescription {
    max-width: 50%;
    font-size: 1.2rem;
    font-weight: lighter;
  }
  
  .MainGraphic {
    position: relative;
  }
  
  .Cog {
    width: 10rem;
    height: 10rem;
    fill: #6AAFE6;
    transition: easeInOutQuint();
    animation: CogAnimation 5s infinite;
  }
  
  .Spanner {
    position: absolute;
    transform: rotate(20deg);
    top: 10%;
    left: 20%;
    width: 10rem;
    height: 10rem;
    fill: #8EC0E4;
    animation: SpannerAnimation 4s infinite;  
  }
  
  .Hummingbird{
    position: absolute;
    width: 3rem;
    height: 3rem;
    fill: #30A9DE;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);  
  }
  
  @keyframes CogAnimation {
      0%   {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
  }
  
  @keyframes SpannerAnimation {
      0%   {
        transform: 
          translate3d(20px, 20px,1px)
          rotate(0deg);
      }
      50% {
        transform: 
          translate3d(-1000px, 1000px, 1px)           
          rotate(180deg);
      }    
      100% {
        transform: 
          translate3d(0, 0px, 0px)           
          rotate(360deg);
      }  
  }