/* 
HEX CODES: 
#1c2127
#0b385f
#3373b0
#bed4e9
#e7f1fb
 */

.htmlMain {
    background-color: #0b385f;
    font-family: Arial, Helvetica, sans-serif;

}

.bdMain {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    /* background-color: antiquewhite; */
    width: 95%;
    padding-top: 1%;
}

.divHeader{
    text-align: center;
}

.grid-container{
    font-size: xx-large;
    display: grid;
    grid-template-areas: 
    'divInfo divAbout'
    'divMenu divExperience'
    'divLinks divExperience'
    '. divExperience'
    '. divProjects';
    gap: 10px;
    background-color: #0b385f;
    padding: 10px;
}

.grid-container div {
    background-color: #bed4e9;
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
    padding-left: 2%;
    padding-right: 2%;
}

.divInfo {
    grid-area: divInfo;
    position: fixed;
    width: 33%;
}

.divMenu {
    grid-area: divMenu;
    position: fixed;
    margin-top: 14%;
    width: 33%;
}

.grid-container a {
    text-decoration: none;
    color: black;
    padding-bottom: 100px;
}

.divLinks {
    grid-area: divLinks;
    position: fixed;
    margin-top: 30.1%;
    width: 33%;
}

.divAbout {
    grid-area: divAbout;
    margin-left: 40%;
}

.divAbout p {
    font-size: large;
}

.divExperience {
    grid-area: divExperience;
    margin-left: 40%;
}

.grid-container .divLanguages {
    font-size: large;
    text-align: left;
    
}

.grid-container .divAlgorithms {
    font-size: large;
    text-align: left;
}

.grid-container .divProjects {
    margin-left: 40%;

}

.grid-container .divProject {
    font-size: large;
    text-align: left;
    margin-bottom: 3%;
    outline-color: #1c2127;
    outline-style: solid;
    border-radius: 5%;


}

.grid-container .divProject p {
    margin-left: 3%;    
}

.grid-container .divProject span{
    display:inline-block;
    background-color: #3373b0;
    border-radius: 25px;
    margin-top: 1%;
    margin-left: 1%;
    padding-left: 2%;
    padding-right: 2%;

}

.divProjects {
    grid-area: divProjects;
}

.pName {
    font-size: xx-large;
    margin-bottom: 0px;
}

.pBackground {
    font-size: large;
    padding-top: 0px;
    padding-left: 50px;
    padding-right: 50px;
    margin-top: 15px;
}

.imgLogo {
    width: 50px;
}

.imgStar {
    width: 25px;
    padding: auto;
}