:root {
    --bg : rgb(157, 194, 153);;
    --col1 : rgb(119, 167, 115);
    --col2 : rgb(230, 242, 228);
    --col3 : rgb(248, 255, 247);
    --col1_ : rgba(119, 167, 115, 0.5);
    --col3_ : rgb(248, 255, 247, .5);
}


body {
    background-color : var(--bg);
    background-attachment: fixed;
    font-family: "Gill Sans", sans-serif;
    padding: 0;
    margin: 0;
    color: var(--col3);
}

h1 {
    color: var(--col1); 
    font-size: 300%;
    text-align: center;
    letter-spacing: -2px;
    background-color: var(--col3);
    padding: 20px;
    margin-top: 80px;
} 

h2 {
    font-size: 200%;
    text-align: center;
    padding: 5px;
}

p {
    font-size: 150%;
    text-align: center;
    margin: 20px;
}

/* about me paragraph */
#about_me {
    border: 2px solid var(--col3);
    background-color: var(--col1);
    margin: 10px;
    padding: 20px;
}

/* images - columns and rows */
img {
    width: 100%; 
    object-fit: cover;
}
.column {
    float: left;
    width: 49%;
    margin: .5%;
    margin-top: 0%;
}
.row::after {
    content: "";
    clear: both;
    display: table;
} 


/* top navigation tab */
.tabs {
    list-style-type: none;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--col3_);
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
}
.tabs li {
    flex: 1;
    text-align: center;
}
.tabs li a {
    display: block;
    color: var(--col1);
    text-align: center;
    padding: 20px;
    text-decoration: none;
    font-size: 125%;
    height: 100%;
}
.tabs li a:hover:not(.active) {
    background-color: var(--col1_);
    color: var(--col3);
}
.tabs .active {
    color: var(--col3);
    background-color: var(--col1);
}

 /* projects formatting */
.projects {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
.projects p {
    border: 2px solid var(--col3);
    background-color: var(--col1);
    padding: 30px;
    margin: 10px;
    font-size: 150%;
}
.projects li p:hover {
    background-color: var(--bg);
    /* color: var(--col1); */
}

/* job page formatting */
.job li {
    margin: 10px;
    font-size: 150%;
}

/* git link on front page */
#git_l:hover:not(.active) {
    color: var(--col1);
}