@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

html,
body,
#app {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

html.dark {
  background: #222;
}

h1 {
  @apply text-4xl w-full text-center mt-4;
}

h2 {
  @apply text-2xl mt-4 mb-2;
}

p {
  @apply mt-4;
}

.page {
  @apply flex flex-col flex-grow;
}

.markdown-body {
  max-width: 300px;
  @apply m-auto text-left;

  h1 {
    @apply text-4xl;
  }

  h3 {
    @apply text-center;
  }

  a {
    @apply opacity-50 hover:opacity-100 hover:text-teal-600;
  }

  p {
    @apply my-4;
  }
}

#nprogress {
  pointer-events: none;

  .bar {
    @apply bg-teal-600 opacity-75;

    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;
  }
}

.btn {
  @apply px-4 py-1 rounded inline-block
    bg-teal-600 text-white cursor-pointer
    hover:bg-teal-700
    disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
}

.icon-btn {
  @apply inline-block cursor-pointer select-none
    opacity-75 transition duration-200 ease-in-out
    hover:opacity-100 hover:text-teal-600;
}

.logo-background {
  @apply bg-gray-200 dark:bg-gray-800 rounded-t-lg;
}

.logo-text-other {
  @apply fill-current dark:text-gray-200 text-gray-900;
}

.logo-text-1986 {
  @apply fill-current text-green-700 dark:text-green-600;
}