#Container {
  width: 930px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0px;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-size: 23px; color: #333;
  padding: 0;
  text-align: left; 
}

#header {
  font-size: 28px;
}

#comfoot {
  text-align:center;
}





body{
  font-family: 'Roboto Slab', serif;
  
  margin: 0;
}
.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 5vw;
  font-weight: 100;
}


a{
  color: #000;
  text-decoration: none;
  span{
    font-weight: 100;
    transition: all .5s;
    border-bottom: 1px solid;
  }
  span:nth-child(2){
    transition-delay: .1s;
  }
  span:nth-child(3){
    transition-delay: .2s;
  }
  span:nth-child(4){
    transition-delay: .3s;
  }
  &:hover{
    span{
      font-weight: 700;
    }
    span:nth-child(4){
      transition-delay: .3s;
    }
    span:nth-child(3){
      transition-delay: .2s;
    }
    span:nth-child(2){
      transition-delay: .1s;
    }
    span:nth-child(1){
      transition-delay: 0s;
    }
  }
  
  
  &.hover-shadow{
    &:hover{
      $color: #ddd;
    text-shadow: 1px 1px 0px $color, 2px 2px 0px $color, 3px 3px 0px $color;
    }
  }
  &.hover-color{
    &:hover{
      $color: #ddd;
    //color: darkmagenta;
    border-color: darkmagenta;
    }
  }
}