@import url('https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');

:root {
    --grid-dots: url('data:image/svg+xml;utf8,<svg width="100" height="100" transform="rotate(0)" opacity="0.2" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g  fill="%23250E17"><circle cx="25" cy="25" r="12.5"/><circle cx="75" cy="75" r="12.5"/><circle cx="75" cy="25" r="12.5"/><circle cx="25" cy="75" r="12.5"/></g></svg>');
    --scatterd-dots: url('data:image/svg+xml;utf8,<svg width="100" height="100" transform="rotate(25)" opacity="0.3" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g  fill="%23250E17"><circle cx="25" cy="25" r="12.5"/><circle cx="75" cy="75" r="12.5"/><circle cx="75" cy="25" r="12.5"/><circle cx="25" cy="75" r="12.5"/></g></svg>');
    --my-polygon: "76.435,10.906 60.356,48.289 44.052,30.703 44.239,56.352 9.122,43.383 34.458,67.625 18.771,76.062 37.552,82.461 10.606,98.633 44.231,96.242 45.177,121 59.88,98.805 71.356,111.414 75.896,100.906 94.771,114.234 92.083,99.344 127.083,116.406 102.09,91.312 125.551,77.836 100.442,73.93 123.771,52.727 89.176,58.445 98.286,32.141 78.997,46.953";
    /* Vars */
    --width: 50%; /* Container width */
    --skew: 6deg; /* Diagonal and slant value in degrees */
    --fit-img-scaler: 1.5; /* Increase as --skew increases to fill empty space */
    --border-thickness: .4rem; /* Optional border */
    --header-height: 175px;
}

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Oswald;
    color: black;
}

html {
    height: 100%;
}

/* Set body styles */
body {
    background-size: 100%;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    color: rgb(0, 0, 0);
    z-index: -5;
    height: 100%;
    min-height: 100%;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    header h1 {
        font-size: 32px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 4px;
        font-family: 'Oswald', sans-serif;
        color: rgb(0, 0, 0);
        margin: 0;
    }

p {
    font-family: lora;
    line-height: 1.3rem;
}

img {
    vertical-align: middle;
}

nav {
    /*
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    padding: 0.5rem 2rem;
    top: 0;
    width: 100%;
    z-index: 3;
    left: 0;
    font-size: clamp(1.25rem, 2.5rem, 2.5rem);
    white-space: nowrap;
    padding-right: 1rem;
    border: 0.4rem solid #000;
    border-bottom: none;
    background: var(--scatterd-dots), #992c2c;
    background-repeat: repeat, no-repeat;
    background-size: 5px, 100%;
    height: var(--header-height);*/
    width: 100%;
}

.header-text {
    font-weight: bold;
    font-size: 2.1rem;
    line-height: 2.7rem;
    letter-spacing: -.05rem;
    text-decoration: none;
}

button {
    cursor: pointer;
}

.logo-button {
    background-image: url(../img/article-bg.png);
    background-color: white;
    background-repeat: repeat;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    text-align: center;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 0.4rem solid #000;
    padding-bottom: 1rem;
}

.header-contact-button {
    background-image: url(../img/rectangle-speech-bubble.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    width: 20rem;
    height: 9rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

    .header-contact-button:hover {
        transform: translateX(-0.2rem);
    }

.contact-me-explosion:hover {
    transform: translateY(-0.3rem);
}


/*STYLES FOR HEADER HIDE AND SHOW*/
.menu-wrapper {
    padding: 0.5rem 2rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 2;
    transition: transform 0.4s;
    border: 0.4rem solid #000;
    border-bottom: none;
    background: var(--scatterd-dots), #992c2c;
    background-repeat: repeat, no-repeat;
    background-size: 5px, 100%;
}

header {
    transition: transform 0.4s;
}

.scroll-down .menu-wrapper {
    transform: translate3d(0, -100%, 0);
}

.scroll-down .lottie-wrapper {
    background: var(--darkgray);
}

.scroll-up .menu-wrapper {
    transform: none;
}
/*********************************/

dialog {
    margin: auto;
}

    dialog::backdrop {
        background: rgba(0, 0, 0, 0.6);
    }

.modal {
    width: 30%;
    height: 30%;
}

nav h1 {
    display: flex;
    font-weight: bold;
    letter-spacing: -.1rem;
    color: #000000;
    font-size: 0.85em;
    white-space: nowrap;
    padding-right: 1rem;
    background-image: url('../img/article-bg.png');
    background-color: white;
    background-repeat: repeat;
    border-radius: 50%;
    border: .4rem solid black;
    justify-content: center;
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 1.3;
    padding: 0.25rem 0.75rem 0.75rem 0.75rem;
    flex-direction: column;
    position: relative; /* Add this line */
}


nav ul {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navlink {
    display: inline-block;
    padding: 10px;
    background-color: rgb(255, 220, 25);
    color: rgb(0, 0, 0);
    text-decoration: none;
    border: 0.4rem solid #000;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: clamp(0.75rem, 1rem, 1rem);
    position: relative;
}

    .navlink:before {
        content: "";
        position: absolute;
        left: -1rem;
        top: 0.15rem;
        width: 100%;
        height: 100%;
        border-bottom: 0.75rem solid #000;
        border-left: 0.75rem solid #000;
        z-index: -5;
    }

    .navlink:hover {
        background-color: rgb(255, 242, 156);
        color: #000;
    }

    .navlink:active {
        transform: translate(-5px, 5px);
        z-index: 10; /* increase the z-index */
    }

        .navlink:active::before {
            transform: translate(5px, -5px);
            z-index: -5;
        }

footer {
    margin: 4px;
    position: fixed;
    bottom: 0;
}


/* Set section styles */
section {
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 0.4rem solid #000;
    border-bottom: 0rem;
}

    section:nth-child(1) {
        background: var(--scatterd-dots), #992c2c;
        background-repeat: repeat, no-repeat;
        background-size: 5px, 100%;
    }

    section:nth-child(2) {
        background: var(--grid-dots), #3b56cf;
        background-repeat: repeat, no-repeat;
        background-size: 20px, 100%;
    }

    section:nth-child(3) {
        background: var(--scatterd-dots), #7d4eff;
        background-repeat: repeat, no-repeat;
        background-size: 10px, 100%;
    }

    section:nth-child(4) {
        background-color: #e75d01;
        background-repeat: repeat, no-repeat;
        background-size: 15px, 100%;
    }

    section:nth-child(5) {
        background: var(--scatterd-dots), #5ce6e6;
        background-repeat: repeat, no-repeat;
        background-size: 10px, 100%;
    }

    section:nth-child(6) {
        background: var(--scatterd-dots), #6a4a80;
        background-repeat: repeat, no-repeat;
        background-size: 10px, 100%;
    }

.last {
    border-bottom: 0.4rem solid #000;
}


.comic-box {
    box-sizing: border-box;
    border: 0.4rem solid #000;
    background-image: url('../img/article-bg.png');
    background-color: white;
    background-repeat: repeat;
    flex: 1;
}

.text-large {
    font-size: 2em;
}

.comic-heading {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 0.5rem 1rem;
}

.icon img {
    width: 6rem;
    display: flex;
    padding: 1rem;
    align-items: center;
}

.text p {
    margin: 1.5rem;
}

#program-offerings {
    display: inline-block;
    padding: 0;
    margin-top: 0;
    background-color: rgb(241, 241, 241);
    color: rgb(0, 64, 255);
    border: none;
    text-decoration: none;
    text-transform: none;
    font-weight: normal;
    font-size: 1rem;
    margin-left: 0;
    font-family: lora;
}

.main-box {
    text-align: center;
    font-size: 1.5rem;
    margin: 20px auto;
}

.testimonial-img {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 50%;
}

.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.large {
    font-size: 2.5rem;
}

.small {
    font-size: 1.35rem;
}


.bubble-text {
    position: absolute;
}

#intro-video {
    width: 100%;
    height: auto;
}




/*BIO PAGE*/
.bio-page {
    border: 0.4rem solid #000;
    background-color: #F93;
    min-height: 100%;
    font-size: 18px;
    font-family: Lora;
    padding-top: 1rem;
}



/*STORIES FOR ALL AGES PAGE*/
.stories-page {
    border: 0.4rem solid #000;
    min-height: 100%;
    font-size: 18px;
    font-family: Lora;
    background: #F37338;
    background-image: url(../img/stories-bg.png);
    background-repeat: repeat;
}

.section {
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.program-info {
    color: #C22326;
    font-weight: bold;
}

.program-info-2 {
    color: #027878;
    font-weight: bold;
}

.program-heading {
    border-bottom: 1px dashed #262626;
}

.program-img {
    width: 30%;
    float: right;
    margin-left: 5px;
    max-width: 200px;
}



/*UTILIITY CLASSES*/

.text-center {
    text-align: center;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.justify-content-evenly {
    justify-content: space-evenly;
}

.justify-content-start {
    justify-content: start;
}

.justify-content-end {
    justify-content: end;
}

.align-items-center {
    align-items: center;
}

.align-items-between {
    align-items: space-between;
}

.align-items-around {
    align-items: space-around;
}

.align-items-evenly {
    align-items: space-evenly;
}

.align-items-start {
    align-items: start;
}

.align-items-end {
    align-items: end;
}

.d-flex {
    display: flex;
}

.wrap {
    flex-wrap: wrap;
}

.wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-basis-100 {
    flex-basis: 100%;
}

.flex-basis-80 {
    flex-basis: 90%;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

.flex-4 {
    flex: 4;
}

.flex-5 {
    flex: 5;
}

.col-gap {
    column-gap: 1.5rem;
}

.col-gap-2 {
    column-gap: 3rem;
}

.col-gap-3 {
    column-gap: 4.5rem;
}

.row-gap {
    row-gap: 1.5rem;
}

.row-gap-2 {
    row-gap: 3rem;
}

.row-gap-3 {
    row-gap: 4.5rem;
}

.p0 {
    padding: 0;
}

.pb {
    padding-bottom: 1.5rem;
}

.px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.p-1 {
    padding: 1rem;
}

.pt {
    padding-top: 1.5rem;
}

.pt-1 {
    padding-top: 1rem;
}

.mx {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.mx-1 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mb {
    margin-bottom: 1.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 0.5rem;
}

.mt {
    margin-top: 1.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.font-size-1 {
    font-size: 1rem;
}

.font-size-15 {
    font-size: 1.5rem;
}

.font-size-2 {
    font-size: 2rem;
}

.full-hight {
    height: 100%;
}

.position-relative {
    position: relative;
}

.lora {
    font-family: 'Lora', serif;
}

.display-inline {
    display: inline;
}

.align-self-center {
    align-self: center;
}

.align-self-end {
    align-self: end;
}

.fw-bold {
    font-weight: bold;
}

.fs-italic {
    font-style: italic;
}

.w-100 {
    width: 100%;
}

.phone-button {
    background: none;
    border: none;
    cursor: pointer;
    height: 64px;
}

.phone-icon {
    width: 64px;
    height: 64px;
}

.talk-bubble {
    position: absolute;
    width: 30rem;
    left: -7rem;
    top: 25%;
    transform: scaleX(-1);
}

iframe {
    width: 100%;
    aspect-ratio: 16/9;
}

@media (max-width: 1200px) {
    .flex-basis-80 {
        flex-basis: 100%;
    }
}

@media (max-width: 1024px) {


    .small-screen-hide {
        display: none;
    }

    .talk-bubble {
        transform: none !important;
        width: 20rem !important;
        right: -3rem !important;
        left: initial !important;
    }

        .talk-bubble .bubble-text {
            transform: scaleX(1) translate(-50%, -50%) !important;
            left: 50% !important;
            font-size: 1.4rem !important;
        }

    .header-contact-button {
        font-size: 2.5vw;
    }
}

@media (max-width: 768px) {

    section {
        padding: 10px;
    }

    .section {
        padding: 5px;
    }

    .header-contact-button {
        display: none;
    }

    .logo-button {
        display: none;
    }

    .menu-wrapper {
        justify-content: center;
    }

    nav ul {
        align-items: center;
        gap: 1.5rem;
    }

        nav ul li {
            width: 100%;
        }

            nav ul li a {
                width: 100%;
                text-align: center;
            }

    .wrap-small {
        flex-wrap: wrap;
    }

    .wrap-reverse-small {
        flex-wrap: wrap-reverse;
    }
}

@media (max-width: 576px) {
    .no-padding-xs {
        padding: 0px;
    }

    .xs-hide {
    }

    .talk-bubble {
        transform: none !important;
        width: 15rem !important;
        right: -3rem !important;
        left: initial !important;
        top: 15% !important;
    }

        .talk-bubble .bubble-text {
            transform: scaleX(1) translate(-50%, -50%) !important;
            left: 50% !important;
            font-size: 1rem !important;
        }

    nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
}