/* Page Contact */

#contact{
	background-image: url("data:image/svg+xml;utf8," + encodeURIComponent(document.getElementById("star-svg").outerHTML));
	background-repeat: no-repeat;
	background-size: cover;
	align-items: center;
}

#star-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: var(--main-bg-color);
}
/*#star-svg {
	height: 100%;
	width: 100%;
}*/
.star {
	animation: twinkling 3s ease-in-out infinite;
}
@keyframes twinkling {
	0% {opacity: 1;}
	50% {opacity: 0.1;}
	100% {opacity: 1;}
}

#contact #form{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	flex: 1;
	width: 65%;
}

#contact #formulaire{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-around;
	border: 1px solid var(--main-text-color);
	border-radius: 10px;
	box-shadow: 10px 5px 5px var(--main-text-color);
	background-color: var(--second-bg-color);
	flex: 1;
	width: 100%;
}
#contact #contactmessage{
	font-size: 3vmin;
	font-weight: bold;
	padding-left: 1vw;
}
#contact .champgroup{
	font-size: 2vmin;
	margin: 0 auto 0 auto;
	position: relative;
	width: 75%;
}
#contact .champ{
	padding: 1vh 1vw 1vh 1vw;
	border: 1px solid var(--main-text-color);
	border-radius: 10px;
	font-size: 2vmin;
	width: 100%;
}
#contact label{
	position: absolute;
	font-size: 1.5vmin;
	left: 0;
	padding: 1vh 1vw 1vh 1vw;
	color: lightgrey;
	opacity: 0;
	border-radius: 10px;
	pointer-events: none;
}
#contact .champgroup :is(:focus)~label {
	transform: translateY(-50%) scale(.7);
	opacity: 1;
	margin: 0;
	margin-left: 1vw;
	padding: 0.4vw;
	background-color: var(--second-logo-color);
	color: var(--main-bg-color);
}
#contact #Go{
	font-size: 3vmin;
	font-weight: bold;
	margin: 1vh 0 1vh auto;
	border: 1px solid var(--main-text-color);
	border-radius: 10px;
	box-shadow: 10px 5px 5px var(--main-text-color);
	padding: 1vh 1vw 1vh 1vw;
	color: var(--main-text-color);
}

.animcontact{
	animation: animcontact 5s;	
}
@keyframes animcontact{
	0% { background-color: #EBE9E9; }
}

/* Pied de page */
footer{
	background-color: var(--main-bg-color); 
	display: flex;
	flex-wrap: nowrap;
	justify-content: right;
	height: 8%;
	width : 100%;
	border-top: 1px solid var(--main-text-color);
}

footer #contact{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	margin: 0;
}

footer #contact p{
	font-size: 1.4vw;
	margin-right: 2vw;
	padding: 0;
}

footer #contact a:link{
	text-decoration: none;
	color: var(--main-text-color);
}

dialog {
	border: solid 1px black;
}

dialog::backdrop {
  background: rgba(211,211,211,.75);
}

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

}

@media screen and (min-width: 576px) 
{
 
}

@media screen and (min-width: 768px) 
{

}

@media screen and (min-width: 1024px) 
{

}