body {
    background-color: lightgray;
    font-family: 'Roboto';
    font-size: 22px;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: blue;
}

.experience_section {
    white-space: nowrap;
    overflow: hidden;
}

#lightning_banner {
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 14em;
    background-image: url(/~david.rodriguez24/img/lightning-banner.jpg);
    background-size: 100%;
    background-position: center top 95%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}


.ATMO_research {
    /* white-space: nowrap; */
    float: left;
    bottom: -2em;
    width: 100%;
    white-space: normal;
    overflow: hidden;
    vertical-align: middle;
    background-color: rgb(153, 153, 153);
    padding-top: 2em;
    padding-left: 3em;
    border-bottom: lightgray 4em solid;
    font-size: 16pt;
}

#ATMO-text{
    float: left;
    white-space: wrap;
    overflow: hidden;
    width: 65%;
}

#HLMA_image img{
    float: right;
    position: relative;
    overflow: hidden;
    padding-right: 4em;
    bottom: 5em;
    right: 5em;
    width: 20em;
}

#neural_network_banner {
    vertical-align: middle;
    text-align: center;
    top: 0em;
    width: 100%;
    height: 14em;
    background-image: url(/~david.rodriguez24/img/Neural-network-portfolio-banner.jpeg);
    background-size: 100%;
    background-position: center top 55%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.MATH_research {
    /* white-space: nowrap; */
    /* float: left; */
    bottom: -2em;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    background-color: rgb(153, 153, 153);
    padding-top: 2em;
    padding-left: 3em;
    border-bottom: lightgray 4em solid;
    font-size: 16pt;
}

#MATH_text {
    float: left;
    overflow: hidden;
    white-space: normal;
    width: 65%;
}

#MATH_image img{
    float: right;
    position: relative;
    overflow: hidden;
    padding-right: 4em;
    bottom: 5em;
    right: 5em;
    width: 20em;
}

.Github {
    display: inline-block;
    width: 100%;
    background-color: rgb(153, 153, 153);
    overflow: visible;
    height: 35em;
    
}

.project_desc {
    position: relative;
    padding-top: 2em;
    padding-left: 3em;
    width: 85%;
}

.chargepol_gui_container {
    position: relative;
    transition-duration: 0.45s;
    height: 15em;
    width: 25%;
    overflow: hidden;
    background-color: rgb(71, 71, 71);
    margin: 0px;
    padding: 1em;
    border-right: black 2px outset;
}

.chargepol_gui_container:hover {
    background-color: rgb(113, 113, 113);
}

.chargepol_gui_container #github_img img{
    padding: 10px;
    width: 100px;
    height: auto;
}

.chargepol_gui_container #github_text {
    text-decoration: none;
    color: black;
    position: relative;
    display: inline-block;
    font-size: 16pt;
}

.persiann_container {
    position: relative;
    transition-duration: 0.45s;
    left: 25%;
    width: 25%;
    height: 15em;
    top: -17em;
    overflow: hidden;
    background-color: rgb(71, 71, 71);
    margin: 0px;
    padding: 1em;
    border-left: black 2px outset;
    border-right: black 2px outset;
}

.persiann_container:hover {
    background-color: rgb(113, 113, 113);
}

.persiann_container #github_img img{
    display: inline-block;
    padding: 10px;
    width: 100px;
    height: auto;
}

.persiann_container #github_text {
    text-decoration: none;
    color: black;
    position: relative;
    display: inline-block;
    font-size: 16pt;
}

.professional_portfolio_container {
    position: relative;
    transition-duration: 0.45s;
    left: 50%;
    width: 25%;
    height: 15em;
    top: -34em;
    overflow: hidden;
    background-color: rgb(71, 71, 71);
    margin: 0px;
    padding: 1em;
    border-left: black 2px outset;
    border-right: black 2px outset;
}

.professional_portfolio_container:hover {
    background-color: rgb(113, 113, 113);
}

.professional_portfolio_container #github_img img{
    display: inline-block;
    padding: 10px;
    width: 100px;
    height: auto;
}

.professional_portfolio_container #github_text {
    text-decoration: none;
    color: black;
    position: relative;
    display: inline-block;
    font-size: 16pt;
}

.chargepol_3D_container {
    position: relative;
    transition-duration: 0.45s;
    left: 75%;
    width: 25%;
    height: 15em;
    top: -51em;
    overflow: hidden;
    background-color: rgb(71, 71, 71);
    margin: 0px;
    padding: 1em;
    border-left: black 2px outset;
}

.chargepol_3D_container:hover {
    background-color: rgb(113, 113, 113);
}

.chargepol_3D_container #github_img img{
    display: inline-block;
    padding: 10px;
    width: 100px;
    height: auto;
}

.chargepol_3D_container #github_text {
    text-decoration: none;
    color: black;
    position: relative;
    display: inline-block;
    font-size: 16pt;
}