header {
	background-color: black;
	color: white;
	border: 1 px solid black;
	padding: 10px;
	margin-bottom: 20px;
}
body {
	margin: 0px;
	padding: 0px;
}
header img {
	float: left;
	padding: 5px;
}
header p {
	padding-left: 30px;
}
p, a, h1, h2, h3, b, body, header, main {
	font-family: "Sour Gummy", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
}
header p a {
	color: black;
	background-color: white;
	border: 1px solid white;
	text-decoration: none;
	padding: 10px;
}
header p a:hover {
	color: white;
	background-color: black;
	border: 1px solid white;
	text-decoration: none;
	padding: 10px;
}
main {
	border: 15px solid black;
	border-radius: 11px;
	margin-top: 10px;
	margin-right: 50px;
	margin-left: 50px;
	background-color: white;
}
body {
	background-image: url("../icon.png");
}
main h1 {
	padding-left: 40px;
	background-color: black;
	color: white;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
}
main p[rorostyle="bare"] {
	border: 1px solid black;
	margin-top: 0px;
	margin-bottom: 0px;
}
main h1[contenteditable="true"]:hover {
	opacity: 75%;
}
main h1[contenteditable="true"]:focus {
	outline: none;
	color: black;
	background-color: grey;
	border: 1px dashed black;
}
main p[contenteditable="true"], main p[contenteditable="false"] {
	margin-left: 40px;
	padding: 10px;
	margin-right: 150px;
}
main p[contenteditable="true"]:hover {
	border: 1px dashed grey;
}
main p[contenteditable="true"]:focus {
	outline: none;
	color: black;
	background-color: grey;
	border: 1px dashed black;
	opacity: 70%;
}
div {
	background-color: black;
	color: white;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-bottom: 0px;
}
div p {
	padding-left: 40px;
}
div p a {
	color: white;
	padding-right: 10px;
	padding-left: 10px;
}
div p a:hover {
	text-decoration: none;
}
form {
	padding: 20px;
	background-color: white;
	margin-top: 20px;
	border: 4px solid black;
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom: 80px;
}
form input[type="Submit"] {
	padding: 10px;
	padding-right: 110px;
	border-radius: 10px;
	background-color: lightblue;
	color: blue;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre */
    transition: transform 0.2s; /* Transition pour l'effet */
	cursor: pointer; /* Curseur en forme de main */
	border: 1px solid blue;
}
form input[type="Submit"]:hover {
    transform: translateY(-4px); /* Déplacement vers le haut au survol */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); /* Ombre plus prononcée */
	background-color: lightgreen;
	color: green;
	border: 1px solid green;
}

form input[type="Submit"]:active {
    transform: translateY(2px); /* Déplacement vers le bas lors du clic */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre réduite */
}
form p {
	float: right;
	color: green;
	text-decoration: 1px underline green;
}
form p:hover {
	color: orange;
	text-decoration: 1px underline orange;
}
form p:active {
	color: blue;
	text-decoration: 1px underline blue;
}