nav {
	background-color: rgba(255, 255, 255, 0.05);
	border-radius:10px;
	border: 3px solid rgba(255, 255, 255, 0.5);
 	vertical-align: bottom;
}

nav ul {
	list-style:none;
	display:flex;
}

nav ul {
        list-style:none;
        display:flex;
}

nav .home {
	margin-right:auto;
}

nav .home:hover {
        margin-right:auto;
        border-radius:50px;
}

nav a {
	font-family: "Bascule";
	display:flex;
	text-decoration:none;
	color: #222222;
	padding: 1em;
	transition: background-color 150ms ease;
	font-size:1.5em;
}

nav a.rouge {
	color: white;
        background-color: #990000;
	border-radius:10px;
	margin-right:10px;
}

nav a:hover {
	text-decoration-line: underline;
	font-style: italic;

}

nav a.rouge:hover {
	border-radius:10px;
        background-color: #BB3333;
	text-decoration-line: none;
	font-style: normal;
}


#menu-bt {
        display:none;
        background:none;
        border:none;
        padding: 0.5em;
        cursor:pointer;
        margin-left:auto;
	padding-right: 5em;
	filter: none;
}

#close-bt {
	display:none;
	background:none;
        border:none;
        padding: 0em;
        cursor:pointer;
}

#overlay {
	background: rgba(0, 0, 0, 0.5);
	position:fixed;
	z-index:9;
	inset: 0;
	display:none;
}


@media screen and (max-width:1080px) {

	
nav {
    background-color: #222222;
    border-radius:0px;
    position:fixed;
    top:0;
    right:-100%;
    height: 100vh;
    width: min(30em,100%);
    z-index: 10;
    border-left:1px solid #888888;
    transition: right 300ms ease-out;
    }



nav.show {
    right:0;
    }

nav.show ~ #overlay {
    display:block;
    }


nav ul {

	width:100%;
	flex-direction:column;
       }

nav a {
	color: white;
	font-family: "Bascule";
	width:100%;
	padding-left: 2.5em;
	font-size:2.3em;
      }


nav .home {
        filter: invert(100%);
}

#menu-bt {
	filter: none;
	width:200%;
}

#menu-bt,#close-bt {
        display:flex; 
                   }                  


}