@import url("https://fonts.googleapis.com/css?family=Permanent+Marker");
html, body {
  width: 100%;
  height: 100%;
  font-family: "Permanent Marker", sans-serif;
  background-color: #222;
  margin: 0;
  padding: 0; }

body {
  display: flex;
  color: #eee;
  align-items: center;
  justify-content: center;
  flex-direction: column; }

h1 {
  margin: 0;
  letter-spacing: .05em;
  font-size: 3.7em;
  text-align: center;
  z-index: 100; }

.disabled {
  pointer-events: none; }

.ripple {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  opacity: .5; }

.active .ripple {
  transition: transform .5s, opacity 2s;
  transform: scale(100);
  opacity: 0; }

[class*="push"] {
  color: #fff;
  text-decoration: none;
  font-size: 3em;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 220px;
  border: 0;
  margin: 1em;
  outline: none;
  background-color: #c2290a;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 200ms; }

.push--button {
  z-index: 100;
  box-shadow: inset 0 9.1666666667px 0 #da2e0b, inset 0 -9.1666666667px 3.6666666667px #aa2409, 0 0 3.6666666667px #c2290a, inset 0 0 7.3333333333px #791a06, inset 0 0 7.3333333333px rgba(34, 34, 34, 0.5), inset 0 0 3.6666666667px 18.3333333333px #c2290a, inset 0 -7.3333333333px 5.5px 22px rgba(34, 34, 34, 0.7), inset 0 0 3.6666666667px 22px #611405, inset 0 0 3.6666666667px 22px rgba(34, 34, 34, 0.7), inset 0 0 1.8333333333px 23.9130434783px black, inset 0 0 1.8333333333px 27.5px rgba(247, 133, 110, 0.7), inset 0 11px 0 25.8823529412px rgba(244, 71, 37, 0.7), inset 0 -11px 3.6666666667px 25.8823529412px rgba(145, 31, 8, 0.2), inset 0 0 0 40px #c2290a, inset 0 88px 29.3333333333px #aa2409, inset 0 0 22px 36.6666666667px #911f08, 0 5.5px 11px rgba(0, 0, 0, 0.5); }
  .push--button:active, .push--button.is-pushed {
    box-shadow: inset 0 9.1666666667px 0 #da2e0b, inset 0 -9.1666666667px 3.6666666667px #aa2409, 0 0 3.6666666667px #c2290a, inset 0 0 7.3333333333px #791a06, inset 0 0 7.3333333333px rgba(34, 34, 34, 0.5), inset 0 0 3.6666666667px 18.3333333333px #c2290a, inset 0 -7.3333333333px 5.5px 22px rgba(34, 34, 34, 0.7), inset 0 0 3.6666666667px 22px #611405, inset 0 0 3.6666666667px 22px rgba(34, 34, 34, 0.7), inset 0 0 5.5px 25.8823529412px black, inset 0 0 1.8333333333px 29.3333333333px rgba(247, 133, 110, 0.2), inset 0 11px 0 28px rgba(244, 71, 37, 0.5), inset 0 -11px 3.6666666667px 28px rgba(97, 20, 5, 0.2), inset 0 0 0 40px #b32609, inset 0 88px 29.3333333333px #9b2108, inset 0 0 22px 36.6666666667px #791a06, 0 5.5px 11px rgba(0, 0, 0, 0.5);
    background-color: #b8270a; }
    .push--button:active:before, .push--button.is-pushed:before {
      opacity: .5; }
  .push--button:before {
    content: '';
    position: absolute;
    bottom: 48.8888888889px;
    left: 61.1111111111px;
    display: block;
    width: 100px;
    height: 66.6666666667px;
    background: rgba(247, 133, 110, 0.2);
    background: linear-gradient(to top, rgba(250, 173, 158, 0.3) 0%, rgba(194, 41, 10, 0.1) 100%);
    border-radius: 40% 40% 60% 60%;
    transition: opacity 200ms; }

/*# sourceMappingURL=screen.css.map */