@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
  /* blanc cassé */
  --main-bg-color:#FAFAFA;
  /* gris platine */
  --third-bg-color: #EBE9E9;
  /* jaune pale */
  --second-bg-color: #FAF5E1;
  /* marron */
  --main-text-color: #5C3551;
  /* jaune */
  --first-logo-color: #F9D907;
  /* orangé */
  --second-logo-color: #F26E6E;
}

body{
	overflow-x: hidden;
	overflow-y: scroll;
	font-family: 'Open Sans', sans-serif;
	margin: 0px;
	padding: 0px;
	color: var(--main-text-color);
}

/* Toutes les pages*/
.paragraphe{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	height: 89vh;
	width: 100vw;
}

/* Bouton Contactez-moi */
.card, .contactezmoi{
	padding: 1vh 3vw 1vh 3vw;
	margin: 1vh auto 1.5vh auto;
	border: 1px solid var(--main-text-color);
	border-radius: 10px;
	box-shadow: 10px 5px 5px var(--main-text-color);
	text-align: center;
	font-size: 4vmin;
	font-weight: bold;
	color: var(--main-text-color);
	cursor: pointer;
	background-color: var(--second-bg-color);
}
.card a:link{
	text-decoration: none;
	color: var(--main-text-color);
}
.animcontactezmoi{
	animation: animcontactezmoi 5s linear 0s 1;
}
@keyframes animcontactezmoi{
	0% { opacity: 0; }
	70% { opacity: 0;}
}

.animcard{
	animation: animcard 5s linear 0s 1;
}
@keyframes animcard{
	0% { opacity: 0; }
	5% { opacity: 1; }
	30% { opacity: 1; }
	60% { opacity: 0; }
	100% { opacity: 0; }
}
	
@media screen and (max-width: 576px) 
{

}

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

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

}

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

}