@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;

}