@import url('https://fonts.googleapis.com/css2?family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');

:root{
    --border: rgba(255, 0, 0, 0);
    --media-outline: var(--main-alt-3);
    --footer-elements-margin: 3vh;
    --grandchild-media-dimensions: 70vw;
    --program-content-max-width: 75vw;
    --media-border-radius: 30px;
    --toggle-transform-speed: 0.5s;
    --toggle-dimensions: 10vw;
    --input-fields-border-radius: 20px;

    --magenta: rgba(231, 22, 197, 1);
    --blueish: rgba(79, 43, 255, 1);
    --lighter-blusih: rgb(140, 118, 252);
    --cyanish: rgba(13, 204, 255, 1);
    --dark-purple: rgba(44, 6, 79, 1);

    --main-color: white;
    --main-alt: var(--blueish);
    --main-alt-2: var(--magenta);
    --main-alt-3: var(--lighter-blusih);
}


::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-thumb{
    background-color: purple;
    border-radius: 5px;
}

*{
    font-family: "Zain";
    -webkit-tap-highlight-color: transparent;
}

html, body{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

body{
    min-height: 100vh;
    margin: 0px;
    background-color: var(--main-color);
    background-image: linear-gradient(to left, rgba(0, 255, 255, 0.4), var(--main-color));
}


a{
    text-decoration: none;
    color: inherit;
}

header{
    border: 2px solid var(--border);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vh;
    background-color: var(--cyanish);
    position: sticky;
    top: 0%;
    z-index: 3;
    overflow: hidden;
}


@media(min-width: 1100px){
    header{
        margin-bottom: 0px;
    }
}

#header-actions{
    width: auto;
}

#header-actions > div:first-child{
    display: none;
    transition: transform 0.1s ease-in-out;
    box-shadow: 5px 5px 5px grey;

}

#header-actions > div:first-child:hover{
    transform: scale(1.1);
}

@media(min-width: 1100px){
    #header-actions{
        width: 30vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 2px solid var(--border);
        
    }
    #header-actions > div:first-child{
        cursor: pointer;
        display: flex;
        color: var(--main-color);
        border-radius: 15px;
        background-image: linear-gradient(to top right, var(--main-alt-2), var(--main-alt-3));
        padding: 1vw;
        border: 2px solid var(--border);
        font-size: 2vw;
        animation: get_attention 0.25s;
        animation-iteration-count: 5;
        animation-delay: 10s;
    }
    #header-actions > div:first-child:active{
        filter: brightness(75%);
    }
}

@keyframes get_attention {
    0% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

#logo-container{
    margin-bottom: 0vh !important;
}

#logo-image{
    border: 2px solid var(--border);
    height: 20vw;
    width: 20vw;
    background-image: url("../media/pbf-logo-white-518x500-1\ \(1\).png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#logo-text-parent{
    margin-bottom: 0vh !important;
}

#logo-text-parent > *{
    max-width: none !important;
    align-self: flex-start;
    color: var(--dark-purple);
}

#logo-text-top{
    height: auto;
    width: auto;
    font-size: 6vw;
    border: 2px solid var(--border);
}

#logo-text-bttm{
    font-size: 6vw;
    border: 2px solid var(--border);
}

#desktop-slideshow{
    display: none;
}

@media(min-width: 1100px){
    #logo-text-parent{
        flex-direction: row !important;
    }
    #logo-text-parent a {
        font-size: 4vw;
    }
    #desktop-slideshow{
        display: flex;
    }
}

#hero-slideshow{
    position: relative;
    height: 90vh;
    width: 100%;
    z-index: 2;
}

.hero-image {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 90vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 1.5s ease-in-out;
    opacity: 0;
}

#hero-slideshow > div:nth-child(1){
    background-image: url('../../media/gallery-community-1.jpg');
}

#hero-slideshow > div:nth-child(2){
    background-image: url('../../media/gallery-community-4.jpg');
}

#hero-slideshow > div:nth-child(3){
    background-image: url('../../media/Photo\ Nov\ 20\,\ 2\ 17\ 34\ AM\ \(1\).jpg');

}

.show-hero-image{
    opacity: 1 !important;
}

header > *{
    max-height: 12vh;
    margin: 4vw;
}

#menu-container{
    border: 2px solid var(--border);
    height: auto;
    width: auto;
    max-width: 16vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#menu-button{
    background-color: var(--main-alt-1);
    cursor: pointer;
    border: 2px solid var(--border);
    height: 15vw;
    width: 15vw;
}

@media(min-width: 1100px){
    #menu-button{
        height: 6vw;
        width: 6vw;
    }
    #logo-text-top{
        font-size: 2vw;
    }
    #logo-text-bttm{
        font-size: 2vw;
    }
    #logo-image{
        height: 8vw;
        width: 8vw;
    }
    header > *{
        margin: 1vw;
    }
}

.media{
    background-position: center;
    border: 5px solid var(--media-outline) !important;
    border-radius: var(--media-border-radius) !important;
}

.stacked-media{
    margin-bottom: 2vh !important;
}

.content-parent{
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
    border: 2px solid var(--border);
    margin-bottom: 6vh;
}

.column-parent{
    flex-direction: column;
}

.column-parent > *{
    max-width: 75%;
    margin-bottom: 0vh;
}

.left-parent{
    justify-content: flex-start;
}

.left-parent > *{
    max-width: 55%;
}

.offset-child{
    box-shadow: 5px 10px 5px grey;
    border: 2px solid var(--border);
    border-radius: 60px;
    height: auto;
    width: auto;
    background-color: var(--main-alt);
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 3vh;
    padding-bottom: 3vh;

}

.right-offset-child{
    justify-content: flex-start;
    left: 20%;
    background-image: linear-gradient(to bottom right, var(--main-alt-3), var(--main-alt-2));
}

.left-offset-child{
    justify-content: flex-end;
    right: 20%;
    background-image: linear-gradient(to bottom left, var(--main-alt-2), var(--main-alt-3));
}

.offset-content-grandchild{
    border: 2px solid var(--border);
    height: var(--grandchild-media-dimensions);
    width: var(--grandchild-media-dimensions);
}

.left-offset-grandchild{
    margin-right: 40vw;
    margin-left: 5vw;
}

.right-offset-grandchild{
    margin-left: 40vw;
    margin-right: 5vw;
}

h1{
    text-align: center;
    border: 2px solid var(--border);
    margin-left: 5vw;
    font-size: 10vw;
    font-weight: 700;
    color: var(--dark-purple);
}

.h1-show{
    opacity: 1;
}

.home-header{
    text-align: left;
}

h2{
    border: 2px solid var(--border);
    font-size: 7vw;
    text-align: center;
    font-weight: 300;
    margin-top: 1vh;
    color: var(--dark-purple);
}

#gallery h2{
    color: var(--main-color);
}

.no-fade-in-text{
    opacity: 1 !important;
    transition: none !important;
}

.text-fade-in{
    opacity: 1;
}

h3{
    border: 2px solid var(--border);
    font-size: 6vw;
    font-weight: lighter;
}

@media(min-width: 1100px){
    h1{
        font-size: 4vw;
    }
    h2{
        font-size: 2.5vw;
    }
    h3{
        max-width: 45vw;
        font-size: 1.5vw;
    }
    .offset-content-grandchild{
        height: 35vw;
        width: 35vw;
    }
    .left-offset-grandchild{
        margin-right: 20vw;
        margin-left: 5vw;
    }
    
    .right-offset-grandchild{
        margin-left: 20vw;
        margin-right: 5vw;
    }
    .right-offset-child{
        justify-content: flex-start;
        left: 30%;
    }
    
    .left-offset-child{
        justify-content: flex-end;
        right: 30%;
    }
}

.about-title{
    margin-left: 0vw;
}

#options-container{
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    z-index: 4;
    position: fixed;
    left: -175%;
    top: 5%;
    height: 90vh;
    border: 2px solid var(--border);
    background-image: linear-gradient(to top, var(--main-alt-2), var(--main-alt-3));
    padding-top: 4vh;
    border-radius: 50px;
    transition: left 0.75s ease-in-out;
}

.show-menu{
    left: -25% !important;
}

#options-container *{
    font-size: 7vw;
}

.floating-container{
    border: 2px solid var(--border);
    width: auto;
    height: auto;
    margin-left: 40vw;
    margin-right: 20vw;
}

#actions{
    flex-direction: column;
    width: 100%;
    margin-top: 15vh;
}

.action-card{
    background-color: var(--main-alt-2);
    margin-bottom: 7.5vh;
    width: 50%;
    padding: 10%;
    font-size: 5vw;
    border-radius: 30px;
    transition: height 1s ease-in-out;
    color: var(--main-color);
}

.action-card-expanded{
    height: 30vw;
}

@media(min-width: 1100px){
    .action-card{
        color: inherit;
        font-size: 2vw;
        padding: 2%;
        transition: font-size 0.25s ease-in-out, width 0.25s ease-in-out, color 0.5s ease-in-out;
    }
    #actions > .action-card:hover{
        font-size: 4vw;
        width: 70%;
        color: var(--main-color);
        background-image: linear-gradient(to top, var(--main-alt-3), var(--main-alt-2));
    }
}

#programs{
    flex-direction: column;
}

#programs > *{
    margin-bottom: 4vh;
}

#programs > * > *{
    margin-bottom: 0vh;
    height: auto;
    width: auto !important;
}
#programs > * > * > *{
    max-width: 80vw !important;
}

.program-media{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 45vw;
    width: 80vw;
}

.program-title-container{
    border: 2px solid var(--border);
    height: auto !important;
    width: 100%;
    display: flex;
    align-items: center;
}

.program-title-container-right{
    justify-content: flex-end;
}
.program-title-container-left{
    justify-content: flex-start;
}

.program-title-container > p{
    overflow-x: hidden;
    font-size: 8vw;
    font-weight: 700;
    color: var(--main-color);
}

.program-action{
    cursor: pointer;
    transition: color .35s ease-in-out;
}

.program-action:hover{
    color: var(--main-color);
}

.program-action:active{
    filter: brightness(75%);
}

.action-card:active{
    filter: brightness(75%);
}

.program-action-bar{
    height: auto !important;
    width: 100%;
    border: 2px solid var(--border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.program-action-bar > div{
    background-color: var(--main-alt-2);
    border-radius: 10px;
    padding-left: 2vw;
    padding-right: 2vw;
}

.program-action-bar-left > div{
    margin-left: 1vw;
}
.program-action-bar-right > div{
    margin-right: 1vw;
}

.program-action-bar-right{
    justify-content: flex-end;
}
.program-action-bar-left{
    justify-content: flex-start;
}

.program-action-bar a{
    font-size: 6vw;
}

#contact-form{
    margin-bottom: 0vh;
}

#contact-form div{
    max-width: none;
    width: 100%;
}

#contact-form select{
    font-size: 5vw;
    width: 100%;
}

.input-label{
    font-size: 4vw;
    justify-content: flex-start;
}

.instruction-text-form{
    border: 2px solid var(--border);
    min-width: 80vw;
    font-size: 4vw;
    text-align: center;
    margin-bottom: 2vh;
}

#contact-form input{
    font-size: 6vw;
    width: 100%;
}

input{
    min-width: 100% !important;
    color: black !important;
    border-radius: var(--input-fields-border-radius);
}

#contact-form input, #contact-form select{
    padding: 1%;
}

select{
    cursor: pointer;
    border-radius: var(--input-fields-border-radius);
    min-width: 100% !important;
}

input:focus{
    outline: none;
    border: 6px solid var(--main-alt-2);
}

#contact-form form{
    min-width: 80vw;
}

#contact-form button{
    background-color: var(--main-alt-2);
}

#contact-form form > div{
    margin-bottom: 4vh;
    align-items: self-start;
}

#contact-form *{
    font-family: inherit;
    color: white;
}

textarea{
    color: black !important;
    min-width: 100% !important;
    border-radius: var(--input-fields-border-radius);
    font-size: 6vw;
}

textarea:focus{
    border: 6px solid var(--main-alt-2);
    outline: none;
}

select{
    color: black !important;
}

#submit-container{
    margin-top: 7vh;
    height: auto;
    width: 100%;
    margin-bottom: 0vh;
}

#submit-container > button{
    box-shadow: 5px 5px 5px purple;
    border-radius: 30px;
    font-size: 6vw;
    width: 100%;
}

@media(min-width: 1100px){
    #submit-container > button{
        border-radius: 20px;
    }
}

footer{
    position: relative;
    z-index: 3;
    background-color: var(--cyanish);
    padding-top: 3vh;
    padding-bottom: 10vh;
    margin-bottom: 0vh !important;
}

footer a{
    transition: transform .2s ease-in-out;
}

@media(min-width: 1100px){

    #socials-container a:hover{
        transform: scale(1.3);
    }
    footer a:hover{
        color: var(--main-alt-2);
    }
    
    footer p:hover{
        color: var(--main-alt-2);
    }
}


footer > *{
    justify-content: space-evenly !important;
    width: 90% !important;
    margin-top: var(--footer-elements-margin);
    margin-top: var(--footer-elements-margin);
}

footer > * > *{
    font-size: 5vw;
}

footer h4{
    font-size: 6vw;
}

button{
    border: 2px solid var(--border);
    cursor: pointer;
}

button:active{
    filter: brightness(75%);
}

#socials-container{
    margin-top: 5vh !important;
}

.social-icon{
    height: 12vw;
    width: 12vw;
    border: 2px solid var(--border);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#insta{
    background-image: url("../../icons/icons8-instagram-100.png");
}
#facebook{
    background-image: url("../../icons/icons8-facebook-logo-100.png");
}
#twitter{
    background-image: url("../../icons/icons8-x-logo-100.png");
}

@media(min-width: 1100px){
    footer > * > *{
        font-size: 2vw;
    }
    footer h4{
        font-size: 2.5vw;
    }
    .social-icon{
        height: 5vw;
        width: 5vw;
    }
    #options-container a{
        transition: font-size 0.25s ease-in-out;
    }
    #options-container *{
        font-size: 2vw;
    }
    #options-container a:hover{
        font-size: 4vw;
        color: var(--main-color);
    }
    .floating-container{
        margin-left: 20vw;
        margin-right: 10vw;
    }
    .program-media{
        height: 20vw;
        width: 35vw;
    }
    .program-title-container > p{
        max-width: 35vw;
        font-size: 4vw;
    }
    .program-action-bar a{
        font-size: 2vw;
    }
}

.more-info * {
    color: var(--main-color);
}

.more-info > div{
    margin-left: 50vw;
    margin-bottom: 3vh;
}

.more-info > div > div{
    margin-right: 10vw;
}

.more-info > div > div:first-child{
    padding: 2%;
    border: 5px solid var(--main-color);
    border-radius: 20px;
}

.more-info div{
    max-width: none !important;
}

.icon-more-info{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 20vw;
    width: 20vw;
    border: 2px solid var(--border);
}

#email-icon{
    background-image: url('../../icons/icons8-mail-100.png');
}

#socials-icon{
    background-image: url('../../icons/icons8-social-100.png');
}

.heading-text-more-info{
    text-align: center;
    min-height: 20vw;
    height: auto;
    width: 40vw;
    border: 2px solid var(--border);
    font-size: 5vw;
    margin-bottom: 0% !important;

}

.toggle-control{
    height: var(--toggle-dimensions);
    width: var(--toggle-dimensions);
    transform: rotate(0deg);
    transition: 
        transform var(--toggle-transform-speed) ease-in-out; 
    background-image: url("../../icons/icons8-back-100.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 35px;
}

@media(min-width: 1100px){
    .toggle-control{
        border-radius: 5px;
    }
}

.subtext-more-info{
    text-align: center;
    height: 0vh;
    font-size: 5vw;
    border: 2px solid var(--border);
    overflow: hidden;
    transition: height 0.5s ease-in-out;
}

.show-subtext-more-info{
    height: auto !important;
}

@media(min-width: 1100px){
    .icon-more-info{
        height: 5vw;
        width: 5vw;
    }
    .heading-text-more-info{
        min-height: 0vh;
        width: 30vw;
        font-size: 1.5vw;
    }
    .toggle-control{
        cursor: pointer;
        height: 2.5vw;
        width: 2.5vw;
    }
    .more-info > div > div{
        margin-right: 2.5vw;
    }
    .subtext-more-info{
        max-width: 15.5vw !important;
        font-size: 1.5vw;
    }
    .more-info > div{
        margin-left: 50vw;
    }
}

#sponsors{
    max-height: 40vh;
    overflow-y: scroll;
    overflow-x: hidden;
    align-items: flex-start;
}

#sponsors div{
    max-width: none;
}

#sponsors > div{
    margin-bottom: 0vh !important;
}

#sponsors > div > div{
    margin-bottom: 3vh;
}

.sponsor{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 40vw;
    width: 70vw;
    border: 5px solid var(--main-color);
    border-radius: 20px;

}

@media(min-width: 1100px){
    #sponsors{
        max-height: 60vh;
    }
    .sponsor{
        height: 20vw;
        width: 30vw;
    }
}

.portrait-media{
    height: 80vw;
    width: 65vw;
    border: 2px solid var(--border);
}

.subtext-about-founder{
    border-radius: 10px;
    overflow: hidden;
    font-size: 6vw;
    font-weight: lighter;
    border: 2px solid var(--border);
    transition: height 0.5s ease-in-out;
    color: var(--main-color);
}

@media(min-width: 1100px){
    .subtext-about-founder{
        width: 35vw;
        font-size: 2vw;
    }
    .portrait-media{
        height: 40vw;
        width: 35vw;        
    }
}

.collapsed{
    height: 0px;
}

#about-founder > div > div{
    max-width: none;
}

#about-founder h2{
    color: var(--main-color) !important;
    font-weight: normal;
    white-space: nowrap;
}

.toggle-control-founder{
    border: 2px solid var(--border);
    height: var(--toggle-dimensions);
    width: var(--toggle-dimensions);
    transform: rotate(0deg);
    transition: transform var(--toggle-transform-speed) ease-in-out;
    background-image: url("../../icons/icons8-back-100.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@media(min-width: 1100px){
    .toggle-control-founder{
        height: 4vw;
        width: 4vw;
        cursor: pointer;
    }
}

.toggle-show{
    transform: rotate(-90deg) !important;
}

.toggle-show2{
    transform: rotate(270deg) !important;
}

.unrestricted-column div{
    max-width: none;
}

.unrestricted-column > div{
    margin-bottom: 4vh;
}

.unrestricted-column > div > div{
    height: auto;
    width: auto;
}

.text-only{
    width: 70vw;
}

#legal h2{
    max-width: 90%;
    font-size: 4vw;
}

.boundary{
    height: 0px;
    width: 100vw;
    border: 2px solid red;
    position: fixed;
    top: 50%;
}

@media(min-width: 1100px){
    .text-only{
        width: 35vw;
    }
    #contact-form form{
        min-width: 40vw;
    }
    #legal h2{
        font-size: 1vw;
    }
    .instruction-text-form{
        min-width: 0vw;;
        max-width: 40vw !important;
        font-size: 2vw !important;
    }
    .input-label{
        font-size: 2vw;
    }
    input{
        font-size: 2vw !important;
    }
    select{
        font-size: 2vw !important;
    }
    textarea{
        font-size: 2vw !important;
    }
    #submit-container > button{
        font-size: 3vw;
    }
    #submit-container > button:hover{
        color: var(--main-alt-2);
        background-color: var(--main-color);
    }
}

#notification-modal{
    padding: 3%;
    padding-bottom: 4vh;
    border-radius: 30px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--main-color);
    transition: opacity 1s ease-in-out;
    z-index: 3;
}

#notification-modal > *{
    max-width: none;
    width: 70vw;
}

#notification-modal > h1{
    margin-left: 0px;
}

#notification-modal > button{
    border-radius: 30px;
    background-color: var(--main-alt-2);
    margin-top: 2vh;
    font-size: 10vw;
    color: var(--main-color);
}

@media(min-width: 1100px){
    #notification-modal > *{
        width: 50vw;
    }
    #notification-modal > button{
        cursor: pointer;
        font-size: 4vw;
    }
    #notification-modal > button:hover{
        background-color: var(--main-color);
        color: var(--main-alt-2);
    }
}

#backdrop{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out;
    z-index: 2;
}

.show-backdrop{
    opacity: 0.5 !important;
    visibility: visible !important;
}

.show-notification{
    opacity: 1 !important;
    visibility: visible !important;
}

#home-slideshow > div > div:first-child{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../../media/Photo\ Nov\ 20\,\ 2\ 17\ 34\ AM\ \(1\).jpg');
}


#programs > div:nth-child(1) > div:first-child > div:first-child{
    background-image: url('../../media/gallery-feeding-1.jpg');
}

#programs > div:nth-child(2) > div:first-child > div:first-child{
    background-image: url('../../media/encouragment.jpg');
}

#welcome > div > div:first-child{
    background-image: url('../../media/welcome-2.jpg');
}


.sponsor:nth-child(1){
    background-image: url('../../media/sponsor-shaq.png');
}

.sponsor:nth-child(2){
    background-image: url('../../media/sponsor-all-in-one.png');
}

.sponsor:nth-child(3){
    background-image: url('../../media/sponsor-freebeat.png');
}

.sponsor:nth-child(4){
    background-image: url('../../media/sponsor-la-care.JPG');
}


#tuesday-feeding-image{
    background-image: url('../../media/tuesday-feeding.JPG');
}

#encouragment-image{
    background-image: url('../../media/serve-a-soul.jpg');
}

#creative-wonderland-image{
    background-image: url('../../media/encouragment.jpg');
}


#donations > div:nth-child(1) > div:first-child > div:first-child{
    background-image: url('../../media/PBF\ Vector.png');
    background-size: contain;
    background-color: var(--main-color);
}

#donations > div > div:first-child{
    margin-bottom: 0vh;
}


@media(min-width: 1100px){
    #desktop-auxilary{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #desktop-auxilary > div:nth-child(1){
        position: relative;
        left: 30%;
    }
    #desktop-auxilary > div:nth-child(2){
        position: relative;
        left: -60%;
    }
}

.menu-icons{
    height: 7vw;
    width: 7vw;
}

#options-container a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 40vw;
    height: auto;
}

@media(min-width: 1100px){
    .show-menu{
        left: -15% !important;
    }
    .menu-icons{
        height: 3vw;
        width: 3vw;
    }
    #options-container a {
        width: 20vw;
    }
}

.selected-page-highlight{
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 20px;
    color: var(--main-color);
    background-color: rgb(224, 92, 202);
}

.selected-page-highlight img{
    filter: brightness(0) invert(1);
}

.offset-child h1, h3{
    color: var(--main-color);
}

.offset-child h3{
    width: 80vw;
}

#about-founder > div > div {
    width: 65vw;
}

@media(min-width: 1100px){
    .offset-child h3{
        font-size: 2.5vw;
    }
    #about-founder > div > div {
        width: 35vw;
    }
}

#about-founder .portrait-media {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../../media/Pierre\ image\ circle.png');
}

#about-founder div{
    color: var(--main-color);
}

#about-founder h2{
    margin: 0px;
}

#about-founder h1{
    color: var(--main-color) !important;
}

#about-founder > div > div:nth-child(2){
    justify-content: space-between;
}


#gallery > div > div{
    margin-bottom: 0vh;
}

#gallery > div:nth-child(1) > div:first-child > div:nth-child(2){
    background-image: url('../../media/gallery-baseball-1.jpg');

}
#gallery > div:nth-child(1) > div:first-child > div:nth-child(3){
    background-image: url('../../media/gallery-baseball-2.jpg');

}
#gallery > div:nth-child(1) > div:first-child > div:nth-child(4){
    background-image: url('../../media/gallery-baseball-3.jpg');
    
}
#gallery > div:nth-child(1) > div:first-child > div:nth-child(5){
    background-image: url('../../media/gallery-baseball-4.jpg');
    
}

#gallery > div:nth-child(2) > div:first-child > div:nth-child(2){
    background-image: url('../../media/gallery-feeding-1.jpg');
}
#gallery > div:nth-child(2) > div:first-child > div:nth-child(3){
    background-image: url('../../media/gallery-feeding-2.jpg');
}
#gallery > div:nth-child(2) > div:first-child > div:nth-child(4){
    background-image: url('../../media/gallery-feeding-3.jpg');
}

#gallery > div:nth-child(3) > div:first-child > div:nth-child(2){
    background-image: url('../../media/gallery-community-1.jpg');
}
#gallery > div:nth-child(3) > div:first-child > div:nth-child(3){
    background-image: url('../../media/gallery-community-2.jpg');
}
#gallery > div:nth-child(3) > div:first-child > div:nth-child(4){
    background-image: url('../../media/a-creative-wonderland.jpg');
}
#gallery > div:nth-child(3) > div:first-child > div:nth-child(5){
    background-image: url('../../media/gallery-community-4.jpg');
}

.event{
    padding: 3%;
    background-image: linear-gradient(to top left, rgb(207, 23, 176), rgb(127, 108, 222));
    border-radius: 30px;
}

.event .content-parent{
    margin-bottom: 0vh;
}

.event div {
    border: 2px solid var(--border);
}

#events{
    margin-right: 30vw;
    margin-left: 5vw;
}

.event > div:first-child > div:nth-child(2){
    font-size: 10vw;
    color: var(--main-color);
}

.date-container > div:first-child{
    font-size: 8vw;
    text-decoration: underline;
    color: var(--main-color);
}

.event > div:first-child > div:first-child{
    transform: rotate(180deg);
    transition: transform 0.5s ease-in-out;
}

.event-data{
    transition: max-height 0.5s ease-in-out;
    overflow-y: hidden;
    height: auto;
    max-height: 0vh;
}

.event-data-open{
    max-height: 50vh !important;
}

.event-data > div:first-child, .event-data > div:nth-child(2){
    font-size: 7vw;
    text-align: center;
    color: var(--main-color);
}

.dates > div{
    padding: 3%;
    background-color: var(--main-alt-2);
    border: 5px solid var(--main-alt-2);
    border-radius: 1.75vh;
    font-size: 5vw;
    text-align: center;
    color: var(--main-color);
}

.dates{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
    height: auto;
    transition: max-height 0.5s ease-in-out;
    max-height: 0vh;
    gap: 50px;
}

.dates > div:first-child{
    margin-top: 3vh;
}

.dates-open{
    max-height: 55vh !important;
}

.event > div:first-child > div:first-child, .date-container > div:nth-child(2){
    height: 10vw;
    width: 10vw;
    transition: transform 0.5s ease-in-out;
    cursor: pointer;
    border-radius: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../../icons/icons8-back-100.png");
}

@media(min-width: 1100px){
    .dates > div{
        transition: 
            background-color 0.25s ease-in-out, 
            border 0.25s ease-in-out,
            color 0.25s ease-in-out;
        cursor: pointer;
    }
    .dates > div:hover{
        color: var(--main-alt-2);
        background-color: var(--main-color);
        border: 5px solid var(--main-color);
    }
    .event-data{
        overflow-y: hidden;
        width: auto;
        transition: max-width 0.5s ease-in-out;
        max-width: 0vw;
    }

    .event-data-open{
        max-width: 50vw !important;
    }

    .event, .event-data{
        gap: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }
    .event div {
        gap: 20px;
        margin-bottom: 0vh;
    }
    #events{
        margin-right: ;
        margin-left: ;
    }
    .event > div:first-child > div:nth-child(2){
        width: 100%;
        font-size: 2vw;
    }
    .date-container > div:first-child{
        font-size: 2vw;
    }
    .event-data > div:first-child, .event-data > div:nth-child(2){
        margin-top: 10px;
        font-size: 1.5vw;
    }
    .dates > div{
        gap: 10px;
        font-size: 1.5vw;
        text-align: start;
    }
    .event > div:first-child > div:first-child, .date-container > div:nth-child(2){
        height: 4vw;
        width: 4vw;
        border-radius: 10px;
    }
}

#slideshow-backdrop{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main-color);
    font-size: 5vw;
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 25vh;
    background-image: linear-gradient(to top left, rgba(0, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

#quick-action{
    position: fixed;
    bottom: 10%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    left: 5%;
    height: 20vw;
    width: 20vw;
    background-color: var(--cyanish);
    border-radius: 50%;
    opacity: 0.5;
    z-index: 1;
    background-image: url("../../icons/icons8-caring-100.png");
}

@media(min-width: 1100px){
    #quick-action{
        cursor: pointer;
        height: 7.5vw;
        width: 7.5vw;
        transition: transform 0.1s ease-in-out;
    }
    #quick-action:hover{
        transform: scale(1.1);
        opacity: 1;
    }
}

#page-load{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: top 0.35s ease-out;
}

.page-loaded{
    top: -100% !important;
}
.page-loaded-image{
    opacity: 0;
}

#page-load > div:first-child{
    transition: opacity 1s ease-in-out;
    height: 70vw;
    width: 70vw;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../../media/PBF\ Vector.png");
}

@media(min-width: 1100px){
    #page-load > div:first-child{
        height: 25vw;
        width: 25vw;
    }
}