.codeblock {
    font-family: space mono;
    color: #eeeeee; 
    opacity: 50%;
}

.mainText {
    font-family: poppins;
    font-weight: 600;

}

.indented {
    margin: 0 50px 0 50px;
}



.card {
    /* width: 300px; */
    max-width: 500px;

    max-height: 700px;
    

    display: flex;
    flex-direction: column;
    /* place-items: center; */


    padding: 10px;

    border: solid 4px #eeeeee;
    border-radius: 2px;
    

    /*background-color: #eeeeee;*/


    box-shadow: -10px 10px #ee6f57 ;
    transition: all 100ms;


}

.card:hover {
    transition: all 100ms;
    box-shadow: -15px 15px #ee6f57 ;

}

.card  > img {
    width: 100%;
    max-width: 100%;
    /* max-height: 200px; */
    overflow: hidden;
    object-fit:cover;
    box-shadow: 0 0 0 2px #eeeeee;
    

}

.card > div:nth-child(2) {
    display: flex;
    justify-content:flex-start ;
    flex-direction: column;
    /*
    background-color: #ffffff;
    border-radius:10px;
    padding: 10px;
    width:100%;
    margin: 5px;
    */
    margin: 30px 0 20px 15px;
}

.card > div:nth-child(2) > span {
    font-family: poppins;
    font-size: 12pt;
    font-weight: 700;

    color: #eeeeee;

}

.card > div:nth-child(2) > p {
    font-family: nunito sans;
    font-size: 7pt;
    text-align: justify;
    max-width: 75% ;
    color: #eeeeee;

    white-space: normal ;
}

.card > div:nth-child(2) > a {
    width: max-content;


    text-align: left;
    color: #ee6f57;
    border-radius: 2px;
    padding: 5px;

    margin: 0px 0px 0px 0px;

    font-family: nunito sans;
    font-weight: bold;
    text-decoration:none;
}

.card > div:nth-child(2) > a:hover {
    transition: all 0.2s;
    color: #000000;
   
    background-color: #ee6f57;
}




body {
    padding: 0;
    margin: 0;

    background-color: #1F2438;
}

#name {
    background-image: url('assets/grid_bg.svg');
    backdrop-filter: opacity(10%);

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

    background-color: #1e3163;

    min-height: 500px;
    height: 80vh;
    width: 100%;
}

#name > div > div > #thename {
    font-family: poppins;
    font-weight: 600;
    font-size: 40pt;
    color: #eeeeee;

    z-index: 1;
}

#name > div > p {
    font-family: space mono;
    color: #fbe5e8;
    text-align: center;
    
}

#name > svg {
    /* rotate: -150deg; */
    position: fixed;
    max-width: 500px;
    /* width:500px; */
}

#name > #transitionGrad {/** Created with https://www.css-gradient.com* Gradient link: https://www.css-gradient.com/?c1=1f336500&c2=1e3264&gt=l&gd=dcl*/
    background: #1F336500;
    background: linear-gradient(0deg, #1F2438, #1E326400); 
    
    height: 150px; 
    width: 100%; 
    
    position: fixed;
    bottom: 0;



}


#aboutME {
    margin: 50px 50px 50px 50px;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    place-items: center;
}

#aboutME > div {
    max-width: 850px;
}

#aboutME > div > div > #abmetl{
    font-family: poppins; font-weight:600;
    color: #EB455F;
}

#aboutME > div > div > span:nth-child(2) {
    font-size: 10pt;
    
}

#aboutME > div > p {
    font-family: nunito sans;
    text-align: justify;
    padding: 0 50px 0 50px;

    

    color: #eeeeee;
}

#aboutME > p {
    font-family: nunito sans;
    text-align: justify;
    padding: 0 30px 0 30px;

    color: #eeeeee;
}








#codeProjects {
    margin: 50px 25px 200px 25px;
}

#codeProjects > div > span:nth-child(1),#codeProjects > div > span:nth-child(3) {
    font-size: 16pt;
}

#codeProjects > div > #mypjtl {
    font-family: poppins; font-weight:600;
    color: #EB455F;
}


#projects {
    display: grid;
    grid-auto-columns:auto;
    grid-auto-rows: auto;
    grid-row-gap: 50px;
    grid-column-gap: 50px ;
    
}







#creative_works {
    margin: 50px 25px 50px 25px;
}

#creative_works > div > span#crvwrktl {
    font-family: poppins; font-weight:600; 
    /* font-size: 50pt; */
    color: #EB455F;
}




#gallerytl {
    font-family: poppins; font-weight:600; 
    /* font-size: 25pt; */
    color: #EB455F;
}

#galleryWrap {
    display: flex;
    justify-content: center;
}

#photoGallery {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    max-width: 80vw;

    grid-column-gap: 40px ;
    grid-row-gap: 40px ;


    justify-content: center;

}

#galleryLeft {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    row-gap: 20px;

    height: 100%;
}

#galleryCenter {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    row-gap: 20px;


    height: 100%;

}

#galleryRight {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    row-gap: 20px;

    height: 100%;

}

.galleryItem {
    border: 2px solid #eeeeee;
    background-color: #1F2438;
    border-radius: 1px;
    height: max-content;
    padding-bottom: 5px;

    display: flex;
    flex-direction: column;

    /* width:max-content; */
}

.galleryItem > img {
    width:inherit;
    max-width: 500px;
    margin: 10px;
    

    border: 2px double #eeeeee;
    
    
}
.galleryItem > span {
    margin: 5px 5px 5px 10px;
    font-family: nunito sans;
    font-weight: 600;
    color: #eeeeee;
}


#graphdestl {
    font-family: poppins; font-weight:600; font-size: 25pt;
    color: #EB455F;
}

#graphdeswrapper{
    display: flex;
    justify-content: center;
}

#graphdesgallery {
    display: grid;
    column-gap: 20px;
    row-gap: 20px;

}

#graphdesleft , #graphdesright {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: fit-content;

    row-gap: 30px;
    
}

.graphDesItem {
    /* max-width: max-content; */
}

.graphDesItem > div {

    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}

.graphDesItem > img {
    max-width: 300px;

}



#footer {
    display: flex;
    height: 50px;
    justify-content: space-between;
    place-items: center;
    padding:25px;

}

#footer > span, #footer > div > a {
    color:#eeeeee;
    font-family: poppins;
}

#footer > div > a {
    text-decoration: underline;
    text-underline-offset: 8px;
}

#footer > div > a:hover {
    color: #eeeeeeac;
}

#footer > div {
    display: flex;
    column-gap: 15px;
    
}




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


@media (min-width: 100px) and (max-width:399px) { 

    .mainText {
        font-size: 25pt;
    }


    #projects {
        max-width: 90%;
    }


    .card > span {
        font-size: 10pt;
    }
    .card > div:nth-child(2) > p {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 30ch;
    }


    #footer {
        flex-direction: column;
        place-items: start;
        row-gap: 10px;
    }
    #footer > #medsos {
        font-size: 10pt ;
    }



    #photoGallery {
        grid-template-columns: repeat(1,1fr);
    }

    .galleryItem {
        max-width: 200px;
    
        }

    #graphdesgallery {
        grid-template-columns: repeat(1,1fr);

    }
    
}





@media (min-width: 400px) { 

    .mainText {
        font-size: 35pt;
    }

    .card {
        max-width: 400px;
    }


    #photoGallery {
        grid-template-columns: repeat(3,1fr);
    }
    
    .galleryItem {
    max-width: 200px;

    }




    #projects {
        grid-template-columns: repeat(1,2fr);
        
        
    }

    #name > svg {
        width: 80vw;
    }



    #photoGallery {
        grid-template-columns: repeat(1,1fr);
    }

    .galleryItem {
        max-width: 350px;
    
    }


    

}


@media (min-width: 768px) { 

    .mainText {
        font-size: 40pt;
    }

    .card:nth-child(2) > span {
        font-size: 16pt;
    }
    .card:nth-child(2) > p {
        font-size:9pt;
    }

    #gallerytl {
        font-size: 20pt;
    }





    #photoGallery {
        grid-template-columns: repeat(2,1fr);
    }

    .galleryItem {
        max-width: 300px;
    }

    #galleryRight {
        display: none;
    }



    #graphdesgallery {
        grid-template-columns: repeat(2,1fr);

    }
    

    
}


@media (min-width: 1024px) { 
    

    .mainText {
        font-size: 50pt;
    }



    #projects {
        grid-template-columns: repeat(2,2fr);
        
        /* max-width: 800px; */
    }
    .card {
        width: 400px;
    }



    #photoGallery {
        grid-template-columns: repeat(3,1fr);
    }

    #galleryRight {
        display: flex;
    }
}


@media (min-width: 1280px) { 
}


@media (min-width: 1536px) { 

}