@import "compass/css3";

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: #1e1e1e;
}

.mask {
  position: relative;
  top: 50%; left: 50%;
  margin: -250px;
  border-radius: 50%;
  width: 500px; height: 500px;
  background: #eee;
  box-shadow: 0 0 5px rgba(0, 0, 0, 1) inset;
  overflow: hidden;
}

.dot {
  position: absolute;
  border-radius: 50%;
  width: 500px; height: 500px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAgMAAADwXCcuAAAADFBMVEUpKCgAAAArKiosKip8tsw5AAAAA3RSTlMZALbLg0qYAAAAGklEQVQIW2P4//8DAwz/4/7A8CcYgkFsJDkACSQaBbeCIpoAAAAASUVORK5CYII=);
}

.rotate {
  animation: rotate 24s ease infinite alternate;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}