* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --spacing: 8px;
    --text-width: min(100%, 70rem);
    --border-radius: 15px;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0 auto;
    width: min(100%, 1500px);
    font-family: "Ubuntu Condensed", sans-serif;
    background-color: #202124;
    color: #e8eaed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Ubuntu Mono", monospace;
    color: #e8eaed;
    margin: 0 auto;
    width: var(--text-width);
}

header {
    padding: var(--spacing);
    display: flex;
    justify-content: center;
    align-items: center;
    > a, & img {
        width: min(100%, 420px);
    }
}

p {
    margin: var(--spacing) auto;
    width: var(--text-width);
}

nav .w3-bar-item {
    font-size: large;
}

a[aria-current="page"] {
  background-color: black;
}

footer {
    width: 100%;
    padding: var(--spacing);
    margin-bottom: var(--spacing);
}

.w3-container {
    padding: 0 var(--spacing);
}

.w3-ul {
    margin: 0 auto;
    width: var(--text-width);
    border-radius: var(--border-radius);
    > li {
        border-bottom: none;
    }
}

.w3-card {
    margin: 0 auto;
    border-radius: var(--border-radius);
    overflow: hidden;
    width: min(100%, 360px);
}

.mySlides {
    width: 100%;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
}

#datenphoenix {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing);
    margin-block: var(--spacing);
    > img {
        width: min(100%, 500px);
    }
}

/* Abweichende Einstellungen falls width >= height */
@media screen and (min-aspect-ratio: 1) {
    .mySlides {
        width: 32.8%;
    }
}