index.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* We use Tailwind CSS in this project: https://tailwindcss.com/
 *
 * Tailwind CSS strips all default design away from HTML elements
 * and you have full control over their appearance by adding
 * classes. See the Tailwind docs for a list of all the classes
 * available.
 *
 *      You should avoid writing custom CSS rules here!
 *
 * The rules in this file are only for content coming out of
 * Markdown files with no possibility to add classes intelligently.
 */

* {
    @apply font-light;
}

h2,
h3,
h4,
h5,
h6 {
    @apply font-heading;
}

h2 {
    @apply text-3xl leading-10 mt-8 mb-4 text-gray-700 font-bold;
}

h3 {
    @apply text-2xl leading-9 mt-4 mb-2 text-gray-700 font-normal;
}

.faq-post h3 {
    @apply mt-8;
}

h4 {
    @apply text-lg leading-8 mt-2 mb-1 text-gray-700;
}

ul {
    @apply list-disc list-outside my-4;
    margin-left: 1rem;
}

ol {
    @apply list-decimal list-outside my-4;
    margin-left: 1rem;
}

table {
    @apply table-auto my-4 border-collapse;
    width: 100%;
}

table a {
    text-decoration: underline;
    @apply text-blue-700;
}

th {
    @apply font-heading text-blue-700 text-lg;
}

.table-vertical td:first-child {
    @apply font-heading text-blue-700 text-lg;
}

.table-vertical th {
    text-align: left;
}

.table-vertical tr:first-child th,
.table-vertical tr:first-child td {
    @apply border-t-0;
}

.table-vertical tr:last-child th,
.table-vertical tr:last-child td {
    @apply border-b-0;
}

th,
td {
    @apply border border-gray-700 p-4;
}

table tr:first-child th {
    @apply border-t-0;
}

table tr td:first-child,
table tr th:first-child {
    @apply border-l-0;
}

table tr:last-child td {
    @apply border-b-0;
}

table tr td:last-child,
table tr th:last-child {
    @apply border-r-0;
}

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

strong {
    font-weight: bold;
}

li {
    @apply leading-6;
}

code {
    @apply bg-gray-400 text-red-700 p-1 text-sm;
}

pre {
    @apply w-full bg-gray-400 p-2 my-4;
}

h2:after {
    content: "";
    width: 10%;
    @apply border-red-700 border-b-4 -ml-3 block;
}

nav .active a:after {
    content: "";
    width: 30%;
    min-width: 50px;
    @apply border-red-700 border-b-4 block;
}

.modal {
    transition: opacity 0.25s ease;
}

body.modal-active {
    overflow-x: hidden;
    overflow-y: visible !important;
}

.opacity-95 {
    opacity: .96;
}

strong {
    font-weight: bold;
}

/* table responsive */

.table-responsive {
    overflow-x: auto;
}

/* sponsors */

#sponsoren img {
    max-height: 8rem;
    max-width: 10rem;
}

/*Dropdown User Menu */

.dropdown:hover .dropdown-menu {
    display: block;
    width: 220px;
}