@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
    --DarkestBlue:#1F2546;
    --DarkBlue:#3A3F83;
    --BerryBlue:#4857AC;
    --LightBlue:#90A3D0;
    --DarkestGrey:#252525;
    --DarkGrey:#595857;
    --MiddleGrey:#908182;
    --LightGrey:#ECEAE5;
    --PastelPink:#ee8b70;
    --PastelPink2:#FFA78F;
    --RaspberryPink:#FF5965;
    --KalinkaPink:rgb(189, 47, 56)5;
    --white:#ffff;

    --testA:purple;


    --SocialButtonSize:86px;
    --IconSize:50px;

    --H1Size: 70px;
    --H2Size: 60px;
    --H3Size: 50px;
    --H4Size: 40px;
    --H5Size: 30px;
    --H6Size: 18px;
    --BodyBig:24px;
    --BodyText:20px;
    /* --TextHover:21px; */

    --SmallText:18px;
    --SmallerText:18px;

}


*{
    margin: 0;
    
    font-family: roboto;
    font-size: var(--BodyText);
}

.center{
    /* background-color: var(--testA); */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;

    margin: 0 1.5em;
    

}

.left{
    /* background-color: var(--testA); */

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1em;

    margin: 0 3em;

}


/* Body & Tittles */

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;

}

p{
    color: var(--DarkestGrey);
    font-size: var(--BodyText);
}

.p-big{
    color: var(--DarkGrey);
    font-size: var(--BodyBig);
    margin-bottom: 0.5em;
}

.p-small{
    color: var(--LightGrey);
    font-size: var(--SmallText);
}

h1 {
    font-family: roboto;

    font-size: var(--H1Size);
    font-weight: 300;
    color: var(--DarkBlue);


}

.h1-pink {
    font-family: roboto;

    font-size: var(--H1Size);
    font-weight: 300;
    color: var(--RaspberryPink);


}

h2{
    font-family: roboto;

    font-size: var(--H2Size);
    font-weight: 400;
    color: var(--DarkBlue);

}

h3{
    font-family: roboto;

    font-size: var(--H3Size);
    font-weight: 600;
    color: var(--BerryBlue);
    text-transform: uppercase;

}

h4{
    font-family: roboto;

    font-size: var(--H4Size);
    font-weight: 600;
    color: var(--RaspberryPink);
    text-transform: uppercase;

}

h5{
    font-family: roboto;

    font-size: var(--H5Size);
    font-weight: 600;
    color: var(--BerryBlue);
    text-transform: uppercase;

}

h6{
    font-family: roboto;

    font-size: var(--H6Size);
    font-weight: 400;
    color: var(--white);
    text-transform: uppercase;

}

a{
    text-decoration: none;
}



/* Buttons */
.red-button{
    background-color: var(--RaspberryPink);
    border: none;

    height: auto;
    padding: 0.5em 1em;
    

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1em;

    color: var(--white);
    font-weight: 400;

}

.red-button:hover{
    font-size: var(--TextHover);
    
    transition: 0.2s;

    cursor: pointer;


}

.blue-button{
    background-color: var(--BerryBlue);
    border: none;

    height: auto;
    padding: 0.5em 1em;
    

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1em;

    color: var(--white);
    font-weight: 400;

}

.blue-button:hover{
    background-color: var(--DarkestBlue);    
    transition: 0.2s;

    cursor: pointer;


}

.outline-button{
    background-color: var(--white);
    border-color: var(--RaspberryPink);
    border-style: solid;

    height: auto;
    padding: 0.5em;

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1em;

    color: var(--RaspberryPink);
    font-weight: 500;
    

}

.outline-button:hover{
    font-size: var(--TextHover);

    transition: 0.2s;

    cursor: pointer;

}

.terms-of-service{
    background-color: none;
    border-style: none;

    color: var(--MiddleGrey);
    text-decoration: none;
    font-size: var(--SmallText);

}


.icon-button{
    background-color: var(--BerryBlue);
    border: none;
    border-radius: 50%;

    height: 3em;
    width: 3em;

    display: flex;
    align-items: center;
    justify-content: center;
    
}

.icon-button:hover{
    background-color: var(--RaspberryPink);

    transition: 0.2s;

    cursor: pointer;

}

#link-buttons{
    background-color: none;
    width: 100%;
}


.icon-button-big{
    background-color: var(--BerryBlue);
    border: none;
    border-radius: 50px;

    color: white;
    font-size: 100%;

    height: 3em;
    width: 100%;
    padding: 0 20%;

    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
    
}

.icon-button-big:hover{
    background-color: var(--RaspberryPink);

    transition: 0.2s;

    cursor: pointer;

}

.icon-button-big-pink{
    background-color: var(--PastelPink);
    border: none;
    border-radius: 50px;

    color: white;
    font-size: 100%;

    height: 3em;
    width: 100%;
    padding: 0 20%;

    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
    
}

.icon-button-big-pink:hover{
    background-color: var(--PastelPink2);

    transition: 0.2s;

    cursor: pointer;

}

.icon-button-lightblue{
    background-color: var(--LightBlue);
    border: none;
    border-radius: 50%;

    color: #4857AC;

    height: 2.2em;
    width: 2.2em;

    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button-lightblue:hover{
    background-color: var(--PastelPink);

    transition: 0.2s;

    cursor: pointer;

}

.icon{
    height: 65%;

}


.learn-more{
    color: var(--LightGrey);
    text-decoration: none;
    font-size: var(--SmallText);

}


.line {
    border-bottom: 3px solid var(--LightBlue);
    margin-top: 5px;
    width: 70%;
}


/* Announcements */
#announcement{
    background-color: var(--RaspberryPink);
    width: 100%;
    height: auto;

    padding: 0.3em 0;


}

#announcement p{
    color: var(--white);

    font-size: var(--SmallerText);

}

#announcement a{
    color: var(--white);

    border-bottom: 2px solid var(--white);
    padding-bottom: 1px;

    font-size: var(--SmallerText);

}

#announcement strong{

    font-size: var(--SmallerText);

}



/* Header */
#header-col-logo{
    max-width: 45%;
    display: block;
}

#header-ver-logo{
    max-width: 50%;
    display: none;
}

nav{

    width: 90%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;

    

}

.nav-options{
    color: var(--PastelPink);

}

.nav-options:hover{
    color: var(--RaspberryPink);
    font-weight: 500;

}




nav::after{
    content: '';

    height: 2px;
    width: 100%;
    
    background-color: var(--PastelPink);
    border-radius: 50px;

    display: block;
}



/* FOOTER */

footer{
    background-color: var(--BerryBlue);
    width: 100%;
    height: auto;
    padding: 1em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 0.5em;


}


#footer-bwlogo{
    height: 3em;
}

footer p{
    color: var(--white);
    font-size: var(--SmallText);
}

.footer-info-holder{
    display: flex;
    flex-direction: row;
}

.footer-icons{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5em;

    margin-bottom: 0.5em;

}

.footer-icons p{
    font-size: 0px;
}


.p-small{
    font-size: 14px;
}

.p-small::before{
    content: '';

    height: 2px;
    width: 100%;
    
    background-color: var(--LightBlue);
    border-radius: 50px;

    display: block;
    align-items: center;

    margin-bottom: 0.5em;
    
}


.footer-tos{
    color: var(--white);
    font-size: var(--SmallerText);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;

    flex-wrap: wrap;
}

.foot-email{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.footer-icons{
    gap: 1em;
}



/* TOS */
.left b{
    color: var(--RaspberryPink);

}

.left a{
    color: var(--PastelPink);

    border-bottom: 3px solid var(--PastelPink);
    padding-bottom: 1px;


}





/* Galleries */

.gallery{
    /* background-color: var(--testA); */

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5em;

    margin: 0em;
    

}

.gall-img-holder{
    width: 48%;


    display: none;
}

.gall-img-holder:hover{
    opacity: .9;

}

.gall-img-holder img{
    width: 100%;
    border-radius: 10px;


    display: block;
}

#load-9{
    display: none;
}

#load-15{
    display: none;
}

#load-21{
    display: none;
}



/* Personal Gallery */

.gall-img-holder-per{
    width: 48%;
    border-radius: 10px;

    display: none;

}

.gall-img-holder-per:hover{
    opacity: 0.9;

}

#load-9-per{
    display: none;
}

#load-15-per{
    display: none;
}





/* Personal Gallery PopUp */

/* #PopUp{
    display: none;
} */



.gallery-popup{
    position: fixed;
    top: 0; left: 0;
    z-index: 100;
    background: rgb(255, 255, 255, .6);
    backdrop-filter: blur(3px);

    height: 100%;
    width: 100%;

    display: none;

}


.gallery-popup img{
    width: 750px;

    position: absolute;
    top: 50%; left: 50%;

    transform: translate(-50%, -50%);
    object-fit: cover;
    border-radius: 20px;
    
}

.span-popup{
    position: absolute;
    top: 5px; right: 20px;
    font-size: var(--H1Size);
    color: var(--BerryBlue);
    z-index: 100;
    cursor: pointer;
}




/* Contact Page */
.about-head{
    width: 100%;
    padding-bottom: 1em;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 1em;

    /* margin-bottom: 1em; */
}


#about-pfp{
    margin-top: 1em;
    width: 9em;
    height: 9em;
    background-color: #4857AC;
    border-radius: 20px;

    background-image: url(../Images/gallery-resources/AutumnScott.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}


#about-pfp img{
    width: 90%;
}

.about-contact{
    margin-bottom: 1em;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: 100%;

    gap: 1em;
}

.about-contact p{
    text-align: center;
}

.about-contact b{
    color: var(--RaspberryPink);
    font-weight: 400;
}

.about-contact i{
    color: var(--BerryBlue);
}







/* Media Queries */

@media only screen and (max-width: 769px) {

    /* Root Media Queries */
    :root{
        --SocialButtonSize:86px;
        --IconSize:50px;
    
        --H1Size: 50px;
        --H2Size: 30px;
        --H3Size: 30px;
        --H4Size: 25px;
        --H5Size: 20px;
        --BodyText:16px;
        --TextHover:22px;
    
        --SmallText:18px;
        --SmallerText:18px;

        --img-box-hover-width: 350px;
        --img-box-label-width: 280px;
    
    }


    /* General Media Queries */
    .left{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    h1, h2, h3, h4, h5, h6, p{
        text-align: center;
    }


    /* Header */

    #header-col-logo{
        max-width: 50%;
        display: none;
    }
    
    #header-ver-logo{
        max-width: 40%;
        display: block;
    }



    /* Carroussel Media Queries */
    .img-box h3{
        position: absolute;
        left: 35%;
        bottom: 30px;
    
        font-size: var(--H5Size);
        text-shadow: 0px 4px 4px var(--DarkBlue);
    
        writing-mode: vertical-lr;
    
        opacity: 1;
    
        transition: opacity 0.2s;
    }

    .comm-expand{
        display: none;
    }
    


    /* Commmission Card Media Queries */
    #web-comm-card{
        display: none;

    }

    .com-label{
        width: 100%;
        max-height: auto;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        margin-bottom: 0.5em;
    
    }

    .exmp-text{
        margin: 0.5em;
        display: flex;
        align-items: center;
        justify-content: center;


    }


    .exmp-text-tit{
        width: 100%;
    
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .exmp-text-tit h3, h4{
        text-align: center;
    }

    .exmp-com{
        height: 50%;
        width: auto;    
        border-radius: 35px 0 0 35px;
    
        background-image: url(../Images/gallery-resources/AlBday.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
    }


    /* Gallery Media Queries */


    .gall-img-holder{
        width: 100%;
    
        display: none;
    }


    .gall-img-holder-per{
        width: 100%;
    
        display: none;
    }



    .about-head{
        width: 100%;
    
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }


    /* Personal Gallery PopUp Queries */

    .gallery-popup img{
        width: 95%;
    }

}



@media only screen and (min-width: 769px) {
    #mob-comm-card{
        display: none;
    }

}

/* display nons */
#nav-about-me{
    display: none;
}