:root {
    --header-h: 120px;
}

html {
    height: 100%;
    scroll-padding-top: var(--header-h);
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

main {                                  /* Für alle Knoten 'main' auf diesen Seiten (Knoten im html-Code; in der Ansicht ist es ein abstraktes Viereck): */
    font-size: 15px;                    /* Default-Schriftgröße für alles innerhalb von 'main' */
    font-family: Verdana, sans-serif;   /* Default-Schriftart für alles innerhalb von 'main' */
    padding-right: 50px;                /* Innerer Rand auf der rechten Seite */
    padding-left: 50px;
    margin-top: 0;
    margin-bottom: 70px;
}
nav {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
    background: white;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 20px;
    min-height: 95px;
}
aside {
    position: fixed;
    top: 200px;
    left: 78px;
}
footer {
    margin-top: auto;
    background-color:#F0F8FF;
    font-family: Verdana, sans-serif;
}
td {
    vertical-align: top;
}
a {                                     /* Knoten der Kategorie a (das sind Links): */
    color:#263ABA;                    /* Farbe der Schrift */
    text-decoration: none;              /* kein Unterstreichen der Links */
}
a:hover {                               /* Formatierung wenn die Maus über dem Knoten der Kategorie a (dem Link) ist */
    color:grey;                       /* Farbe wird blau, wenn die Maus darüber ist */
}
.nav_item {                                 /* Für alle Elemente mit [class="nav_item"]: */
    margin-left: 30px;                      /* linker Rand */
    font-family: Verdana, sans-serif;       /* Schriftart */
    font-size: 18px;                        /* Schriftgröße */
    line-height: 2;

}
.footnote {
    font-size: 15px;
}
nav a {                                     /* Für alle Elemente der Kategorie a  (Links) innerhalb des Knotens nav (in der Navigation) */
    position: relative;                     /* dies wird hier benötigt für die Magie mit dem Unterstreichen */
    color:grey;                           /* Farbe des Textes der Links */
    text-decoration: none;                  /* keine Unterstreichung beim Link */
}
nav a:hover {                                   /* Für alle Elemente der Kategorie a, wenn der Mauscursor darüber ist */
    color:#263ABA;                           /* Farbe (wenn die Maus darüber ist) */
}
nav a::before {                                 /* Magie für die langsam erscheinende Unterstreichung in der Navigation */
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;                            /* Dicke der Unterstreichung */
    bottom: -10px;                          /* Abstand der Unterstreichung vom Text */
    left: 0;
    background-color: #263ABA;               /* Farbe der Unterstreichung */
    transform: scaleX(0);
    transition: transform 0.3s ease;        /* 0.3s: Angabe in Sekunden, wie schnell die Unterstreichung sich aufbaut */
}
nav a:hover::before {                           /* anderer Teil derselben Magie */
    transform: scaleX(1);
}
.book {
    min-height: 140px;
    margin-top: 30px;
}
.book_headline {                        /* (wegen dem Punkt davor:) für alle Elemente mit  class="book_headline" ... */
    font-weight: bold;
    padding-bottom: 5px;
}
.book_picture {                        /* (wegen dem Punkt davor:) für alle Elemente mit  class="book_picture" ... */
    margin-left: 50px;                 /* Innerer Rand auf der linken Seite */
    margin-top: 30px;
    margin-bottom: 20px;
    width: 180px;
    height: 268px;
}
.link_headline {                        /* ... class="link_headline" ... */
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 0px;
}
.mark_as_English {
    font-weight: bold;
    color: orange
}

.mark_as_German {
    font-weight: bold;
    color: green
}

.add_margin_top {
    margin-top: 30px;
}
.add_small_margin_bottom {
    margin-bottom: 5px;
}
.footer_block {
    font-size: 13px;
    margin-left: 12%;
    margin-right: 12%;
    margin-top: 20px;
    margin-bottom: 20px;
}



@media only screen and (min-width: 800px) {
    main {
        margin-left: 330px;
        margin-right: 50px;
    }
    footer {
        margin-left: 330px;
    }
    h2 {
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 600px) {
    nav {
        position: sticky;
    }
    .footer_block {
        float: left;
    }
    .book_picture {
        float: right;
        margin-top: 0px;
        width: 90px;
        height: 134px;
        margin-bottom: 0px;
    }
}