@layer base {
  html {
    font-size: 14px;
  }

  body {
    @apply leading-none bg-cover bg-fixed;
    background-image: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%), url('/img/bg-1.jpg');
    color: black;
  }

  body#admin {
    background-image: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%), url('/img/bg-1.jpg');
  }

  h1 {
    @apply text-3xl uppercase;
  }

  h2 {
    @apply text-2xl mb-8;
  }

  h3 {
    @apply text-xl mb-6;
  }

  h4 {
    @apply font-bold mb-4 leading-6;
  }

  main section {
    @apply pt-8 sm:pt-12;
  }

  main section h3:not(:first-child) {
    @apply mt-8;
  }

  main section:first-of-type {
    @apply pt-0;
  }

  main p {
    @apply mb-4 leading-6;
  }

  main p:last-child {
    @apply mb-0;
  }

  main ul {
    @apply mb-6;
  }

  main ul:last-child {
    @apply mb-0;
  }

  main ul li {
    @apply leading-6;
  }

  main a:not(nav > *) {
    @apply text-blue-600;
    &:hover   { @apply underline; }
    &:visited { @apply text-indigo-600; }
    &:active  { @apply text-red-600; }
  }
}