body {  
	background-color: white ;
	#background: linear-gradient(to right, #FFEFBA, #FFFFFF) ;
}

body-2 {
	background-image: url("flux1-kontext-dev-rabbit.jpg") ;
	background-size: cover ;
	background-position: top ;
	opacity: 0.99 ;
}

.banner {     
	padding: 10px 0 ;
	#background-color: white ; 
	#background: url("flux1-kontext-dev-rabbit.jpg") ;
        #background-position: center ;
	text-align: top ;
        #width: 500px ;
        height: 110px ;
	#margin: 0px;
}

.banner-2 {     
	padding: 100px 0 ;
	background: url("flux1-kontext-dev-rabbit.jpg") ;
        background-size: cover ;
        background-position: center ;
        width: 500px ;
        height: 600px ;
	margin: auto ;
}

.menu {
	display: flex ;
	flex-direction: row ;
	#justify-content: space-around ;
	justify-content: center ;
	#justify-content: flex-start ;
	#justify-content: flex-end ;
	#justify-content: space-between ;
	#height: 200px ;
	align-items: center ;
	flex-wrap: wrap ;
	background-color: lightgrey ; 
	gap: 20px ;
}

.menubox {
	#border: 2px dotted RGB(0, 255, 0);
	#gap: 20px ;
	#display: inline;
	display: inline-block;
}

.menuone {
	#height: 100px ;
	#order: 1;
	#flex: 1;
}

.pictureright {
	display: grid ;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: 1fr ;
	gap: 20px ;
}

.pictureleft {
	display: grid ;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: 1fr ;
	gap: 20px ;
}

.picturemiddle {
	display: grid ;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: 1fr ;
	gap: 20px ;
}

.picturebox {
	#background-color: grey;
	#text-color: black;
	#border: 2px dotted RGB(0, 0, 0);
	#height: 200px ;
	gap: 20px ;
	#display: inline;
	display: inline-block;
}

.news {
	display: grid ;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: 1fr ;
	gap: 20px ;
}

.newsbox {
	 display: inline-block;
}

.newstwo {
	padding: 10px ;
	border: 1px solid black ;
	outline: none ;
	#margin: auto ;
        margin-left: 20px ;
        margin-right: 20px ;
        margin-top: 20px ;
        margin-bottom: 20px ;
	border-radius: 10px ;
}

.pictureoneone {
	#grid-column-start: 1 ;
	#grid-column-end: 5 ;
}

img {
	display: block;
  	max-width: 100%;
  	height: auto;
}

h1 {    
	font-family: Arial, sans-serif ;
	font-size: 2.5em ;
        color: darkblue ;
	padding: 0px ;
	margin: auto ;
        margin-left: 10px ;
        #margin-right: 10px ;
        #margin-top: 10px ;
        #margin-bottom: 10px ;
}

h1-2 {    
	font-family: Arial, sans-serif ;
	font-size: 3em ;
        color: black ;
	#background-color: RGB(224, 224, 224);
	background: linear-gradient(to right, RGB(224, 224, 224), RGB(224, 0, 224)) ;
	padding: 50px ;
        margin-left: 0px ;
        margin-right: 0px ;
        margin-top: 50px ;
        margin-bottom: 20px ;
}

h2 {    
	font-family: Arial, sans-serif ;
	font-size: 2em ;
        color: black ;
	padding: 0px ;
	margin: auto ;
        margin-left: 10px ;
        #margin-right: 10px ;
        #margin-top: 10px ;
        #margin-bottom: 10px ;
}

h2-2 {    
	
	font-size: 2.5em ;
	font-style: italic ;
        color: blue ;
	border: 2px dotted RGB(0, 0, 0);
	border-radius: 10px ;
	box-shadow: 6px 6px 15px RGB(224, 224, 224) ;
        margin-left: 30px ;
        margin-right: 30px ;
        margin-top: 40px ;
        margin-bottom: 20px ;
}

h3 {    
	font-family: Arial, sans-serif ;
	font-size: 2em ;
	#text-shadow: 6px 6px 15px RGB(224, 224, 224) ;
        color: darkblue ;
	padding: 10px ;
        margin-left: 10px ;
        margin-right: 10px ;
        margin-top: 10px ;
        margin-bottom: 10px ;
}

.ma-classe-bold {
	#font-size: 1.5em ;     
	font-weight: bold ;
	#text-align: left ;
	#color: black;
        #margin-left: 10px ;
        #margin-right: 10px ;
        #margin-top: 10px ;
        #margin-bottom: 10px ;
}

h4 {    
	font-family: Arial, sans-serif ;
	font-size: 1.5em ;
        color: black ;
	text-decoration: underline ;
        padding: 10px ;
        margin-left: 10px ;
        margin-right: 10px ;
        margin-top: 10px ;
        margin-bottom: 10px ;
}

h5 {    
	font-family: Arial, sans-serif ;
	font-size: 1.5em ;
        color: black ;
        text-align: center ;
        margin-left: 80px ;
        margin-right: 80px ;
        margin-top: 0px ;
        margin-bottom: 10px ;
}

p {     
	text-align: justify ;
	font-size: 1.5em ;
	padding: 10px ;
        margin: 10px ;
}

ul {     
	text-align: justify ;
	font-size: 1.5em ;
	padding: 10px ;
        margin: 10px ;
	margin-left: 30px ;
}

.ma-classe {     
	#text-align: left ;
	#color: black;
        #margin-left: 40px ;
        #margin-right: 40px ;
        #margin-top: 0px ;
        #margin-bottom: 0px ;
}

a {     
	font-size: 1.5em ;
        text-decoration: none ;
        color: black ;
	#background-color: white ;
	#outline-color: white ;
	#display: block ;
	#width: 300px ;
        #height: 100px ;
}

a:hover {
	color: white ;
	background-color: darkblue;
	#outline-color: black ;
	#text-decoration: underline ;
}

a:active {
	#color: RGB(224, 0, 224) ;
	#text-decoration: none ;
}

a:focus {
	#background-color: RGB(0, 255, 0) ;
	#color: RGB(0, 0, 0) ;
	#outline-color: RGB(0, 255, 255) ;
}

a-2 {     
	font-size: 2em ;
        text-decoration: none ;
        color: blue ;
	display: block ;
	width: 300px ;
        height: 100px ;
}

table {
	border-collapse: collapse ;
}

td {     
	border: 1px solid black ;
}

form {
	#font-family: Arial, sans-serif ;
	#font-size: 1em ;
        #color: black ;
	#display: flex ;
	#flex-direction: column ;
	#margin: auto ;
	#width: 50% ;
}

input, textarea {
	font-family: Arial, sans-serif ;
	font-size: 1.5em ;
        color: black ;
	padding: 10px ;
	border: 1px solid black ;
	outline: none ;
	margin-bottom: 20px ;
	border-radius: 10px ;
}

fieldset {
	background-color: RGB(224, 224, 224);
}

legend {
	background-color: RGB(224, 0, 224);
}

.conteneur {
	display: flex ;
	flex-direction: row ;
	#justify-content: space-around ;
	#justify-content: center ;
	#justify-content: flex-start ;
	#justify-content: flex-end ;
	justify-content: space-between ;
	height: 400px ;
	align-items: center ;
	flex-wrap: wrap ;
	gap: 20px ;
}

.conteneur-2 {
	display: grid ;
	grid-template-columns: 250px 250px 250px 250px 250px ;
	grid-template-rows: 150px 300px ;
	gap: 20px ;
}

.conteneur-3 {
	display: grid ;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
	grid-template-rows: 150px 300px ;
	gap: 20px ;
}

.box {
	#background-color: grey;
	#text-color: black;
	border: 2px dotted RGB(0, 0, 0);
	#height: 200px ;
	gap: 20px ;
	#display: inline;
	display: inline-block;
}

.one {
	#height: 100px ;
	order: 1;
}

.two {
	#height: 100px ;
	order: 2;
}

.three {
	#height: 100px ;
	#color: green ;
	order: 3;
	#flex: 1;
}

.one-2 {
	grid-column-start: 1 ;
	grid-column-end: 6 ;
}

img:hover {
	opacity: 0.5 ;
}

img:hover + p {
	color: green ;
}

@media screen and (max-width: 700px) {
	.pictureright , .pictureleft , .picturemiddle , .news {
		display: flex ;
        	flex-direction: row ;
        	justify-content: space-around ;
        	align-items: center ;
        	flex-wrap: wrap ;
	}

	.menu {
		flex-direction: column ;
		text-align: center ;
	}
	
	h2 {
		#display: none ;
		font-size: 0;
		#color: transparent; /* make the text invisible */
  		user-select: none; /* prevent selection of the text */
	}

	p {
		#overflow: scroll ;
	}
}