@tailwind base;
@tailwind components;

html {
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-size: 16px;
}

.gradient {
  background: linear-gradient(90deg, theme('colors.indigo.600') 0%, theme('colors.cyan.600') 100%);
}

.clip-path-gradient {
  clip-path: polygon(
    74.1% 44.1%,
    100% 61.6%,
    97.5% 26.9%,
    85.5% 0.1%,
    80.7% 2%,
    72.5% 32.5%,
    60.2% 62.4%,
    52.4% 68.1%,
    47.5% 58.3%,
    45.2% 34.5%,
    27.5% 76.7%,
    0.1% 64.9%,
    17.9% 100%,
    27.6% 76.8%,
    76.1% 97.7%,
    74.1% 44.1%
  );
}

.ml-3\/4 {
  margin-left: 75%;
}

.e-mail:before {
  content: '\0063\006F\006E\0074\0061\0063\0074\0040';
}

.e-mail:after {
  content: '\0068\0065\006C\0070\002E\0061\0064\0064\0079\002E\0069\006F';
}

a {
  @apply no-underline;
  @apply text-indigo-600;
}

blockquote {
  @apply border-indigo-400;
  @apply border-l-4;
  @apply font-normal;
  @apply italic;
  @apply my-8;
  @apply pl-6;
  @apply text-grey-800;
  @apply text-lg;
}

code {
  @apply bg-cyan-100;
  @apply text-cyan-900;
  @apply px-2;
  @apply py-px;
  @apply rounded;
  @apply text-sm;
}

code.hljs {
  @apply bg-transparent;
  @apply p-0;
}

code.hljs .hljs-comment,
code.hljs .hljs-keyword,
code.hljs .hljs-meta {
  @apply font-normal;
  @apply not-italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply leading-tight;
  @apply mb-4;
  @apply mt-8;
  @apply text-grey-900;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  @apply mt-0;
}

h1 {
  @apply font-extrabold;
  @apply text-5xl;
}

h2 {
  @apply font-bold;
  @apply text-3xl;
}

h3 {
  @apply font-bold;
  @apply text-2xl;
}

h4 {
  @apply font-normal;
  @apply text-xl;
}

h5 {
  @apply font-normal;
  @apply text-lg;
}

h6 {
  @apply font-light;
  @apply text-base;
}

hr {
  @apply border-b;
  @apply border-indigo-200;
  @apply my-12;
  @apply rounded-full;
}

/* li {
  @apply list-inside;
  @apply list-disc;
} */

li ul,
li ol {
  @apply my-0;
}

nav li {
  @apply list-none;
}

ol,
ul {
  @apply my-4;
}

p {
  @apply mb-3;
}

@screen md {
  p {
    @apply mb-4;
  }
}

pre {
  background-color: #242b3d;
  @apply leading-loose;
  @apply my-6;
  @apply overflow-x-auto;
  @apply p-4;
  @apply rounded;
  @apply shadow-md;
  @apply text-base;
}

pre code {
  @apply bg-transparent;
  @apply block;
  @apply p-0;
}

::selection {
  @apply bg-indigo-500;
  @apply text-white;
}

.mobile-nav-menu {
  background: linear-gradient(90deg, theme('colors.indigo.600') 0%, theme('colors.cyan.600') 100%);
  @apply pb-2;
  @apply pt-6;
  @apply px-2;
  @apply shadow;
  @apply w-auto;
  @apply hidden;
}

.nav-menu-hide {
  display: none;
}

#menu-handle {
  display: none;
}

#menu-handle:checked + label .nav-menu-hide {
  display: block;
}

#menu-handle:checked + label .nav-menu-show {
  display: none;
}

#menu-handle:checked + label + .mobile-nav-menu {
  display: block;
}

input[name='search'] {
  background-image: url('/assets/img/magnifying-glass.svg');
  background-position: 0.8em;
  background-repeat: no-repeat;
  border-radius: 25px;
  text-indent: 1.2em;
}

input[name='search'].transition-border {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.fade-enter-active {
  transition: opacity 0.5s;
}

.fade-leave-active {
  transition: opacity 0s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

@tailwind utilities;
