* { box-sizing: border-box; }
html, body { height: 100%; }
:root {
    --fade: 0;
    --bg-shift: -20%;
    --fade-color: #111;
    --darkBlueTextColour: rgb(18, 10, 69);
    --mainTextColour: rgb(18, 10, 69);
}
body {
    margin: 0;
    font-family: 'Fjalla One', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #fff;
    line-height: 1.6;
    background: #ffffff; /*was 000 black*/

}



.bg-wrapper {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}
:root {
  --fade: 0;
  --bg-shift: -20%;       /* how far the image slides up */
  --fade-color: #111;     /* background color of next section */
}

.fade-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--fade-color);
  /* Fade in as we progress through the spacer */
  opacity: var(--fade);
  pointer-events: none;
}


@media (max-width: 667px) {
    .content {
        padding-top: 20vh;
        padding-left: clamp(1rem, 3vw, 2rem);
        padding-right: clamp(1rem, 3vw, 2rem);
        padding-bottom: 8rem;
        max-width: 100%; /*72ch;*/
        margin: 0 auto;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
}
@media (min-width: 668px) {
    .content {
        padding-top: 20vh;
        padding-left: clamp(1rem, 3vw, 2rem);
        padding-right: clamp(1rem, 3vw, 2rem);
        padding-bottom: 8rem;
        max-width: 60%; /*72ch;*/
        margin: 0 auto;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }

}

        .line {
            font-size: 1.1rem;
            font-weight: 600;
            text-align: center; /*tried justify*/
            margin: 20px 0;
            transition: font-size 0.05s linear, opacity 0.05s linear;
        }

        .lineHeading {
            font-size: 2.5rem;
            font-weight: 600;
            text-align: justify; /*center*/
            margin: 60px 0;
            transition: font-size 0.05s linear, opacity 0.05s linear;
        }

        .intro, .body {
            backdrop-filter: blur(2px);
            background: rgba(0, 0, 0, 0.85);
            border-radius: 12px;
            padding: 1rem;
        }

        .introMidPurple {
            backdrop-filter: blur(2px);
            background: rgb(58, 3, 91, 0.65);
            border-radius: 12px;
            padding: 1rem;
        }

        .introFaintBlueTint {
            backdrop-filter: blur(2px);
            background: rgb(3, 26, 98, 0.25);
            border-radius: 12px;
            padding: 1rem;
        }

        .introBlueTint {
            backdrop-filter: blur(2px);
            background: rgb(147, 167, 229, 0.85);
            border-radius: 12px;
            padding: 1rem;
        }

        .introGreenTint {
            backdrop-filter: blur(2px);
            background: rgb(26, 60, 3, 0.80);
            border-radius: 12px;
            padding: 1rem;
        }

        .introFaintGreyHue {
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
            background: rgb(127, 118, 141, 0.3);
            border-radius: 10px;
            padding: 0.6rem;
        }

        .introWhite {
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
            background: white;
            border-radius: 10px;
            padding: 0.6rem;
        }

        .introOffWhite {
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
            background: rgb(218, 212, 221, 0.90);
            border-radius: 10px;
            padding: 0.6rem;
        }

        h1, h2 {
            line-height: 1.5;
            margin: 0 0 0.5rem 0;
        }

        h1 {
            font-size: 2.5em; /* 2 times the size of the parent element's font size */
        }


        /*p { margin: 0.75rem 0; }*/

        /* Spacer that defines the fade zone */
        .fade-out-spacer {
            height: 30vh; /* longer = more gradual fade/shift */
        }

        .text-boxes {
            background: var(--fade-color);
            padding: 4rem 2rem;
            color: #fff;
            margin-left: calc(-1 * clamp(1rem, 3vw, 2rem));
            margin-right: calc(-1 * clamp(1rem, 3vw, 2rem));
            padding-left: clamp(1rem, 3vw, 2rem);
            padding-right: clamp(1rem, 3vw, 2rem);
        }

            .text-boxes h2 {
                text-align: center;
                margin-bottom: 2rem;
            }

        .box-grid {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            max-width: 1000px;
            margin: 0 auto;
        }

        .box {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            padding: 1.5rem;
            backdrop-filter: blur(4px);
            transition: transform 0.2s ease, background 0.2s ease;
        }

            .box:hover {
                transform: translateY(-4px);
                background: rgba(255, 255, 255, 0.15);
            }

        .textLeft {
            text-align: left;
        }

        .textRight {
            text-align: right;
        }

        .left11 {
            text-align: left;
            padding: 0.7rem;
            font-size: 1.1em;
            color: var(--mainTextColour);
            margin: 2px 2px 2px 2px;
        }

        .left15 {
            text-align: left;
            padding: 0.7rem;
            font-size: 1.5em;
            color: var(--mainTextColour);
            margin: 2px 2px 2px 2px;
        }

        .centerMedium {
            text-align: center;
            padding: 1rem;
            font-size: 2.5em;
        }

        .center15 {
            text-align: center;
            padding: 1rem;
            font-size: 1.5em;
            margin: 2px 2px 2px 2px;
            color: var(--mainTextColour);
        }

        .center18 {
            text-align: center;
            padding: 0.7rem;
            font-size: 1.8em;
            margin: 2px 2px 2px 2px;
        }

        .center15MinM {
            text-align: center;
            padding: 1rem;
            font-size: 1.5em;
            margin: 4px;
        }

        .center12 {
            text-align: center;
            padding: 0.8rem;
            font-size: 1.2em;
            color: var(--mainTextColour);
        }

        .center10 {
            text-align: center;
            padding: 0.5rem;
            font-size: 1em;
            color: rgb(94, 87, 105, 0.30);
        }

        .justified11WhiteMinM {
            text-align: justify;
            padding: 0.6rem;
            font-size: 1.1em;
            margin: 2px 2px 2px 2px;
        }

        .justified11MinM {
            text-align: justify;
            padding: 0.6rem;
            font-size: 1.1em;
            margin: 2px 2px 2px 2px;
            color: var(--mainTextColour);
        }

        .center10WhiteMinM {
            text-align: center;
            padding: 0.6rem;
            font-size: 1em;
            margin: 1px 1px 1px 1px;
            color: white;
        }

        .center11WhiteMinM {
            text-align: center;
            padding: 0.6rem;
            font-size: 1.1em;
            margin: 1px 1px 1px 1px;
            color: white;
        }

        .gap4 {
            width: 100px;
            height: 200px;
            background-color: rgba(0,0,0,0);
            margin: 120px; /* Space outside the element */
            padding: 10px; /* Space inside the element */
        }

        .gap3 {
            width: 100px;
            height: 150px;
            background-color: rgba(0,0,0,0);
            margin: 90px; /* Space outside the element */
            padding: 10px; /* Space inside the element */
        }

        .gap2 {
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,0);
            margin: 60px; /* Space outside the element */
            padding: 10px; /* Space inside the element */
        }

        .gap1 {
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,0);
            margin: 30px; /* Space outside the element */
            padding: 10px; /* Space inside the element */
        }

        .gap01 {
            width: 100px;
            height: 10px;
            background-color: rgba(0,0,0,0);
            margin: 10px;
            padding: 10px;
        }



        .imgShadow {
            border: 1px solid var(--mainTextColour);
            border-radius: 10px;
            display: inline-block;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
            padding: 1px 1px 1px 1px;
        }

        .imgShadow150 {
            width: 150px;
            height: auto;
            border: 1px solid var(--mainTextColour);
            border-radius: 10px;
            display: inline-block;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
            padding: 1px 1px 1px 1px;
        }

        .imgShadow220 {
            width: 220px;
            height: auto;
            border: 1px solid var(--mainTextColour);
            border-radius: 10px;
            display: inline-block;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
            padding: 1px 1px 1px 1px;
        }

        .imgLogo {
            transform: scale(0.4);
            transform-origin: center;
        }

        .imgLineOfText {
            /*    width: 35px;
    height: auto;*/
            margin: 0px;
            margin-bottom: 18px;
            padding: 0px;
            border-radius: 8px;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
        }


        .textBlue {
            color: #1DC0FB;
        }


        img {
            width: 100%; /* max-width: 500px;  Makes the image fill the container */
            padding-top: 40px;
        }

        @media (max-width: 667px) {
            img {
                width: 100%; /* max-width: 500px;  Makes the image fill the container */
                padding-top: 40px;
            }

            .imgFaded {
                max-width: 300px;
                height: auto;
                padding: 12px 12px 12px 12px;
                opacity: 0.35;
            }

            .imgPadded {
                padding-top: 70px;
                /*    object-fit: fill;*/
                width: 100vw; /* Full width of the viewport */
                height: auto; /* Full height of the viewport */
                object-fit: cover; /* Ensures the image covers the screen */
                object-position: center; /* Centers the image */
                z-index: 2;
                opacity: 0.3;
            }

            .imgPaddedTop {
                padding-top: 70px;
                /*    object-fit: fill;*/
                width: 100vw; /* Full width of the viewport */
                height: auto; /* Full height of the viewport */
                object-fit: cover; /* Ensures the image covers the screen */
                object-position: center; /* Centers the image */
                z-index: 3;
                opacity: 1;
            }
        }

        @media (min-width: 668px) {
            img {
                width: 70%; /* max-width: 500px;  Makes the image fill the container */
                padding-top: 40px;
            }

            .imgFaded {
                /*        max-width: 300px;*/
                align-content: center;
                width: 70%;
                height: auto;
                padding: 12px 12px 12px 12px;
                opacity: 0.35;
            }

            .imgPadded {
                padding-top: 70px;
                /*    object-fit: fill;*/
                width: 100vw; /* Full width of the viewport */
                height: auto; /* Full height of the viewport */
                padding-left: 150px;
                padding-right: 150px;
                z-index: 2;
                opacity: 0.3;
            }

            .imgPaddedTop {
                padding-top: 70px;
                /*    object-fit: fill;*/
                width: 100vw; /* Full width of the viewport */
                height: auto; /* Full height of the viewport */
                padding-left: 150px;
                padding-right: 150px;
                z-index: 3;
                opacity: 1;
            }
        }

        .panel {
            height: 100vh;
            background-size: cover;
            background-position: center;
        }

        .bookButton {
            background-color: rgba(0,0,0,0);
            border-radius: 30px;
        }

        /*.bookButton img {
            width: 150px;
            height: auto;
}*/
        .img150Wide {
            width: 150px;
            height: auto;
            padding: 2px 2px 2px 2px;
            margin: 0;
        }

        .img200Wide {
            width: 200px;
            height: auto;
            padding: 2px 2px 2px 2px;
            margin: 0;
        }



        .imgShadow100 {
            width: 100px;
            height: auto;
            border: 1px solid white;
            border-radius: 10px;
            display: inline-block;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
            padding: 1px 1px 1px 1px;
        }

        .imgNoShadow100 {
            width: 100px;
            height: auto;
            display: inline-block;
            padding: 1px 1px 1px 1px;
        }

        .img80px {
            width: 80px;
            height: auto;
            display: inline-block;
            padding: 1px 1px 1px 1px;
        }

        .img220px {
            width: 220px;
            height: auto;
            display: inline-block;
            padding: 1px 1px 1px 1px;
        }

        .img300px {
            width: 300px;
            height: auto;
            display: inline-block;
            padding: 1px 1px 1px 1px;
        }

        .leftGetBook {
            text-align: left;
            padding: 0.6rem;
            font-size: 1em;
            color: var(--mainTextColour);
            margin: 1px 1px 1px 1px;
        }