body{  background: rgb(69, 93, 141)}
#navList { margin-left: calc((100% - 950px) / 2);}
#blog_stats { margin-right: calc((100% - 950px) / 2);}
#navList li a{background-color: transparent;    line-height: 80px;}
#navList li a:hover{background-color: transparent;color:#f4516c}
#main{margin-top:0px}
.blogStats{  line-height: 80px;}

#header {
  height: 70px;
  width: 100%;
  position: absolute;
  z-index: 1000;
  background: slategrey;
  top: 0px;
}
#header:before {
  content: "";
  background: #373d41;
  width: 100%;
  height: 0;
  position: absolute;
  z-index: -1;
  opacity: 0;
  transition: height 0.5s, opacity 0.5s;
  transition-delay: 0.1s;
}
#header:hover:before {
  content: ".";
  height: 100%;
  opacity: 1;
}

#navigator{top:0px; background: transparent;border-top: 1px solid hsla(0,0%,100%,.14);border-bottom: 1px solid hsla(0,0%,100%,.14);height:70px;width: 100%;}
#main {
    margin-top: 70px;
}

.header-animation{
    background: antiquewhite;
    height: 150px;
    width: 150px;
    transform: translate(-50%, -50%) rotateZ(45deg);
    transition-property: all;
    transition-duration: 0.75s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(.77,-0.7,.24,1.64);
  position: absolute;
  top:0px;
    right: -150px;
    z-index: 10000;
}
.header-animation:hover {
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(3);
}
.header-animation:hover .header-content {
  display: block;
  transform:none;
}
.header-content{
  margin-top: 90px;
  margin-left: 20px;
  display: none
}