:root {
    --main-font: "Courgette", cursive;
    --paragraph-font: "Kalam", cursive;
    --links-color: rgb(56, 228, 40);
    --light-green: rgb(224, 255, 234);
    --light-purple: rgb(235, 224, 255);
}

body {
    background: rgb(63, 4, 119);
    font-family: var(--paragraph-font);
}

.container {
    /* This is not the max width for the whole window, it's the one I wanted */
    max-width: 1000px;
    margin: 0 auto;
}

header {
    font-family: var(--main-font);
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)), url('../images/polyam-triad.png');
    color: white;
    /* Match the header to the image ratio so the full image is visible */
    aspect-ratio: 948 / 482;
    /* Keep the full hero image visible inside the header instead of cropping it. */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    /* Stack the title and subtitle with a controlled gap instead of default heading margins. */
    display: flex;
    flex-direction: column;
    text-align: center;
}

header h3 {
    font-size: clamp(15px, 3vw, 25px);
    letter-spacing: clamp(1px, 0.5vw, 3px);
    margin: 0;
    margin-top: clamp(10px, 25vw, 270px);
    color: white;
}

header h1 {
    font-size: clamp(40px, 10vw, 96px);
    letter-spacing: clamp(1px, 1vw, 15px);
    margin: 0;
}

.spotify-embeds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.spotify-embeds iframe {
    display: block;
    width: 100%;
}

main {
    background-color: var(--light-purple);
}

h2,
h3,
h4,
h5 {
    font-family: var(--main-font);
    color: blueviolet;
}

main h2 {
    margin: 0;
    font-size: 40px;
    padding: 30px 0;
    text-align: center;
}

.flag-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: center;
    padding: 5px 20px;
}

.polyam-flag {
    width: 100%;
}

.flag-section p {
    font-size: 19.5px;
    text-align: left;
    line-height: 1.2;
    margin-top: 0;
}

.large-h2 {
    font-size: 35px;
}

/* The images cover the container and are fully visible */
.polyam-dinner,
.polyam-picnic {
    width: 100%;
    height: auto;
    display: block;
}

.books-section {
    background-color: var(--light-green);
    text-align: center;
    padding: 20px 20px;
}

.books-section h2 {
    margin-bottom: 20px;
    font-size: 40px;
}

.books-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.card {
    background-color: var(--light-purple);
}

.card-img {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.book-img {
    max-width: 100%;
}

.card-body {
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.card-body h4 {
    margin-top: 15px;
    font-size: 25px;
    margin-bottom: 10px;
}

.card-body p {
    font-size: 20px;
    line-height: 1.2;
    margin: 10px 5px;
    text-align: left;
}


.card-body h5 {
    margin: 0;
    font-size: 20px;
    margin-top: 15px;
}

.author-link {
    display: block;
    background-color: var(--light-green);
    color: rgb(235, 32, 222);
    font-size: 18px;
    font-family: var(--main-font);
    padding: 7px;
    border-radius: 5px;
    border: 2px solid black;
    text-decoration: none;
    margin: 0 auto;
    margin-top: 15px auto 20px;
    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}

.author-link:hover {
    background-color: rgb(235, 32, 222);
    color: white;
}

.two-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.book-link {
    display: block;
    text-align: center;
    color: rgb(235, 32, 222);
    text-decoration: none;
}

.bottom-books-section {
    margin-top: 30px;
}

.polyam-types {
    text-align: center;
    margin: 20px;
}

.polyam-types h2 {
    margin-bottom: 30px;
    font-size: 60px;
}

.grid-polyam-definitions {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 40px;
}

.polyam-definitions {
    background-color: var(--light-green);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.polyam-definitions h3 {
    margin-top: 8px;
    font-size: 25px;
    margin-bottom: 8px;
}

.polyam-definitions p {
    font-size: 20px;
    line-height: 1.2;
    text-align: left;
}

.footer-grid {
    grid-template-columns: 2fr 2fr;
    display: grid;
    gap: 35px;
    color: white;
}

footer h3 {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2px;
    color: white;
}

footer p {
    font-size: 20px;
    line-height: 26px;
    text-align: left;
}

.disclaimer {
    line-height: 1.2;
    margin-top: 80px;
    margin-bottom: 20px;
}

.disclaimer h2 {
    text-align: center;
    font-size: 40px;
    color: black;
}

.disclaimer p {
    font-size: 15px;
    line-height: 1.2;
}

footer a {
    color: var(--links-color);
    text-decoration: none;
}

/* Only works on small screens */
@media (max-width: 768px) {
    main h2 {
        font-size: 30px;
    }

    .spotify-embeds {
        grid-template-columns: 1fr;
        gap: 0;
    }

    iframe {
        padding: 0;
        margin: 0;
    }

    .medium-h2 {
        font-size: 25px;
    }

    .polyam-flag {
        width: clamp(180px, 52vw, 260px);
    }

    .flag-section {
        grid-template-columns: 1fr;
    }

    .flag-section p {
        font-size: clamp(15px, 5vw, 20px);
    }

    .large-h2 {
        font-size: 25px;
    }

    .books-section h2 {
        font-size: 30px;
    }

    .books-cards {
        grid-template-columns: 1fr;
    }

    .polyam-types h2 {
        font-size: 40px;
    }

    .grid-polyam-definitions {
        gap: 10px;
        grid-template-columns: 1fr;
        padding-bottom: 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }

    .disclaimer p {
        font-size: 20px;
    }
}

/* Works only on medium screens */
@media (min-width: 769px) and (max-width: 991px) {
    .flag-section p {
        font-size: clamp(13px, 1.8vw, 19.5px);
    }

    .large-h2 {
        font-size: 30px;
    }

    .books-section p {
        font-size: 18px;
    }

    h4.two-liner {
        font-size: 20px;
    }

    .two-liner {
        font-size: 13.5px;
    }

    .grid-polyam-definitions {
        gap: 10px;
        grid-template-columns: 1fr 1fr;
        padding-bottom: 20px;
    }
}