:root {
    --foreground:   #404040;

    --blue:         #0080c8;
    --light-blue:   #87bbe6;
    --lighter-blue: #c3ddf3;
    --pale-blue:    #e5f2f8;
    --green:        #a2c516;

    --max-width: 900px;

    --logo-width: 210px;
    --logo-height: 80px;

    --splash-box-height: 7.7rem;
}

@font-face {
    font-display: swap;
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    src: url("/static/fonts/ubuntu-v21-latin-regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Ubuntu";
    font-style: italic;
    font-weight: 400;
    src: url("/static/fonts/ubuntu-v21-latin-italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 700;
    src: url("/static/fonts/ubuntu-v21-latin-700.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Ubuntu";
    font-style: italic;
    font-weight: 700;
    src: url("/static/fonts/ubuntu-v21-latin-700italic.woff2") format("woff2");
}

.break_all {
    word-break: break-all;
}

header {
    border-bottom: 1px solid var(--green);
}

header a {
    text-decoration: none;
}

#home a {
    display: inline-block;
}

#home_1 {
    color: var(--blue);
    font-weight: bold;
    vertical-align: top;
}

#home_2 {
    display: inline-block;
    background-color: var(--green);
    transform: skewX(-32.6deg);
    vertical-align: middle;
}

#home_3 {
    color: var(--light-blue);
    vertical-align: bottom;
    display: inline-block;
    margin-left: 0.8em;
}

body {
    font-family: "Ubuntu", sans-serif;
    margin: 0;
    color: var(--foreground);
}

main {
    max-width: calc(var(--max-width) - 2em);
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
    line-height: 1.6;
}

main ul {
    padding-left: 1.5em;
}

main a {
    color: var(--blue);
    text-decoration: none;
}

main aside {
    overflow: auto;
    background-color: var(--pale-blue);
}

main h1,
main h2 {
    color: var(--blue);
}

main h1,
main h2,
main h3 {
    line-height: 1.1;
    margin-top: 1.2em;
}

main table {
    margin-top: 1rem;
}

main td {
    vertical-align: top;
}

#topical p,
#topical ul {
    margin: 0.2rem 0;
}

#topical h2 {
    font-size: 120%;
    line-height: 1.1;
    margin-bottom: 0.6em;
}

#logo {
    background-image: url("/static/frontpage/csu-konradsreuth.webp");
    background-size: 100%;
}


#splash_wrapper {
    clear: both;
}

#splash_box {
    background-color: var(--blue);
    height: var(--splash-box-height);
    border-left: 0.7rem solid var(--green);
    display: inline-block;
}

#splash_box p:nth-child(1) {
    color: var(--green);
    margin: 0;
    line-height: 1.2;
}

#splash_box p:nth-child(2) {
    color: white;
    font-size: 230%;
    font-weight: bold;
    margin: 0;
}

#splash_box p:nth-child(3) {
    color: white;
    margin: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--blue);
  margin: 1em 0;
}

#signature {
    width: 18rem;
    height: auto;
    margin-bottom: -2rem;
}

#contact_mobile {
    display: flex;
    align-items: center;
    gap: 0 0.7rem;
}

img.contact_logo {
    background-color: var(--blue);
    width: 2rem;
    height: auto;
    border-radius: 0.55rem;
}

footer {
    text-align: center;
    background-color: var(--blue);
    color: white;
    margin-top: 2em;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 2rem;
}

footer img {
    padding-top: 0.2rem;
}

footer a {
    text-decoration: none;
    color: white;
}

footer span.page_open {
    color: var(--light-blue);
}