body {
    width: 100dvw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    font-family: "Geist", sans-serif;
    font-size: 12px;
    line-height: 13px;
}
body#about {
    background-image: url("../images/jakob.png");
    background-size: 50dvh;
    background-repeat: no-repeat;
    background-position: center bottom;
}

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

a:hover {
    text-decoration: underline;
}

header {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 74px;
}

header div.nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

header a {
    padding: 0 10px;
}

header a:hover {
    text-decoration: none;
}

header a#current {
    color: white;
    background-color: black;
    padding: 4px 10px;
    border-radius: 25px;
}

header a:hover {
    padding: 4px 10px;
    outline: 1px solid black;
    border-radius: 25px;
}

header a:hover#current {
    outline: none;
}

footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 74px;
}

footer p {
    margin: 0;
    margin-bottom: 15px;
}

/* --- Home Page --- */

div.inner {
    width: 80%;
    max-width: 1120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.images {
    max-height: fit-content;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 48px;
}

@media (max-width: 1220px) {
    div.images {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    div.images {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    div.images {
        grid-template-columns: repeat(1, 1fr);
    }
}

a.card {
    width: 100%;
    height: 297px;
    display: flex;
    justify-content: center;
}

div.innercard {
    width: 75%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.innercard p {
    text-align: center;
    margin: 0;
}

div.cardimg {
    width: 100%;
    min-height: 71%;
    max-height: 71%;
    display: flex;
    justify-content: center;
}

img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}


/* --- Contact Page --- */

div.details {
    flex-grow: 1;
    height: auto;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-self: center;
    text-align: center;
    gap: 40px;
}

div.details p {
    margin: 0;
}

/* --- Project Detail Page --- */

div.project-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

div.carousel {
    height: 420px;
    width: fit-content;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    gap: 105px;
}

@media (max-width: 600px) {
    div.carousel {
        gap: 50px;
    }
}

@media (max-width: 400px) {
    div.carousel {
        gap: 10px;
    }
}

div.carousel div {
    min-height: 210px;
    max-height: 210px;
    min-width: 210px;
    max-width: 210px;
    display: flex;
    justify-content: center;
}

div.carousel div#middle {
    width: 420px !important;
    max-width: 50% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    flex-shrink: 0;
}

div.detail-text {
    display: flex;
    flex-direction: column;
    gap: 33px;
    text-align: center;
}

div.detail-text p {
    margin: 0;
}

/* --- Uebungen Page --- */

div.uebungen {
    display: flex;
    justify-content: center;
    height: 100%;
}

div.uebungen ul {
    list-style-type: none;
    text-align: center;
    padding: 0;
}