/* Text Formatting */
p {
    color: black;
    font-family: 'Concert One', cursive;
    text-align: center;
    
}
main h1 {
    margin-top: 1em;
    font-size: 300%;
    font-family: 'Concert One', cursive;
    color: black;;
    text-align: center;
}
.format {
    margin-right: 10px;
    margin-left: 10px;
}
/* Image container tags */
.img-container {
    padding: 5vh 0;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-bottom: 1em;
    text-align: center;
    display: flex;
    justify-content: center;
}
.item {
    flex-basis: 30%;
    font-family: 'Concert One', cursive;
    color: black;
}
.img {
    border: 3px solid pink;
    border-radius: 5px;
    max-width: 450px;
    margin-right: 50px;
    margin-left: 50px;
    transition: 0.3s;
}

.item h2 {
    padding-top: 15px;
}

/* Round Tango picture in the top right corner of the page body, just under the header.
   main starts below the 56px menu row, so pull it up into that row (beside the centred links) */
main {
    position: relative;
}
.profile-pic {
    position: absolute;
    top: -44px;
    right: 1.5rem;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    z-index: 1;
}
/* Room above the first section so the book pictures start below the corner picture */
.profile-pic + .home-section {
    padding-top: 3rem;
}
/* Narrower screens: centre it above the first title so it never covers the menu or titles */
@media only screen and (max-width: 860px) {
    .profile-pic {
        position: static;
        display: block;
        width: 120px;
        height: 120px;
        margin: 1.5rem auto 0;
    }
    .profile-pic + .home-section {
        padding-top: 1.5rem;
    }
}

/* Homepage sections (The Amazing Amazon, Illustrations) */
.home-section {
    padding-top: 2.5rem;
}
.section-title {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    text-align: center;
    margin: 0;
    padding-top: 0;
}
.section-subtitle {
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    letter-spacing: 0.04em;
    margin: 0.25rem 0 0;
    padding-bottom: 0;
}
.home-section .img-container {
    padding: 2vh 0;
    margin-top: 1rem;
}
/* Book stills are wide, so they get wider columns than the portrait close-ups */
.book-container {
    gap: 2rem;
}
.book-container .item {
    flex: 0 1 560px;
}
.book-container .img {
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.link-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 0.5rem 1rem 0;
}
.pill-link {
    display: inline-block;
    padding: 0.6em 1.4em;
    border: 2px solid rgb(166, 3, 128);
    border-radius: 999px;
    background: #eeaee4;
    color: black;
    font-size: 1.15rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pill-link:hover,
.pill-link:focus {
    color: black;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}



/* Media queries */
@media only screen and (max-width: 1050px) {
    /* Make the images in the image container a smaller maximum width so that they fit in the screen under 1050px */
    .img {
        max-width: 375px;
    }
}
@media only screen and (max-width: 900px) {
    .img-container {
        flex-direction: column;
    }
    h2 {
        padding-top: 30px;
    }
    p, .item {
        padding-bottom: 30px;
    }
    .book-container {
        gap: 0;
    }
    .book-container .item {
        flex: none;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        padding: 0 1rem 30px;
    }
}
@media only screen and (max-width: 800px) {
    header {
        text-align: center;
    }
    #logoimage {
        float: none;
        display: block;
        margin: 0 auto;
    }
    #navlist {
        display: none;
    }
    
}
@media only screen and (max-width: 500px) {
    .img {
        max-width: 350px;
    }
}
@media only screen and (max-width: 450px) {
    .img {
        max-width: 325px;
    }
}
@media only screen and (max-width: 425px) {
    .img {
        max-width: 300px;
    }
}
@media only screen and (max-width: 400px) {
    .img {
        max-width: 265px;
    }
}
@media only screen and (max-width: 375px) {
    .img {
        max-width: 250px;
    }
}
@media only screen and (max-width: 350px) {
    .img {
        max-width: 225px;
    }
}
@media only screen and (max-width: 340px) {
    .img {
        max-width: 200px;
    }
}
@media only screen and (max-width: 320px) {
    .img {
        max-width: 180px;
    }
}
@media only screen and (max-width: 300px) {
    .img {
        max-width: 150px;
    }
}