html
{
	background-image: radial-gradient(circle, #370514, #440518, #50031b, #5e021e, #6b0020);
	height: 100%;
	background-repeat: no-repeat;
}

h1
{
	text-align: center;
	color: white;
	margin-top: 100px;
	font-size: 80px;
	text-shadow: 0px 10px 10px black;
}

/* animation du texte h1 FAUX! */

.scale-up-center {
	-webkit-animation: scale-up-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}



button 
{
	color: white;
	background-color: black;
	font-size: 24px;
	padding: 15px 70px;
	border-radius: 12px;
	border: 1px solid white;
	transition-duration: 0.8s;
	box-shadow: 0px 2px 10px white;
	font-family: serif;
	font-weight: bold;
}

button:hover
{
	background-color: white;
	color: black;
	box-shadow: 0px 2px 10px black;
	cursor: pointer;
}

article
{
	display: flex;
	justify-content: space-around;
	top: 150px;
}


/* responsive */

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

html{
	height: 100%;
}