/* Global variables and definitions */
:root {
    --fontheight: 18px;
    --lineheight: calc(var(--fontheight) * 1.35);
    --cellwidth: 35.1ch;
    --cellheight: 38.025ch;
    --contentwidth: calc(3*var(--cellwidth) + 4*1.35*var(--fontheight));
    --color_bg_dark: #8C9163C;
    --color_bg_mid: #ACB087;
    --color_bg_light: #EADED0;
    --color_fg_dark: #95714F;
    --primarycolor: #F9F5E6;
    --secondarycolor: #7381A8;
}

body {
    background-color: var(--primarycolor);
    margin: 0;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 480;
    font-style: normal;
}

nav {
    background-color: white;
}

br {
    display: block;
    margin: calc(0.2 * var(--lineheight)) 0;
}

h1 {
    text-align: left;
}

h2 {
    text-align: left;
}

h3 {
    font-size: calc(2.0 * var(--fontheight));
}

.text-format{
    font-size: var(--fontheight);
    line-height: 1.35;
    text-align: justify;
}

a {
    color: black;
    text-decoration: none;
}

li {
    display: inline;
    float: left;
    margin: 0 0px;
}

li a {
    display: block;
    width: 13ch;
    text-align: center;
}

li a{
    position: relative;
}

li a::after{
    content: '';
    position: absolute;
    height: 3px;
    left: 20%;
    bottom: 0;
    width: 0;
    background: black;
    transition: width .2s;
}

li a:hover::after{
    width: 60%;
}

.fathover{
    position: relative;
}

.fathover::after{
    content: '';
    position: absolute;
    height: 10px;
    left: 0;
    bottom: 0;
    width: 0;
    background: black;
    transition: width .2s;
}

.fathover:hover::after{
    width: 100%;
}
.container-nav{
    width: 100%;
    height: calc(var(--lineheight) * 2.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subcontainer-nav-logo{
    padding-left: var(--lineheight);
    font-size: calc(2 * var(--fontheight));
    color: black;
}

.subcontainer-nav-logo:hover{
    color: var(--secondarycolor);
}

.subcontainer-nav-links{
    height:100%;
    font-size: calc(1.2 * var(--fontheight));
    padding-right: var(--lineheight);
    list-style-type: none;
    display: flex;
    align-items:center;
}

.content-wrapper{
    width:100%;
    display: flex;
    justify-content: center;
    background-color: var(--color_bg_dark);
    flex-direction: row;
    flex-wrap:wrap;
}

.container-allcontent{
    width: var(--contentwidth);
    display: flex;
    background-color:var(--color_bg_dark);
    flex-direction: column;
    align-items: center;
}

.container-seperator {
    width: var(--contentwidth);
    height: var(--lineheight);
    background-color: transparent;
}

.thumbnail-indiv {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
}

.img-thumbnail {
    width: 100%;
    object-fit: cover;
}

/* Modular Building Blocks (Seperators etc.) */

/* used on landing pages: general, books */
.container-fullwidth-freeheight-centered{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

.container-fullwidth-twocellheight-nosep {
    display: flex;
    height: calc(2 * var(--cellheight) + var(--lineheight));
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    background-color: transparent;
}

.container-fullwidth-onecellheight-centered{
    display: flex;
    height: var(--cellheight);
    width: 100%;
    justify-content: center;
}

.container-twocellswidth-freeheight-centered{
    display: flex;
    width: calc(2 * var(--cellwidth) + var(--lineheight));
    justify-content: center;
    flex-direction: column;
    height: auto;
}

.subcontainer-twocellswidth-freeheight{
    display: flex;
    width: calc(2 * var(--cellwidth) + var(--lineheight));
    height: auto;
    flex-direction: column;
}

.subcontainer-onecellwidth-fullheight{
    height: 100%;
    width: var(--cellwidth);
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.subcontainer-onecell{
    width: var(--cellwidth);
    height: var(--cellheight);
    flex-shrink: 0;
}

.seperator-horizontal {
    width: 100%;
    height: var(--lineheight);
    background-color: transparent;
    flex-shrink: 0;
}

.seperator-vertical {
    width: var(--lineheight);
    height: 100%;
    background-color: transparent;
    flex-shrink: 0;
}

/* Landing Page General */

.landinggen-subcontainer-hugethumbnail{
    height: 100%;
    width: calc(2 * var(--cellwidth) + 2 * var(--lineheight));
    background-color:transparent;
    overflow: hidden;
}

.landinggen-subcontainer-smallthumbnails{
    display: flex;
    height: 100%;
    width: calc(var(--cellwidth) + 2 * var(--lineheight));
    background-color:transparent;
    flex-direction: column;
    justify-content: space-between;
}

.landinggen-subsubcontainer-smallthumbnail{
    width: 100%;
    height: 50%;
    background-color:transparent;
    overflow: hidden;
}

/* Landing Page Baustelle */

.landingbaustelle-h3 {
    font-size: calc(1.8 * var(--fontheight));
    background-color: var(--color_bg_dark);
    margin-bottom: 5px;
    color: black;
}

.baustelle-container-maincontent{
    display: flex;
    width: calc(3 * var(--cellwidth) + 2 * var(--lineheight));
    flex-direction: row;
    align-items: flex-start;
    flex-wrap:wrap;
    background-color:var(--color_bg_dark);
}

.baustelle-subcontainer-text {
    display: flex;
    align-items: flex-end;
    width: var(--cellwidth);
    height: var(--cellheight);
    background-color:var(--color_bg_dark);
    border-bottom: solid;
    text-align: left;
}

.baustelle-subcontainer-thumbnail {
    display: flex;
    width: calc(2 * var(--cellwidth) + var(--lineheight));
    height: calc(2 * var(--cellheight));
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Landing Page Buch */

.landingbuch-h1 {
    font-size: calc(4.0 * var(--fontheight));
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
}

.landingbuch-subcontainer-mainthumbnail{
    height: 100%;
    width: calc(var(--cellwidth) + var(--lineheight));
    background-color: transparent;
    overflow: hidden;
}

.landingbuch-subcontainer-infonewestbook{
    display: flex;
    height: 100%;
    width: calc(2 * var(--cellwidth) + 2 * var(--lineheight));
    flex-direction: column;
}

.landingbuch-subsubcontainer-info{
    height: 50%;
    width: 100%;
    background-color:transparent;
}

.landingbuch-title{
    display: flex;
    align-items: flex-end;
    border-bottom: solid;
    border-width: 8px;
}

/* Content 0 */

.content0-h1 {
    font-size: calc(3.0 * var(--fontheight));
}

.content0-h2 {
    font-size: calc(2.25 * var(--fontheight));
}