html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  @apply text-gray-700;
}

html.dark {
  background: #121212;
}

.btn-gray {
  @apply px-6 py-3 rounded inline-block
    bg-gray-100 text-gray-600 text-xl cursor-pointer
    hover:bg-gray-200 focus:outline-none
    disabled:cursor-default disabled:opacity-70 disabled:bg-gray-100;
}

.btn {
  @apply px-6 py-3 rounded-3xl inline-block
    bg-blue-500 text-gray-200 text-xl cursor-pointer
    hover:bg-blue-400 focus:outline-none
    disabled:cursor-default disabled:opacity-70 disabled:bg-blue-400;
}

.icon-btn {
  @apply inline-block cursor-pointer select-none
    opacity-75 transition duration-200 ease-in-out
    hover:text-red-600;
  font-size: 0.9em;
}

.input {
  @apply appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded
    py-2 px-4 leading-tight focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
}