*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: 1.5;
}

body {
  align-items: center;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  padding: 0.75rem;
}

a,
button {
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[hidden] {
  display: none;
}

img {
  display: block;
  height: inherit;
  width: 100%;
}

ul[class],
ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 0;
}

button,
input {
  border: none;
  font: inherit;
  margin: 0;
  -webkit-appearance: none;
}

.button {
  background-color: #f3f7f0;
  border-radius: 6px;
  color: #477820;
  line-height: 0;
  margin: 0 0.1875rem;
  padding: 0.375rem;
}

.button.button-round {
  border-radius: 50%;
  padding: 0.5rem;
}

.button.button-small {
  font-size: 0.875rem;
  line-height: 1;
}

.button.button-negative {
  background-color: #f9b2b7;
  color: #881619;
}

.button:hover,
.button.button-active {
  background-color: #78bc3a;
  color: #fff;
}

.button.button-negative:hover {
  background-color: #ef3e4c;
}

.button:disabled {
  background-color: #f3f3f3;
  color: #444;
  cursor: not-allowed;
  opacity: 0.5;
}

input:hover,
input:focus {
  background-color: #f7f7f7;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-appearance: textfield;
}

::selection {
  background: yellow;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timer-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  display: inline-block;
  margin: 0.375rem;
}

.timer-container-inner {
  flex-wrap: wrap;
  border-radius: inherit;
  transition: all 0.15s ease-out;
}

.timer-container-inner > * {
  padding: 1.5rem;
}

.list-timer {
  font-size: 4rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.flex,
.list-timer > * {
  align-items: center;
  display: flex;
}

.list-timer li {
  position: relative;
}

.list-timer li:after {
  content: ':';
  font-size: 0.6em;
  opacity: 0.6;
  padding: 0 0.375rem;
  position: relative;
  top: -0.1em;
}

.list-timer li:last-child:after {
  content: '';
}

.list-timer input {
  line-height: 1;
  margin-bottom: -0.75rem;
  margin-top: -0.75rem;
  padding: 0;
  text-align: right;
  width: 5rem;
}

#activeTimer .list-timer {
  font-size: 14vw;
}

.timer-options {
  margin-top: 0.375rem;
}

.timer-options .button {
  opacity: 0.5;
}

.timer-options .button:hover {
  opacity: 1;
}

.timer-controls {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1.5rem 0.75rem;
}

.timer-end {
  color: #881619;
  font-size: 3rem;
  font-size: 9vw;
  animation: wiggle 1s ease;
}

@keyframes wiggle {
  20% {
    transform: scale(1.4);
  }
  30%,
  60% {
    transform: rotate(-10deg) scale(1.4);
  }
  50% {
    transform: rotate(10deg) scale(1.4);
  }
  70% {
    transform: rotate(0deg) scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.callout {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.75rem;
  font-size: 0.875rem;
  opacity: 0.6;
}

code {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
  padding: 0.1875rem;
  margin-bottom: 0.1875rem;
}

#container > button {
  background-color: transparent;
  color: #767677;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  padding: 0.75rem;
}

#container > button:hover {
  color: #477820;
}

@media screen and (max-width: 600px) {
  .timer-container-inner > * {
    padding: 1.5rem 0.5rem;
  }

  .list-timer {
    font-size: 2.6rem;
  }

  .list-timer input {
    width: 3.2rem;
  }
}