body {
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --frame-period: 0.017s; }

playground {
  margin: auto;
  width: 800px;
  height: 800px;
  display: block;
  position: relative;
  border: 1px dashed black; }

creature {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  left: 0;
  will-change: top, left;
  -webkit-transition: top 0.017s, left 0.017s;
  -moz-transition: top 0.017s, left 0.017s;
  -ms-transition: top 0.017s, left 0.017s;
  -o-transition: top 0.017s, left 0.017s;
  transition: top 0.017s, left 0.017s;
  -webkit-transition: top var(--frame-period), left var(--frame-period);
  -moz-transition: top var(--frame-period), left var(--frame-period);
  -ms-transition: top var(--frame-period), left var(--frame-period);
  -o-transition: top var(--frame-period), left var(--frame-period);
  transition: top var(--frame-period), left var(--frame-period);
  -webkit-animation: pop-in 1s ease-in;
  -o-animation: pop-in 1s ease-in;
  animation: pop-in 1s ease-in; }
  creature.dead {
    -webkit-animation: death 1s ease;
    -o-animation: death 1s ease;
    animation: death 1s ease; }
  creature #colored1, creature #colored2, creature #colored3 {
    -webkit-transition: fill 0.1s;
    -moz-transition: fill 0.1s;
    -ms-transition: fill 0.1s;
    -o-transition: fill 0.1s;
    transition: fill 0.1s; }

food {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background: orangered;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: pop-in 0.5s ease-in;
  -o-animation: pop-in 0.5s ease-in;
  animation: pop-in 0.5s ease-in; }

.btn-time-control > .material-icons {
  line-height: 1.5; }

feature-parent {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  white-space: nowrap;
  width: 100%;
  padding: 1rem 2rem; }

feature {
  display: inline-block;
  position: relative;
  padding: 10px 50px;
  margin: 10px 10px; }
  feature::before {
    display: block;
    content: "";
    background: transparent;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    border-radius: .25rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: rotate(2deg);
    transition: transform 1s ease-in-out; }
  feature.feature-grey::before {
    background: darkslategrey; }
  feature.feature-green::before {
    background: olivedrab; }
  feature.feature-blue::before {
    background: deepskyblue; }
  feature.feature-red::before {
    background: mediumvioletred; }
  feature.feature-yellow::before {
    background: orange; }
  feature.feature-grey > label, feature.feature-green > label, feature.feature-blue > label, feature.feature-red > label, feature.feature-yellow > label {
    color: #f0f0f0; }
  feature.feature-grey > number, feature.feature-green > number, feature.feature-blue > number, feature.feature-red > number, feature.feature-yellow > number {
    color: #fff; }
  feature.feature-grey > units, feature.feature-green > units, feature.feature-blue > units, feature.feature-red > units, feature.feature-yellow > units {
    color: #f0f0f0; }
  feature > * {
    margin: 0;
    display: block; }
  feature > label {
    color: #444751;
    position: absolute;
    top: 5%;
    left: 5%; }
  feature > number {
    display: inline-block;
    color: #0b0b0b;
    font-weight: 800;
    font-size: 5rem; }
  feature.feature-small > number {
    font-size: 2.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem; }
  feature > units {
    display: inline-block;
    color: #444751;
    font-weight: 400;
    font-size: 1rem; }

sliders {
  display: block; }

.range-backwards {
  direction: rtl; }

.control-bar {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  background: #ffffffee;
  z-index: 5;
  padding-top: 1rem;
  padding-bottom: 1rem; }
  .control-bar > div:nth-child(1) > * {
    display: inline-block;
    margin: 0; }

@keyframes pop-in {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); }
  50% {
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2); }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes death {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    filter: saturate(100%); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    transform: translateY(-100px);
    filter: saturate(0%);
    display: none; } }

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