@font-face {
    font-family: 'Poppins';
    src: url('https://static.igem.wiki/teams/5667/assets/fonts/poppins/poppins-regular.ttf') format('truetype');
}

/* TODO: Anpassung für width=<650px */

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    overflow: auto;
    max-width: 100vw;
}

main {
    background-color: #f1e3d3;
}

/* Font sizes */
h1 {
    font-size: clamp(2.5rem, 5vw + .5rem, 4rem);
}
h2 {
    font-size: clamp(2rem, 4vw + .5rem, 3.5rem);
}
p {
    font-size: clamp(1.5rem, 3vw + .5rem, 3rem);
}

/* Banner Picture */
.page-banner {
    width: 100%;
    object-fit: cover;
    height: fit-content;
    max-height: 100vh;
    margin: 0;
}

/* Page content */
.page-content {
    display: flex;
    align-items: flex-start;
    padding-left: 10px;
    padding-right: 10px;
}

/* The left table of contents */
.side-navigation {
    width: fit-content;
    padding: 2%;
    position: sticky;
    top: calc(var(--header-height) + 20px);
    text-align: right;
    border-radius: 20px;
    background-color: whitesmoke;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    height: 100%;
    margin: 20px;
    border-color: lightgray;
    border-style: solid;
}

.side-nav-title {
    font-size: clamp(1rem, 2vw + 0.3rem, 3rem);
}

.side-nav-chapter {}

.side-nav-chapter a {
    text-decoration: none;
    color: black;
}

.side-nav-chapter a:hover {
    text-decoration: underline;
}

/* TODO: dropdown-navigation */

@media (max-width: 650px){
    .side-navigation {
        visibility: hidden;
        width: 0;
    }
}

/* content (on the right) */

.side-content {
    overflow-y: auto;
    overflow-x: hidden;
}