/* Universal Selector */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Soft blended blues: pale base with large, faint glows of baby blue and the lavender blue
   from the Tango picture, with a sparse layer of tiny twinkling stars on top.
   Fixed so everything stays put while scrolling long pages. */
html {
    background-color: #d4ebfa;
    background-image:
        url(../images/stars.svg),
        radial-gradient(ellipse 55% 45% at 12% 18%, rgba(185, 224, 251, 0.95), transparent 70%),
        radial-gradient(ellipse 50% 55% at 88% 22%, rgba(170, 190, 252, 0.55), transparent 70%),
        radial-gradient(ellipse 60% 50% at 30% 85%, rgba(176, 196, 250, 0.45), transparent 70%),
        radial-gradient(ellipse 55% 45% at 80% 80%, rgba(178, 222, 250, 0.8), transparent 70%),
        radial-gradient(ellipse 40% 35% at 55% 50%, rgba(230, 243, 253, 0.7), transparent 70%);
    background-size: 900px 700px, auto, auto, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed;
}

body {
    background-color: rgb(245, 131, 197);
}
html,body {
    width: 100%;
    margin: 0;
    padding: 0;
}
/* Sticky footer: body is a column at least as tall as the screen, and main
   stretches to fill any leftover space so the footer always sits at the bottom */
body {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
main {
    flex: 1 0 auto;
}
footer {
    flex-shrink: 0;
}
p {
    font-size: 20px;
}
/* Clearfix Class */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
a {
    text-decoration: none;
}
.navbar-nav {
    margin: auto;
}
.nav-item {
    margin-left: 20px;
    margin-right: 20px;
}
/* One font and black text everywhere, including Bootstrap's nav and dropdown links */
body {
    font-family: 'Concert One', cursive;
    color: black;
}
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .show > .nav-link,
.dropdown-menu,
.dropdown-item {
    color: black;
}
/* Phone menu: centered hamburger button, menu items centered when opened */
@media (max-width: 575.98px) {
    .navbar > .container-fluid {
        justify-content: center;
    }
    .navbar-collapse .navbar-nav {
        align-items: center;
        text-align: center;
        padding: 0.5rem 0;
    }
    .navbar-collapse .dropdown-menu {
        text-align: center;
    }
}
/* The current page's link (marked disabled) stays black but underlined */
.navbar-light .navbar-nav .nav-link.disabled,
.dropdown-item.disabled {
    color: black;
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* Header Tags */
header {
    /* Blended pinks: the original #eeaee4 with soft glows of bubblegum, lavender pink and light pink */
    background-color: #eeaee4;
    background-image:
        radial-gradient(ellipse 35% 140% at 8% 30%, rgba(247, 160, 212, 0.85), transparent 70%),
        radial-gradient(ellipse 30% 130% at 35% 90%, rgba(220, 178, 244, 0.75), transparent 70%),
        radial-gradient(ellipse 30% 120% at 62% 15%, rgba(250, 200, 236, 0.85), transparent 70%),
        radial-gradient(ellipse 35% 140% at 92% 70%, rgba(214, 170, 242, 0.8), transparent 70%),
        radial-gradient(ellipse 25% 110% at 78% 20%, rgba(244, 150, 208, 0.55), transparent 70%);
    padding-top: 15px;
    padding-left: 0.5em;
    position: relative;
}
.extendheader {
    padding-top: 22.5px;
    padding-bottom: 22.5px;
}
header h2 {
    font-family: 'Concert One', cursive;
    color: black;
    font-size: 350%;
    display: block;
    text-align: center;
    font-weight: bold;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
header h3 {
    font-family: 'Concert One', cursive;
    color: black;
    font-size: 150%;
    display: block;
    text-align: center;
    font-weight: bold;
}
header img {
    margin-top: 10px;
}
/* Header title with a short vine on each side (about 2 inches, swirl up by the title and swirl
   down at the outer end). Each vine strip fills the space beside the title and the drawing sits
   at the title end; where the strip is narrower than the vine (long titles on phones) the vine
   shrinks to fit so both swirls still show. The right one is the same vine mirrored. */
.title-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: -0.5em; /* cancel the header's left padding so the row is truly centred */
    padding-bottom: 6px;
}
.title-text {
    flex: 0 1 auto;
    min-width: 0;
}
.vine {
    flex: 1 1 0;
    min-width: 36px; /* always leave a little sprig showing beside long titles */
    height: 110px;
    background: url(../images/vine-h.svg) right center / contain no-repeat;
}
.vine-right {
    transform: scaleX(-1);
}
/* Long header titles (e.g. "Children's Books") shrink with the screen on phones so the
   vines still have room beside them */
@media only screen and (max-width: 600px) {
    header h2 {
        font-size: clamp(1.9rem, 9.5vw, 3.5rem);
    }
}
@media only screen and (max-width: 480px) {
    .title-row {
        gap: 0.3rem;
    }
    .vine {
        height: 70px;
    }
}
/* Html */
/* html {
    background-image: url(../images/background.avif);
}

/* Body: transparent so the html background color shows through */
body {
    background-color: transparent;
}

/* List formatting */
ul li {
    font-family: 'Concert One', cursive;
    color: black;
}

/* Logo formatting */
#logoimage {
    max-width: 120px;
    width: 100%;
    float: left;
}


/* Go to top button */
#cornerBtn {
    display: none; /* Hidden by default */
    position: fixed;
    left: 5px;
    bottom: 150px;
    z-index: 99; /* Make sure it does not overlap */
    border: 1px solid black;
    outline: none; /* Remove outline */
    font-weight: bold;
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: .5em .5em;
    margin: 0 1em 3px 0;
    font-family: 'Concert One', cursive;
    font-size: 100%;
    border-radius: 5px;
    background-color: rgba(0,0,0,.6);
    color: white;
    transition: all .5s;
 }
.caption {
    margin: 30px 6em;
    color: black;
    font-family: 'Concert One', cursive;
}
 #cornerBtn:hover {
    background-color: rgba(0,0,0,1);
    color: red;
    border: 1px solid red;
 }

/* Footer Tag */
footer {
    clear: both;
    color: black;
    /* Same blended pinks as the header, arranged differently so the two don't look stamped */
    background-color: #eeaee4;
    background-image:
        radial-gradient(ellipse 35% 140% at 10% 70%, rgba(214, 170, 242, 0.8), transparent 70%),
        radial-gradient(ellipse 30% 130% at 38% 15%, rgba(250, 200, 236, 0.85), transparent 70%),
        radial-gradient(ellipse 30% 120% at 65% 85%, rgba(247, 160, 212, 0.8), transparent 70%),
        radial-gradient(ellipse 35% 140% at 92% 30%, rgba(220, 178, 244, 0.75), transparent 70%);
    text-align: center;
    font-size: 150%;
    font-variant: small-caps;
    border: 2px solid rgb(166, 3, 128);
}

footer p {
    font-family: 'Concert One', cursive;
    margin-bottom: 1px;
    color: black;
    font-size: 20px;
    font-weight: 300;
}
/* Footer container elements */
.footer-container {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    
}

.footer-img {
    margin-top: 5px;
    max-width: 40px;
    border: 3px solid black;
    border-radius: 10px;
}
.footer-item {
    flex-basis: 10%;
}

#small-pg {
    font-size: 75%;
}

/* Media Query */
@media only screen and (max-width: 820px) {
    .footer-item {
        flex-basis: 20%;
    }
}