@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');



.open-sans-1 {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

html {
    /* min-height: 100vh; */
    margin: 0;

}

body {
    background: linear-gradient(to bottom right, #0d261a 0%, #07130d 100%);
    /* background-color: hsl(151, 45%, 7%); */

    color:#c9e6d7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* width: 100%; */
    /* min-height: 100vh; */

    margin: 0;
}



p {
    line-height: 1.5;
}

h3 {
    letter-spacing: 0.5px;
}

.parent {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    /* grid-template-rows: auto; */
    gap: 8px;
    margin-top: 3%;
}
    
.name_heading {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;

    grid-column-start: 2;
    /* justify-self: center; */
    /* margin-top: 5%; */
    /* margin-left: 15%; */
    height: fit-content;
    /* background-color: #e4e4e473; */

}


#full_name_heading{

    color:#edf8f2;
    font-size: 48px;
    margin-bottom: 0px;
    margin-top: 0px;

}

#career_title{
    color:#edf8f2;
    margin-top: 5px;
    margin-bottom: 25px;

}

.short_summary{
    width: 60%;
}

.professional_summary {
    /* grid-row: span 2 / span 2;
    grid-column: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 2; */
    
    width: 75%;

}

.section_header {
    text-decoration: underline;
    color: #ffffff;
}

.skills {
    grid-row: span 2 / span 2;
    grid-column: span 2 / span 2;
    grid-row-start: 3;
    grid-column-start: 2;
}


.skills_container {
    
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    row-gap: 15px;
    align-items: start;
    /* justify-content: left; */

    width: 75%;


}

.skill_cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* grid-template-rows: repeat(1, 1fr); */

    /* align-self: center; */
    /* justify-self: center; */
    /* margin-bottom: 5px; */
}

.skill_cell img {
    /* justify-self: center; */
    /* align-self: center; */

    max-width: 40px;
    max-height: 40px;

}

.skill_cell p {
    margin-top: 0px;
}

#cell1{

}

#cell2{
    grid-column-start: 2;
    
}

#cell3{
    grid-column-start: 3;
    
}

#cell4{
    grid-column-start: 4;
    
}

#cell5{
    grid-row-start: 2;
}

#cell6{
    grid-column-start: 2;
    grid-row-start: 2;
}

#cell7{
    grid-column-start: 3;
    grid-row-start: 2;
}

#cell8{
    grid-column-start: 4;
    grid-row-start: 2;

}

#cell9{
    grid-column-start: 1;
    grid-row-start: 3;

}

#cell10{
    grid-column-start: 2;
    grid-row-start: 3;

}

#cell11{
    grid-column-start: 3;
    grid-row-start: 3;

}

#cell12{
    grid-column-start: 4;
    grid-row-start: 3;

}


.resume_link {
    margin-top:40px;
    margin-bottom:30px;
    

}



.resume_link a {
    color:#edf8f2;
    text-decoration: none;
    transition-duration: 0.5s;
    padding:10px;
    border-color: #a3b6ac;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    
}

.resume_link a:hover {
    color:#ffffff;
    background-color: #99ff9944;
    border-radius: 5px;
    transition-duration: 0.5s;
    /* border-width: 0px; */
    border-color: #0b1e15;
    
}


.experience {
    grid-row: span 3 / span 3;
    grid-column: span 2 / span 2;
    grid-column-start: 4;
    /* grid-row-start: 3; */
    
    /* margin-top: 75px; */
    /* padding-bottom: 20px; */
    border-bottom: 1px solid #223b2f;
   
}


.experience ul {
    list-style-type: none;
    
    
}

.experience li {
    display: inline-flex;
    padding: 10px;
    flex-direction: row;
    /* align-items: center; */
    

}

.experience li img {
    max-width: 40px;
    z-index: 1;
    
}



.experience li p {
    align-self: center;
    /* height: 0; */
    width: 0;
    opacity: 0;
    transition-duration: 1s;
    margin-top: 0;
    margin-bottom: 0;

}

.experience li > img:hover + p {
    /* opacity: 1; */
    /* height: 10px; */
    /* width: 60px; */
    /* align-self: center; */
    
    
    /* width: 20px; */
    /* animation-name: appear;
    animation-duration: 2s;     */
    /* transition: display 1s; */
    transition-duration: 1s;
}





.experience_container {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: 0.5fr 1fr 1fr;

    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
}
    



.exp1 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
}

.date2 {
    grid-row-start: 3;
}


.exp2 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-row-start: 3;
}

.date3 {
    grid-row-start: 5;
}



.edu1 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
}
        
 
.experience_position {
    color:#edf8f2;
}


#education {
    grid-row: span 1 / span 1;
    grid-column: span 2 / span 2;
    grid-column-start: 4;
    grid-row-start: 4;
    /* grid-template-rows: auto; */
    margin-top: 30px;
    border: none;
}

#education_exp_container {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: 0.5fr 1fr 1fr;

    grid-template-rows: 1fr;
    gap: 8px;
}

footer {
    
    text-align: center;
    color: #4d5550;
}

#icons8{
    color:inherit;
}

#icons8:hover{
    color: #ffffff;
}




@media only screen and (max-width: 1100px) {
    .parent {
        font-size: 1.1rem;
        /* display: flex;
        flex-direction: column;
        justify-content: center; */
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .parent > * {
        width: 75%;
        margin-right: 5%;
    }
    .name_heading {
        grid-row: span 1 / span 1;
        /* grid-row-start: 1; */
        grid-column: span 1 / span 1;
        grid-column-start: 1;
        /* justify-self: center; */
        
        margin-left: 0;
    
        /* background-color: #e4e4e473; */
    
    }

    .name_heading p {

    }

    .short_summary{
        width: 100%;
    }

    .professional_summary {
        /* grid-row: span 2 / span 2; */
        /* grid-column: span 4 / span 4;
        grid-column-start: 3;
        margin-right: 5%; */
        width: 100%;
    }

    .skills {
        grid-row: span 1 / span 1;
        grid-column: span 1 / span 1;
        grid-column-start: 1;
        grid-row-start: 2;
        /* grid-column-start: 2; */

    }

    .skills_container {
        width: 90%;
    }

    .resume_link {
        margin-top:10%;
        margin-bottom:10%;
        text-align: center;
    
    }

    .resume_link a {
        color:#edf8f2;
        text-decoration: none;
        transition-duration: 0.5s;
        padding:2%;
        border-color: #a3b6ac;
        border-radius: 2px;
        border-width: 3px;
        border-style: solid;
        font-size: 1.75rem;
        background-color: #606b6583;
    }

    .experience {
        grid-row: span 2 / span 2;
        /* grid-column: span 4 / span 4;
        grid-column-start: 2; */
        grid-row-start: 3;
        grid-column: span 1 / span 1;
        grid-column-start: 1;
        /* margin-top: 75px;
        padding-bottom: 20px;
        border-bottom: 1px solid #223b2f; */
       
    }

    .experience_container {
        display: flex;
        flex-direction: column;
        /* grid-template-columns: repeat(3, 1fr); */
        grid-template-columns: 1fr;
    
        grid-template-rows: repeat(4, 1fr);
        /* gap: 8px; */
    }

    .exp1, .exp2 {
        border-bottom: 2px solid white;
    }

    .exp1 > p, .exp2 > p {
        margin-bottom: 5%;
    }

    #education {
        
        /* grid-column: span 4 / span 4;
        grid-column-start: 2; */
        grid-row: span 1 / span 1;

        grid-row-start: 5;
        
        grid-column: span 1 / span 1;
        grid-column-start: 1;
        margin-top: 5%;

        margin-bottom: 12%;
    }


    
}

/* @media only screen and (max-width: 650px) {
    

} */