base.css

/* purgecss start ignore */

h1 {
    @apply text-5xl;
}

h2 {
    @apply text-4xl;
}

h3 {
    @apply text-3xl;
}

h4 {
    @apply text-2xl;
}

h5 {
    @apply text-xl;
}

h6 {
    @apply text-lg;
}

h1, h2, h3, h4, h5, h6 {
    @apply mt-8 mb-4 relative;
}

article h1:before,
article h2:before,
article h3:before,
article h4:before,
article h5:before,
article h6:before {
    content: "";
    @apply absolute w-12 left-0 bottom-0 border-b-4 border-solid border-gray-700;
}

p {
    @apply block my-4;
}

ol, ul {
    @apply ml-0 pl-8;
}

ol {
    @apply list-decimal;
}

ul {
    @apply list-disc;
}

li {
    @apply my-4;
}

hr {
    @apply border-gray-600 my-8;
}

blockquote {
    @apply border-l-4 border-gray-500 text-xl italic text-gray-700 px-8 mx-0;
}


pre {
    @apply my-4 overflow-auto bg-gray-300 p-4;
    width: calc(calc(100vw) - calc(96px));
}

@screen md {
    pre {
        @apply w-full;
    }
}

code {
    @apply px-1 bg-gray-300;
}

a {
    color: inherit;
    transition: color linear .15s;
    @apply underline;
}

a:hover {
    @apply text-main;
}

p a {
    box-shadow: inset 0 -0.12em 0 var(--main-color);
    -webkit-transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
    transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
    @apply no-underline;
}

p a:hover {
    box-shadow: inset 0 -1.5em 0 var(--main-color);
    @apply text-white;
}

table {
    @apply w-full overflow-auto border-collapse my-8;
}

th, td {
    @apply p-2 border border-solid border-gray-300;
}

tr {
    @apply border-t-2 border-solid border-gray-600;
}

input, textarea {
    @apply w-full h-8 my-4 bg-gray-400 p-4;
}

textarea {
    @apply h-40;
}

input::placeholder, textarea::placeholder {
    @apply text-gray-600;
}

/* purgecss end ignore */