@import url("style_nav.css");
/* Navigation Main Setup*/
@import url("style_header.css");
/* Header Setup */
@import url("style_aside.css");
/* Sidebar Setup */
@import url("style_css-general-text.css");
/* Setup for Text Styles used in Text */
@import url("style_content.css");
/* Setup general Content */
@import url("style_content-ul.css");
/* Content UL Setting*/
@import url("style_images-fig.css");
/* Figure Image and Caption */
@import url("style_blog-projects.css");
/* Setup for layout of Blog- and Projectposts */
@import url("style_blockquotes.css");
/* Setup Blockquote Styles */
@import url("style_pagination.css");
/* Setup Pagination Styles */
@import url("style_footer.css");
/* Footer-Styles Setup */
@import url("style_dialog-box.css");
/* Dialogbox Style */
@import url("style_accordion.css");
/* Accordion Style*/

/* Pre-defined Variables for ease of use */
:root {
    --mainfont: "Vollkorn", serif;
    --headfont: "Roboto", Helvetica, sans-serif;
    --specialfont: "Monoton", system-ui;
    --specialfont-2:
        "UnifrakturMaguntia", var(--specialfont-3), var(--specialfont);
    --specialfont-3: "Freckle Face", var(--specialfont-2), var(--specialfont);
    --codefont: monospace !important;
    --color-1: #efefef;
    --color-2: #00424a;
    --color-2-lt: #d4eff2;
    --footer-color-1: var(--color-2);
}

:focus {
    outline: none;
}

html {
    background-color: #00424a;
    scrollbar-gutter: stable;
}

body:has(#enroll-dialog[open]) {
    overflow: hidden;
    position: fixed;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    color: var(--color-1);
    font-size: 1.75rem !important;
    font-family: var(--mainfont) !important;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    cursor: crosshair;
}

/* General Setup HEADLINES */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--headfont);
}

/* CONTENT WRAPPER */
#wrapper {
    display: grid;
    grid-auto-flow: column;
}

/* Test */
/* -- Skeleton Loader - Generated -- */
:root {
    --skel-base: #fde8d8;
    --skel-shine: #fff5f0;
    --skel-radius: 8px;
    --sk-speed: 2.5s;
}

.sk-stage {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Card sizes */
.sk-card.size-sm {
    width: 200px;
}
.sk-card.size-md {
    width: 280px;
}
.sk-card.size-lg {
    width: 360px;
}
.sk-card.size-full {
    width: 100%;
}

.sk-card {
    background: #ffffff;
    border-radius: var(--skel-radius);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Base skeleton element */
.sk {
    background: var(--skel-base);
    border-radius: var(--skel-radius);
    position: relative;
    overflow: hidden;
}

/* Shimmer animation */
.sk.animate::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--skel-shine) 50%,
        transparent 100%
    );
    animation: shimmer var(--sk-speed) infinite;
}