.footer{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 50px;
    left: 45%;
    box-sizing: border-box;
    /* background-color: var(--primary-blue); */
    background-image: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary-blue) 35%, var(--primary-dark) 100%); 
    color: var(--primary-light);
}

.footer-content{
    width: 50%;
    margin: auto;
    text-align:center;
}

.overview{
    margin: auto;
    width: 50%;
    text-align: center;
}

.overview ul li{
    list-style-type: none;
    margin: 2%;
}

.overview a{
    color: var(--primary-light);
    text-align: center;
    padding: 5px;
    text-decoration: none;
    font-size: 17px;
    border-radius: 5px;
}

.overview a:hover{
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-weight: bold;
}

#footer-separator{
    height: 260px;
    border-left: 1px solid var(--primary-light); 
}


#footer-title {
    font-size: 28px; 
}

.social-media{
    display:flex;
    flex-direction: row;
    width: 15%;
    margin:auto;
}

.social-media div{
    margin: auto;
    /* width: 25%; */
}

.social-media div p{
    margin: auto;
    font-size: 14px;
}

/* This css styling for the button was retrieved from https://fdossena.com/?p=html5cool/buttons/i.frag */
a.footer-btns{
    display:inline-block;
    padding:0.35em 1.2em;
    border:0.1em solid var(--primary-light);
    border-radius:0.12em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color: var(--primary-light);
    text-align:center;
    transition: all 0.2s;
}
a.footer-btns:hover{
    color: var(--primary-dark);
    background-color: var(--tertiary-blue);
    border:0.1em solid var(--primary-dark);
}
@media all and (max-width:30em){
    a.footer-btns{
        display:block;
        margin:0.4em auto;
    }
}
/* *********************************************** */