/*Night pallete found here: https://nightpalette.com/card/-1F1B24-FFFFFF-D1C4E9-8E24AA-F06292*/

html, body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #D1C4E9;
    height: 100%;
}


/*Header for index page below ---------------------------------- */
header {
    background-color: #1F1B24;
    color: #FFFFFF;
    padding: 1.5em;
}

.flex-container {
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

.flex-container_left {
    font-size: 40px;
    color: #8E24AA;
    margin-left: 2em;
}

.flex-container_left:hover {
    font-size: 40px;
    color: #8E24AA;
    margin-left: 2em;
    cursor: pointer;
}


.flex-container_right-group {
    margin-left: auto;
    display: flex;
    margin-right: 2.5em;
}

.flex-container_right {
    margin-left: 20px;
    padding: 10px;
}

.flex-container_right:hover{
    margin-left: 20px;
    padding: 10px;
    color: #F06292;
    border-bottom: 3px solid #F06292;
    cursor: pointer;
}

.home {
    margin-left: 20px;
    padding: 10px;
    color: #F06292;
    border-bottom: 3px solid #F06292;
    cursor: pointer;
}

.aboutme {
    margin-left: 20px;
    padding: 10px;
    color: #F06292;
    border-bottom: 3px solid #F06292;
    cursor: pointer;
}

.workexperience {
    margin-left: 20px;
    padding: 10px;
    color: #F06292;
    border-bottom: 3px solid #F06292;
    cursor: pointer;
}

.projects {
    margin-left: 20px;
    padding: 10px;
    color: #F06292;
    border-bottom: 3px solid #F06292;
    cursor: pointer;
}

.contactme {
    margin-left: 20px;
    padding: 10px;
    color: #F06292;
    border-bottom: 3px solid #F06292;
    cursor: pointer; 
}
 
/*Header for index page above ------------------------- */
/*----------------------------------------------------*/
/*Main tag for index page below ------------------- */

main {
    height: 83%;
}

.flex-container2 {
    display: flex;
    height: 100%;
    width: auto;
    /*align-items: center;*/
    justify-content: center;
    margin: 1em;
    /*align-items: stretch;*/
}

.flex-picture {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.flex-intro {
    background-color: #FFFFFF;
    flex: 1;
    display: flex;
    justify-content: center;
    border-radius: 25px;
    overflow: auto;
}

.flex-intro-child {
    flex: 1;
    display: flex;
}

.wrapper {
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 4em;
    padding-right: 4em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.h1-style {
    color: #F06292;
    font-size: 3em;
}

.h3-style {
    color: #8E24AA;
    font-size: 2em;
}

.img3{
  border-radius: 25px;
}

.index-img1 {
    float: left;
    margin-right: .5em;
    border-radius: 25px;
    height: 44em;
    /* https://www.delftstack.com/howto/css/resize-image-css/ */
    width: 100%; /* Set the width to 100% for responsiveness */
    max-width: 500px; /* Define a maximum width to maintain control */
    height: auto; /* Maintain the aspect ratio */
}

.index-container {
    background-color: #FFFFFF;
    display: flex;
    height: 92%;
    margin: 1em;
    padding: 2em;
    border-radius: 25px;
    min-width: 0;
    overflow: auto;
    flex-wrap: wrap;
}

.index-div-pic {
    
}

.index-div-text {
    display: flex;
    flex: 1 1 45%; /* Adjust the flex-basis to control initial size of children */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 2em;
}


.learnmore-button {
    padding: 2em;
    border-radius: 25px;
    background-color: #F06292;
    color: #FFFFFF;
    text-align: center;
    font-size: 1em;
}

.learnmore-button:hover {
    padding: 2em;
    border-radius: 25px;
    background-color: #D1C4E9;
    color: #FFFFFF;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
}

/*Main tag for index page above ------------------- */
/*--------------------------------------------------*/
/*Main tag for aboutme page below-------------------*/
.flex-box-am {
    height: 92%;
    width: auto;
    margin: 1em;
    padding: 2em;
    background-color: #FFFFFF;
    border-radius: 25px;
    overflow: auto;
}

.am-p {
    font-size: 1.5em; 
    color: #8E24AA;
}

.img1 {
    float: left;
    margin-right: .5em;
    border-radius: 25px;
    margin-bottom: 1em;
}

.img2 {
    float: right;
    margin-left: .5em;
    border-radius: 25px;
    margin-bottom: 1em;
}
/*Main tag for aboutme page above-------------------*/
/*--------------------------------------------------*/
/*Main tag for work experience below----------------*/
.flex-box-we {
    height: 92%;
    width: auto;
    margin: 1em;
    padding: 2em;
    background-color: #FFFFFF;
    border-radius: 25px;
    overflow: auto;
}

.we-container {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.job-box {
    width: 90%;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    margin: 1em;
    border: .25em double #F06292;
    border-radius: 25px;
}

.we-p {
    font-size: 1em; 
    color: #8E24AA;
}

.we-ul {
    font-size: 1em; 
    color: #8E24AA;
}

/*Main tag for work experience above----------------*/
/*--------------------------------------------------*/
/*Main tag for projects below----------------*/
.project-container {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-box {
    width: 90%;
    padding: 2em;
    margin: 1em;
    border-radius: 25px;
    background-color: #F06292;
    color: #FFFFFF;
    text-align: center;
    font-size: 1em;
}

.project-box:hover {
    width: 90%;
    padding: 2em;
    margin: 1em;
    border-radius: 25px;
    background-color: #D1C4E9;
    color: #FFFFFF;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
}
/*Main tag for projects above----------------*/
/*--------------------------------------------------*/
/*Main tag for contact me below----------------*/

.flex-box-cm {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92%;
    margin: 1em;
    padding: 2em;
    border-radius: 25px;
    min-width: 0;
    overflow: hidden;
}

.cm-container {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*flex-wrap: wrap;*/
}

.cm-box {
    width: auto;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    margin: 1em;
    border: .25em double #F06292;
    border-radius: 25px;
}

.cm-p {
    font-size: 1.5em; 
    color: #8E24AA;
    text-align: center;
}

/*Main tag for contact me above----------------*/
/*Mobile optimization below*/
/*This is CSSs way of controlling what divs do when the site is on a mobile device.*/
@media (max-width: 600px) {
    /*this is for the home page. It makes whatever magic work to fix the homepage on a mobile screen. I should have written this down when I did it lol. */
    .index-div-text {
        flex: 1 1 100%; /* Stacks the children when screen width is 600px or less */
    }
    
    /*This is for the headers for all pages. It makes the header look more mobile friendly.*/
    .flex-container {
        display: flex;
        flex-direction: none;
        align-items: none;
        justify-content: space-between;
        padding: 0px 7px; /* Adjust padding for smaller screens if needed */
    }
    
    .flex-container_left {
        font-size: 30px;
        color: #8E24AA;
        margin-left: 0px;
    }

    .flex-container_left:hover {
        font-size: 30px;
        color: #8E24AA;
        cursor: pointer;
    }
    
    .flex-container_right-group {
        margin-left: 0px;
        display: flex;
        flex-direction: column;
        margin-right: 0px;
    }

    .flex-container_right {
        margin-left: 0px;
        padding: 0px;
    }

    .flex-container_right:hover{
        margin-left: 0px;
        padding: 0px;
        color: #F06292;
        border-bottom: 3px solid #F06292;
        cursor: pointer;
    } 

    .home {
        margin-left: 0px;
        padding: 0px;
        color: #F06292;
        border-bottom: 3px solid #F06292;
        cursor: pointer;
    }

    .aboutme {
        margin-left: 0px;
        padding: 0px;
        color: #F06292;
        border-bottom: 3px solid #F06292;
        cursor: pointer;
    }

    .workexperience {
        margin-left: 0px;
        padding: 0px;
        color: #F06292;
        border-bottom: 3px solid #F06292;
        cursor: pointer;
    }

    .projects {
        margin-left: 0px;
        padding: 0px;
        color: #F06292;
        border-bottom: 3px solid #F06292;
        cursor: pointer;
    }

    .contactme {
        margin-left: 0px;
        padding: 0px;
        color: #F06292;
        border-bottom: 3px solid #F06292;
        cursor: pointer; 
    }
    
    .flex-box-we {
        padding-top: 1em;

    }
 
}