@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  color: #f8f8f8;
  background: #131318;
}

body input,
body textarea {
  color: black;
}

a {
  color: #5ba4f8;
}

a:hover {
  border-bottom: 1px solid;
}

p {
  margin: 8px 0;
}

code,
pre {
  color: #ffa500;
}

pre {
  background-color: black;
  color: #39ff14;
}

li {
  padding: 4px;
}

@layer base {
  label {
    @apply h-6 relative inline-block;
  }

  [type="checkbox"] {
    @apply w-11 h-0 cursor-pointer inline-block;
    @apply focus:outline-0 dark:focus:outline-0;
    @apply border-0 dark:border-0;
    @apply focus:ring-offset-transparent dark:focus:ring-offset-transparent;
    @apply focus:ring-transparent dark:focus:ring-transparent;
    @apply focus-within:ring-0 dark:focus-within:ring-0;
    @apply focus:shadow-none dark:focus:shadow-none;

    @apply after:absolute before:absolute;
    @apply after:top-0 before:top-0;
    @apply after:block before:inline-block;
    @apply before:rounded-full after:rounded-full;

    @apply after:content-[''] after:w-5 after:h-5 after:mt-0.5 after:ml-0.5;
    @apply after:shadow-md after:duration-100;

    @apply before:content-[''] before:w-10 before:h-full;
    @apply before:shadow-[inset_0_0_#000];

    @apply after:bg-white dark:after:bg-gray-50;
    @apply before:bg-gray-300 dark:before:bg-gray-600;
    @apply before:checked:bg-lime-500 dark:before:checked:bg-lime-500;
    @apply checked:after:duration-300 checked:after:translate-x-4;

    @apply disabled:after:bg-opacity-75 disabled:cursor-not-allowed;
    @apply disabled:checked:before:bg-opacity-40;
  }
}