@import url(http://fonts.lug.ustc.edu.cn/css?family=Lato:300,400,900);

$dark: rgba(0,0,0, 0.87);
$light: #fff;
$color: rgba(72, 118, 149, 1);
$light-color: #1BC2C2;
$font-stack: 'Lato', sans-serif;

$height: 150px;

body {
  font-family: $font-stack;
  text-align: center;
  margin: auto;
  color: $dark;
}

h1, p {
  font-weight: 400;
  z-index: 10;
  margin: 0.2em;
}

#element {
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  background: $color;
  width: $height;
  height: $height;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: -9;
  margin: auto;
  border: 4px solid white;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.15), 0px 2px 4px rgba(0,0,0,0.15);
  
  h1 {
    transition: all 0.3s ease-in-out;
    color: white;
    line-height: $height;
    margin: auto;
  }
}

#glow {
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  background: rgba(72, 118, 149, 0.2);
  width: ($height * 2);
  height: ($height * 2);
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: -10;
  margin: auto;
}

.far {
  #element > h1 {color: $dark;}
  #glow {background: rgba(72, 118, 149, 0);}
}

.close {
  #element {
    height: 300px;
    width: 300px;
  }
  
  #element h1 {
    line-height: 300px;
  }
}