@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap');
*{
	transition: all 0.5s ease-out;
}
body{
	background-color:#141414;
}
#texte{
	width: 300px; 
	margin: 30px auto 30px;
	display: flex;
    flex-direction: column; 
    gap: 15px;
   
}
h1, h2 { 
    font-family: "Honk", system-ui;
    text-align: center;
}

h1 {
    font-size: 4em;
}

h2 {
    font-size: 2.8em;
}

p {
    font-family: "Afacad Flux", sans-serif;
    font-size: 1.8em;
    color: #ad1457;
    text-align: center;
}

.conteneur {
	width: 310px;
	height: 1240px;
	margin: 20px auto;
	grid-gap: 10px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(8, 1fr);
}

.conteneur article{
	border-radius: 20px;
}
.case1 { 
	grid-area: 1 / 1 / 2 / 3;
}
.case2 { 
	grid-area: 2 / 1 / 3 / 2; 
}
.case3 { 
	grid-area: 2 / 2 / 3 / 3;  
}
.case4 { 
	grid-area: 3 / 1 / 5 / 2; 
}
.case5 { 
	grid-area: 3 / 2 / 5 / 3; 
}
.case6 { 
	grid-area: 5 / 1 / 7 / 3;  
}
.case7 { 
	grid-area: 7 / 1 / 9 / 2;
}
.case8 { 
	grid-area: 7 / 2 / 9 / 3; 
}
button{
	background-color: #ffc107;
	font-family: "Afacad Flux", sans-serif;
	font-size: 1.5em;
	color: #ad1457;
	border-radius: 20px;
	display: block;
	margin: 30px auto 30px;

}