body,
h1,
h2,
p,
input {
  color: #BD2121;
  font-family: 'Open Sans', sans-serif;
  text-shadow: 0px 0px 15px #BD2121;
  line-height: 100%;
  margin: 0;
  font-size: 4vw;
}
a,
a:hover,
a:active {
  color: #BD2121;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
audio {
  position: absolute;
  top: -10000px;
  left: -10000px;
}
body {
  -webkit-overflow-scrolling: touch;
}
.button-group {
  display: flex;
  margin: 10px 0;
}
.button-group button {
  margin: 0;
  background: none;
  border: 1px solid #BD2121;
  color: #BD2121;
  flex: 1;
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.button-group button:first-child {
  border-top-left-radius: 1vw;
  border-bottom-left-radius: 1vw;
}
.button-group button:last-child {
  border-top-right-radius: 1vw;
  border-bottom-right-radius: 1vw;
}
.button-group button.selected {
  background: #BD2121;
  color: #000;
}
.background {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  z-index: -1;
}
.background svg {
  position: absolute;
  width: 200vw;
  left: -100%;
  top: -55%;
  animation: spin 220s 0.1s linear infinite;
  -webkit-animation: spin 220s 0.1s linear infinite;
  -webkit-transform: translateZ(0);
}
.background svg:nth-child(2) {
  animation-duration: 60s;
  -webkit-animation-duration: 60s;
}
.background svg:nth-child(3) {
  animation-duration: 220s;
  -webkit-animation-duration: 220s;
}
.background svg:nth-child(4) {
  animation-duration: 90s;
  -webkit-animation-duration: 90s;
}
.background svg:nth-child(5) {
  animation-duration: 220s;
  -webkit-animation-duration: 220s;
}
.background path {
  fill: #1F1F1F;
}
.clock {
  text-align: center;
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -21vw;
}
.clock h1 {
  font-weight: 300;
  font-size: 25vw;
  margin-top: 3vw;
}
.clock h1 small {
  font-size: 10vw;
  line-height: 10vw;
}
.clock h2 {
  font-size: 3vw;
}
.clock .fa-close {
  padding: 0 10px;
  z-index: 10000;
  position: absolute;
}
.nav {
  padding: 15px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.manage-alarms {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.2);
}
.manage-alarms form {
  padding: 5vw;
}
.manage-alarms form input {
  color: #BD2121;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  border-bottom: 1px solid #BD2121;
  text-align: center;
  width: 100%;
}
.manage-alarms form .action {
  text-align: center;
  margin: 15px 0;
}
.manage-alarms form .action button {
  background: #BD2121;
  border: 0;
  color: #000;
  padding: 10px;
  border-radius: 1vw;
  width: 40%;
}
.add-alarm {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
}
.select-time input {
  background: transparent;
  border: 0px;
  border-bottom: 1px solid #BD2121;
  width: 6vw;
  color: #BD2121;
}
.alarms-list {
  margin-top: 10vw;
}
.alarm-item {
  padding: 3vw;
  border-bottom: 1px solid #BD2121;
  position: relative;
}
.alarm-item .button-group {
  width: 30%;
  position: absolute;
  top: .5vw;
  right: 0;
  margin: 0;
}
.alarm-item .days {
  margin-left: 4vw;
  color: #000;
}
.alarm-item .days .selected {
  color: #BD2121;
}
.alarm-control {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.alarm-control .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #BD2121;
  animation: pulse 1s 0.1s linear infinite;
  -webkit-animation: pulse 1s 0.1s linear infinite;
  -webkit-transform: translateZ(0);
}
.alarm-control .action {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  transition: .1s width linear;
  background: rgba(255, 255, 255, 0.5);
}
.prepare-alarm div {
  position: fixed;
  top: 0;
  left: 0;
  line-height: 100vh;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  z-index: 10000;
}
@-webkit-keyframes spin {
  0% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
  }
  75% {
    transform: rotateZ(270deg);
    -webkit-transform: rotateZ(270deg);
  }
  100% {
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
  }
  75% {
    transform: rotateZ(270deg);
    -webkit-transform: rotateZ(270deg);
  }
  100% {
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: .25;
  }
  50% {
    opacity: .5;
  }
  75% {
    opacity: .25;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: .25;
  }
  50% {
    opacity: .5;
  }
  75% {
    opacity: .25;
  }
  100% {
    opacity: 0;
  }
}
/*# sourceMappingURL=/assets/alarm-clock.css.map */