
a {
color:black;
text-decoration:underline;
text-underline-position: under;
text-decoration-color: #990000;
text-decoration-style: wavy;
}
a:hover {
	color:black;
}

.header {
	/*max-width:70%;
	margin:0 auto;
	min-width:200px;*/
	max-width: 100%;
    min-width: 300px;
    display: flex;
    flex-wrap: wrap;
}

#logo {
    float:left;
	max-width:150px;
	height:auto;
	width:150px !important;
	margin:0 auto;
}


/*paramètre du titre*/
	h1 {
	font-family: font;
    left: 0;
    text-align: center;
	line-height:120%;
	vertical-align:middle;
    width: 100%;
	color:#990000;
}

/*Barre de navigation*/
ul.topnav li a.active:hover {
	background-color: black !important;
	color: #fffbf0!important;
}
ul.topnav li a.active {
    color: black;
}
ul.topnav {
  overflow: hidden;
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
}
ul.topnav li{
	display: block;
    list-style: none !important;
}
ul.topnav li:hover, ul.topnav li a:hover {
	background-color: #990000 !important;
	color: #fffbf0!important;
}

ul.topnav li a {
        font-family: font;
    color: #990000;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
}

ul.topnav li a h2 {
    margin: 0;
    padding: 20px;
}
/*https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible et https://www.alsacreations.com/ */
/*couleur du fond*/
	body{
	background-color: #fffbf0;
	}
/*Paramètre de la section*/
	section {
	font-family: font;
    left: 0;
    text-align: center;
	color:#990000;
	 border-width:4px;
	border-style:solid;
	border-color:#990000;
	border-radius: 10px;
	margin: 5px;
}
	body{
	background-color: #fffbf0;
	}
/*Taille des photos*/
.famicom {
	width: 50%;
}

.disk {
	width: 50%;
	height: auto;
}
.writer {
	width : 30% ;
	height: auto ;
}
.gun {
	width: 70% ;
	height: auto ;
}
a.active {
	color:black;
	
}

.sources {
	    display: flex;
    flex-wrap: wrap;
}
.sources > p {
	width:48%;
	text-align:center;
	margin:0 1% 2%
}

/*Si la taille d'écran est inférieure à 767px*/
@media screen and (max-width: 767px){
	.header {
	width:90%;
	margin:0 auto;
}
		#logo {
    float:none;
	width:100% !important;

}

.sources > p {
	width:98%;
}
}
