:root {
    --title-color: #222;
    --body-main-text-color: #555;
    --main-font-size: 16px;
    --body-back-color: #f0f0f0; /*#afaca1;*/
    --body-font: "Quicksand";

    --header-back-color: #ccc;
    --header-main-text-color: #204493;
    --header-font: "Alumni Sans", sans-serif;
    --header-font-size: 32px;
    --header-title-size: 64px;

    --main-panel-margin-size: 10%;
    --main-panel-padding-top: 48px;

    --infocard-back-color: #fafafa;
    --infocard-font-size: 14px;
    --infocard-contact-font-size: 16px;
    --infocard-body-padding: 12px 32px;
    --infocard-listlike-elements-padding: 0px 0px 0px 12px;
    --infocard-listlike-display: inline-flex;
    --infocard-listlike-icons-valign: top;
    --infocard-spacer-height: 0px;

    --introduction-font-size: 22px;

    --references-back-color: transparent;
    --references-width: 90%;
    
    /* --button-back-color: #e5e5e5;
    --button-border-color: color-mix(in srgb, var(--button-back-color) 80%, #000 1%);
    --button-hover: color-mix(in srgb, var(--button-back-color) 80%, #FFF 25%); */
    --button-height: 40px;
    --button-width: 100px;
    --highlight-height: auto;
    
    --sub-header-back-color: #204493;
    --sub-header-color: #fafafa;
    
    --theme-button-visible: flex;
    --link-border: none;
}

body.dark-theme {
    --title-color: #ddd;
    --body-main-text-color: #aaa;

    --body-back-color: #262626;

    --header-back-color: #0d0d0d;
    --header-main-text-color: #d2ae37;

    --infocard-back-color: #444;
    --references-back-color: transparent;

    --sub-header-back-color: #68561b;
    --sub-header-color: #fafafa;
}

body.mobile {
    --header-font-size: 24px;
    --header-title-size: 38px;
    --main-panel-margin-size: 0px;
    --theme-button-visible: none;
    --references-width: 100%;
    --link-border: 1px solid var(--header-main-text-color);
    --infocard-font-size: 16px;
    --infocard-body-padding: 4px 12px;
    --introduction-font-size: 17px;
    --main-panel-padding-top: 16px;
    --button-height: 60px;
    --infocard-listlike-elements-padding: 8px;
    --infocard-listlike-icons-padding: 12px;
    --infocard-listlike-icons-valign: center;
    --infocard-listlike-display: block;
    --infocard-spacer-height: 24px;
    --highlight-height: 40px;
}

/* ------------------------------------------------------------- */
/* --- Document General Styles --------------------------------- */
/* ------------------------------------------------------------- */

html {
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--title-color);
}

body {
    color: var(--body-main-text-color);
    background: var(--body-back-color);
    overflow-x: hidden;
    margin: 0px;
}

#background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
}

/* ------------------------------------------------------------- */
/* --- Header -------------------------------------------------- */
/* ------------------------------------------------------------- */
#main {
    font-family: var(--body-font);
}

#main > .header {
    font-family: var(--header-font);
    font-weight: 400;
    font-style: normal;
    display: flex;
    text-align: center;
    height: 130px;
    color: var(--header-main-text-color);
    background: var(--header-back-color);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
}

#main > .header div {
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical position */
    width: 100%;
}

#main > .header .theme {
    display: var(--theme-button-visible);
    width: 64px;
    font-family: var(--body-font);
    justify-content: center;
    text-align: right;
    padding-right: 16px;
    margin: 0px;
    cursor: pointer;
}

#main > .header .theme p {
    font-size: 12px;
    margin: 0px;
    width: max-content;
}

#main > .header img {
    height: 100%;
}

#main > .header h1 {
    color: var(--header-main-text-color);
    margin-right: 48px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: var(--header-title-size);
    width: 100%;
    text-align: center;
    align-self: center;
}

#main > .header p {
    color: var(--header-main-text-color);
    font-size: var(--header-font-size);
    margin-right: 48px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
    text-align: center;
    align-self: center;
}

/* ------------------------------------------------------------- */
/* --- Main Panel ---------------------------------------------- */
/* ------------------------------------------------------------- */

.main-panel {
    margin-right: var(--main-panel-margin-size);
    margin-left: var(--main-panel-margin-size);
    font-size: var(--main-font-size);
    padding-top: var(--main-panel-padding-top);
    padding-left: 16px;
    padding-right: 16px;
    text-align: left;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.main-panel a {
    position: relative;
    color: var(--header-main-text-color);
    text-decoration: none;
    padding: 0px 6px;
    display: inline-block;
}

/* ============ Highlight Styles ================= */
/* the container MUST have the position: relative property set */
.main-panel .highlight {
    border-radius: 8px;
    border: var(--link-border);
    height: var(--highlight-height);
    padding: var(--infocard-listlike-elements-padding);
}
.main-panel .highlight td {
    border-radius: 8px;
    border: var(--link-border);
}

.main-panel .highlight td:first-child {
    border-right: transparent;
    border-radius: 8px 0 0 8px;
}
.main-panel .highlight td:last-child {
    border-left: transparent;
    border-radius: 0 8px 8px 0;
}

.main-panel .highlight::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--header-main-text-color);
    pointer-events: none;
    border-radius: 8px;
    transition: opacity 0.3s;
    opacity: 0;
}

.main-panel .highlight:hover::after {
    opacity: 0.2;
}


/* ============ Button Styles ================= */
/* this is supposed to be used in an table */
.main-panel .button-img {
    position: relative;
    padding: 4px 0px;
    margin: auto;
    border: var(--link-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    max-height: var(--button-height);
}

.main-panel .button-img td {
    padding: 0 8px;
}
.main-panel .button-img td:last-child {
    text-align: right;
}

.main-panel .button-img img {
    max-height: var(--button-height);
    object-fit: contain;
    align-self: flex-end;
    padding: 8px 2px;
    box-sizing: border-box;
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.1));
}

/* ============ Introduction Styles================= */
.main-panel .introduction {
    font-size: var(--introduction-font-size);
    text-align: justify;
    margin: auto;
}

.main-panel .introduction p {
    margin: auto;
}

.main-panel .introduction div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.main-panel .introduction div p {
    font-size: 17px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.main-panel .introduction div img {
    border-radius: 50%;
    margin-right: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: none;
    object-fit: cover;
    display: block;
}

/* ============ infocard Styles================= */
.main-panel .infocard {
    font-size: var(--infocard-font-size);
    border-radius: 8px;
    background-color: var(--infocard-back-color);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
}

.main-panel .infocard .header {
    background-color: var(--sub-header-back-color);
    padding-left: 16px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: 8px 8px 0 0;
}
.main-panel .infocard .header h3 {
    color: var(--sub-header-color);
}
.main-panel .infocard .body {
    padding: var(--infocard-body-padding);
    text-align: justify;
}

.main-panel .infocard .body span {
    color: var(--body-main-text-color);
}

.main-panel .infocard .body tr.spacer {
    height: var(--infocard-spacer-height);
}

.main-panel .infocard .body .listlike {
    display: flex;
    flex-direction: column;
}

.main-panel .infocard .body .listlike > * {
    display: var(--infocard-listlike-display);
    align-items: flex-start;
}

.main-panel .infocard .body .listlike > * span {
    font-family: 'Material Icons', Arial;
    margin-top: 4px;
    padding-right: var(--infocard-listlike-icons-padding);
    flex-shrink: 0;
}

.main-panel .infocard .body .listlike>* a {
    flex: 1;
    align-content: center;
}

.main-panel .infocard .body .listlike > p {
    display: flex;
    align-items: var(--infocard-listlike-icons-valign);
    margin: 10px 0px;
    padding: var(--infocard-listlike-elements-padding) 0px;
}

.main-panel .infocard .body ul {
    margin-top: 16px;
    padding-left: 0;
    margin-left: 0;
}

.main-panel .infocard .body ul li {
    line-height: 1.6;
    padding-left: 4px !important;
    margin-left: 12px !important;
    list-style-type: disc;
    text-align: left;
    margin-bottom: -12px;
}

/* ============ References Styles ================= */
.main-panel .references {
    background-color: var(--references-back-color);
    width: var(--references-width);
    text-align: left;
    padding-top: 24px;
    padding-bottom: 24px;
}

.main-panel .references p {
    font-size: 15px;
}

.main-panel .references h3 {
    margin-bottom: 16px;
    font-size: 30px;
    font-weight: 450;
}
.main-panel .references h5 {
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: normal;
    }
.main-panel .references h6 {
    margin-bottom: 0px;
    font-size: 18px;
    font-weight: normal;
    }

.main-panel .references ul {
    margin-top: 16px;
    margin-bottom: 48px;
    padding-left: 0;
    margin-left: 0;
}

.main-panel .references ul li {
    line-height: 1.2;
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style-type: none;
    text-align: left;
    margin-bottom: -12px;
}