* {
    box-sizing: border-box;
}
html {
    font-size: 18px;
    font-family: 'Acme', sans-serif;
    background-color: rgb(9, 34, 49);
    color: azure;
}
body {
    width: 100%;
    max-width: 790px;
    margin: 0 auto;
    padding: 0 10px;
}
h1 {
    font-size: 2.5rem;
    text-align: center;
    color: rgb(74, 147, 230);
    border: 8px solid rgb(74, 147, 230);
}
.headline {
    font-size: 1.67rem;
    text-align: center;
}
.nav {
    font-size: 1.11rem;
    color: rgb(17, 119, 179);
    display: flex;
}
.li-fische, .li-wetten, .li-kescher {
    list-style: none;
    padding: 0.22rem;
}
.mainwetten, .fische, .wetten, .kescher {
    color: rgb(17, 119, 179);
}
.mainwetten-clicked, .fische-clicked, .wetten-clicked, .kescher-clicked {
    color: azure;
}
a:hover {
    text-decoration: none;
}
.konfischius-image {
    margin: 10px 0;
    width: 100%;
    max-width: 540px;
    height: auto;
}
#quote {
    transition: opacity 0.3s ease;
}
article {
    font-size: 1rem;
    border: solid 5px azure;
    padding: 0 0.28rem;
}
.fische-main {
    display: flex;
    flex-wrap: wrap;
    border: 5px solid azure;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}
figure {
    width: 100%;
    max-width: 200px;
    margin: 0;
    text-align: center;
}
.fische-main img {
    width: 100%;
    height: auto;
    display: block;
}
figcaption {
    font-size: 1rem;
    color: azure;
}
.textblau {
    color: rgb(74, 147, 230);
}
@media (max-width: 600px) {
    h1 { font-size: 1.67rem; }
    .headline { font-size: 1.11rem; }
    .nav { font-size: 0.78rem; display: flex; }
    .li-fische, .li-wetten, .li-kescher { padding: 0.22rem; }
    article { font-size: 0.89rem; }
    figure { max-width: 150px; }
}
@media (min-width: 601px) and (max-width: 900px) {
    h1 { font-size: 2.11rem; }
    .headline { font-size: 1.33rem; }
    .nav { font-size: 1rem; }
    figure { max-width: 180px; }
}