@tailwind base;

@tailwind components;

body {
  @apply pb-10 text-center text-xl text-blackish;
}

@screen sm {
  body {
    @apply text-2xl;
  }
}

a {
  @apply underline;
}

a:hover {
  @apply text-orange-700;
}

a.menu-item {
  @apply block font-black py-2 leading-none no-underline
}

@screen sm {
  a.menu-item {
    @apply px-3
  }
}

#logo {
  @apply w-84
}

@screen sm {
  #logo {
    width: 441px;
  }
}

p {
  @apply mb-4;
}

h1 {
  @apply text-center text-2xl font-extrabold leading-tight tracking-tight;
}

h2 {
  @apply text-center text-2xl font-black leading-tight tracking-tight mb-4;
}

h3 {
  @apply font-bold text-xl tracking-tight mt-4;
}

h4 {
  @apply font-bold text-xl tracking-tight mt-3;
}

@screen sm {
  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-4xl;
  }

  h3 {
    @apply text-3xl;
  }

  h4 {
    @apply text-2xl;
  }
}

@screen lg {
  h2 {
    @apply text-5xl;
  }
}

ul {
  @apply list-disc mb-4 ml-8;
}

.section {
  @apply my-10 text-left tracking-tight;
}

.mc-status:focus {
  @apply outline-none
}

.mc-success {
  @apply text-green-600;
}

.mc-error {
  @apply text-red-600;
}

.button {
  @apply rounded-lg w-40 h-10 bg-yellowish font-bold cursor-pointer text-gray-900 inline-block relative text-lg;
  top: 1px;
}

.highlight {
  @apply px-2 rounded-tl-lg rounded-bl-sm rounded-tr-lg rounded-br-lg;
  background-image: linear-gradient(119deg, rgb(255, 255, 255), rgb(255, 246, 151) 10.5%, #fdf59d 85.29%, #ffffff);
}

.field {
  @apply font-semibold
}

a.anchor {
  @apply block relative;
  top: -50px;
}

pre[class*="language-"]:before, pre[class*="language-"]:after {
  content: normal;
}

pre[class*="language-"], :not(pre) > code[class*="language-"], pre[class*="language-"] {
  line-height: 24px;
  font-size: 16px;
}

code[class*="language"] {
  padding-top: 16px;
  padding-bottom: 16px;
  margin-top: 1em;
  margin-bottom: 1em;
}

pre[class*="language-"]>code {
  background-color: #f6f6f6;
  box-shadow: none;
  background-image: none;
}

.line-highlight:before, .line-highlight[data-end]:after {
  content: normal;
}

pre[data-line] code {
  padding-left: 1em;
}

pre .line-highlight {
  margin-top: 16px;
  background-image: none;
  background-color: rgba(0, 255, 0, 0.12);
}

.token.operator, .token.entity, .token.url, .token.variable {
  color: #ff8000;
  background: none;
}

@tailwind utilities;