/*Latiesha's personal project orphic CHARACTERS*/
html{
    background-color: #241A28;
}

header{
    background-image: url("../images/charBanner.png");
    background-color: #403742;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 570px;/*You must set a specified height*/
    width: 100%;
}



/*ALL TITLES*/
    .Title{
        color : #ffffffb7;
        font-size: 10.8em;
    }

    .Title2{
        color : #BFBFBF;
        font-size: 4.5em;
        padding: none;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        margin:0%;
    }

    .Title2 p{
        padding-top: 5rem;
        margin:0%;
    }

    .infoTitle p{
        color : #130D15;
        text-decoration: none;
        font-size: 1.1em;
        padding: 0.5rem;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 800;
        font-style: normal;
        margin:0%;
    }
/*ALL TITLES*/



/*SUB TITLES*/
    .subTitle{
        color : #BFBFBF;
        text-decoration : none;
        font-size: 1em;
        padding: 3.2rem 0rem 0rem 0rem;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        margin:0%;
    }

    .subTitle ul, .subli{
        padding: 0rem 0rem 0rem 1.5rem;
        display : flex;
        flex-direction: row;
        flex-wrap: nowrap;
        list-style-type: none;
        float: left;
    }

    .subTitle ul li a{
        font-weight: 650;
        padding: 0.1rem;
        color: #130D15;
        background-color: #BFBFBF;
        filter: drop-shadow(5px 5px 0px #130D15);
    }
/*SUB TITLES*/

/*LIST*/
    .infoindex h3{
        padding: 0rem 1.5rem;
        font-weight: 650;
        color: #BFBFBF;
        font-size: 1.3em;
        font-family: "Plus Jakarta Sans", sans-serif;
    }
    .upList{
        list-style-type: upper-roman;
        font-weight: 650;
        color: #BFBFBF;
        font-size: 0.9em;
        font-family: "Plus Jakarta Sans", sans-serif;
    }

    .downList{
        list-style-type: lower-roman;
        font-weight: 400;
        color: #BFBFBF;
        font-size: 0.9em;
        font-family: "Plus Jakarta Sans", sans-serif;
    }

    .infoindex{
        background-color: #241A28;
        border-color: #130D15;
        border: solid;
        width: 30em;
        height: 25em;
        margin: 0rem 0rem 2rem 0rem;
    }
/*LIST*/



/*TEXT*/
    .leftSec p{
        padding: 0.2rem;
    }
    
    .infoText{
        font-weight: 650;
        padding: 0.1rem;
        color: #BFBFBF;
        font-size: 1em;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 500;
    }
/*TEXT*/



/*TABLE*/
    .leftSec table{
        width: 7rem;
        background-color: #403742;
        font-size: 1.1em;
        font-weight: 550;
    }

    .leftSec table, th, td {
        border: 1px solid #241A28;
    }
/*TABLE*/



/*ALL SECTIONS*/ 
    .secondSection{
        background-image: url("../images/charBg.png");
        height: 770px;
    }  

    .thirdSection{
        background-color: #241A28;
    }  
/*ALL SECTIONS*/ 



/*ALL SECTION 2*/ 
    .rightSec{
        width: 20rem;
        padding: 0px;
        margin: 0rem 14rem 0rem 0rem;
        /*background-color: aliceblue;*/
    }

    .leftSec{
        
        background-color: aqua;
        width: 50%;
        color : #BFBFBF;
        background-color: transparent;
        text-decoration : none;
        font-size: 1.1em;
        padding: 0rem 0rem 0rem 2.8rem;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        margin:0%;
    }

    .thirdSection{
        padding: 6rem 3rem 0rem 2.8rem;
    }
/*ALL SECTION 2*/ 



/*ALL SECTION 3*/ 
    .info{
        background-color: #403742;
        float: right;
        width: 55em;
        height: auto;
        padding: 1em;
    }

    .info h1{
        color : #130D15;
        font-size: 2em;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
    }

    .infoTitle{
        width:fit-content;
        background-color: #BFBFBF;
        box-shadow: 10px 10px #130D15;
    }
/*ALL SECTION 3*/ 



/*GALLERY1*/
    .photoRow{
        float: left;
        width: 60%;
    }

    /* Three image containers (use 25% for four, and 50% for two, etc) */
    .photoRow div {
        float: left;
        width: 33.33%;
    }

    .photoRow div img{
        width: 95%;
    }

    .photoRow div img:hover{
        transform: scale(90%);
        filter: brightness(50%)
    }

    /* Clear floats after image containers */
    .row::after {
        content: "";
        clear: both;
        display: table;
    }
/*GALLERY1*/



/*GALLERY2*/
    .photoRow2{
        float: left;
        width: 20%;
    }

    /* Three image containers (use 25% for four, and 50% for two, etc) */
    .photoRow2 div{
        float: left;
        width: 100%;
        padding-bottom: 2.5em;
    }

    .photoRow2 div img{
        width: 100%;
    }
/*GALLERY2*/