/* Mobile View */
@media screen and (max-width: 79.5rem){

#lang{
display:none;
}

#footer #lang{
display:block;
width:100%;
margin:.5rem 0;
}

#footer #lang ul{
display:flex;
justify-content:center;
list-style-type:none;
margin:0;
padding:0;
}

#footer #lang ul li span{
background:var(--button-background-color);
font-family:var(--nav-bold-font-family);
color:var(--light-font-color);
}


}


/* Desktop View */
@media screen and (min-width: 79.5rem){

#lang{
grid-area:lang;
}

#lang ul{
display:flex;
justify-content:flex-start;
list-style-type:none;
margin:.25rem 0 0 0;
padding:0;
}

#footer #lang{
display:none;
}

#lang ul li span{
background:var(--dark-background-color);
font-family:var(--nav-bold-font-family);
color:var(--light-font-color);
}

}

#lang ul li{
float:left;
text-align:left;
width:auto;
margin:0;
padding:0 .5em;
display:flex;
align-items:center;
}

#lang ul li span{
display:inline-block;
width:auto;
margin:0 .35rem 0 0;
padding:1px .15rem 0 .15rem;
text-decoration:none;
font-size:var(--xs-font-size);
border-radius:.15rem;
line-height:1rem;
}

#lang a{
padding:2px 0rem 0 0rem;
font-family:var(--nav-bold-font-family);
color:var(--base-font-color);
text-decoration:none;
font-size:var(--s-font-size);
}

#lang a:hover,
#lang a.on{
text-decoration:underline;
}