@import url(http://fonts.lug.ustc.edu.cn/css?family=Roboto:400,900);
$turquoise:#17beab;
$blue:#071321;
*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html, body {width:100%;height:100%;}
body {
  padding-top:20%;
  font-family:'Roboto', sans-serif;
  color:white;
  background-color:$blue;
  background-image:
   radial-gradient(transparent, $blue), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iOXB4IiBoZWlnaHQ9IjlweCIgdmlld0JveD0iMCAwIDkgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOSA5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gZmlsbD0iIzJFM0I0MSIgcG9pbnRzPSIwLDIuMTIxIDYuODc5LDkgOSw5IDksNi44NzkgMi4xMjEsMCAwLDAgIi8+Cjxwb2x5Z29uIGZpbGw9IiMyRTNCNDEiIHBvaW50cz0iOSwwIDYuODc5LDAgOSwyLjEyMSAiLz4KPHBvbHlnb24gZmlsbD0iIzJFM0I0MSIgcG9pbnRzPSIyLjE1Miw5IDAsNi44NDggMCw5ICIvPgo8L3N2Zz4K");
  background-size:cover, 3px 3px;
  text-align:center;
  transform:translateZ(0);
}
.btn-download {
  position:relative;
  display:inline-block;
  width:4rem;
  height:4rem;
  border:2px solid white;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMTc4Ljg1MXB4IiBoZWlnaHQ9IjE3OC4zN3B4IiB2aWV3Qm94PSIwIDAgMTc4Ljg1MSAxNzguMzciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE3OC44NTEgMTc4LjM3IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE0MS41MTcsNTMuMjczIDExMi42MDUsODIuMTg1IDExMi42MDUsMS4xMzggNjQuMTU4LDEuMTM4IDY0LjE1OCw4Mi4xODUgMzUuMjQ2LDUzLjI3MyAKCTAuOTg5LDg3LjUzIDg4LjM4MSwxNzQuOTIyIDE3NS43NzQsODcuNTMgIi8+Cjwvc3ZnPg==");
  background-size:40% auto;
  background-repeat:no-repeat;
  background-position:50% 50%;
  border-radius:50%;
  box-shadow:
    0 0 20px 2px $turquoise,
    -7px -7px 10px -4px $turquoise,
    inset 1px 1px 2px white,
    inset 0 0 10px 2px $turquoise;
  animation:bounce 1s infinite;
  &:before, &:after {content:'';position:absolute;}
  &:before {
    top:6px;
    left:7px;
    width:3px;
    height:3px;
    background-color:white;
    border-radius:50%;
    box-shadow:
      0 0 10px 5px rgba(255,255,255,0.5),
      -1px -1px 4px rgba(255,255,255,0.8),
      -2px -2px 4px rgba(255,255,255,0.7),
      -3px -3px 5px rgba(255,255,255,0.5),
      -4px -4px 6px rgba(255,255,255,0.3),
      1px 1px 4px rgba(255,255,255,0.8),
      2px 2px 4px rgba(255,255,255,0.7),
      3px 3px 5px rgba(255,255,255,0.5),
      4px 4px 6px rgba(255,255,255,0.3);
  }
  &:after {
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:50%;
    animation:glow 1s infinite;
  }
}
@keyframes bounce {
  0%, 100% {transform:translateY(-7%);background-position:50% 48%;}
  50% {transform:translateY(7%);background-position:50% 52%;}
}
@keyframes glow {
  20% {
    box-shadow:
      0 0 0 0 rgba($turquoise, .3),
      inset 0 0 0 0 rgba($turquoise, .3);
  }
  100% {
    box-shadow:
      0 0 0 50px rgba($turquoise, 0),
      inset 0 0 0 12px rgba($turquoise, 0);
  }
}

a {color:$turquoise;text-decoration:none;}
p {
  position:relative;
  padding:5rem 3rem;
}