html {
  background-color:black;
  margin: 50px;
  border: solid whitesmoke 4px;
  
}

body {
  
  padding:10px;
  margin : auto; 
  background-color:  #d4d1d1; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}


.carte {
  width: 250px;
  height: 300px;
  perspective: 800px;
  padding: 10px;
  margin: auto;
  display: flex;

}

.recto, .verso {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  border: 1px solid;
  border-style: groove #bb3204;
  border-radius: 10px;
  transition: transform 0.6s;
  text-align: center;
  cursor: pointer; 
  
 ;
}
.recto {
 background: radial-gradient( darkred, crimson, darkorange, gold 70%,bisque,  darkred, bisque);
 color: rgb(255, 227, 200);

}

.verso {
  transform: rotateY(180deg);
  background: linear-gradient(bisque, gold, darkorange, crimson, darkred 75%);
  color: rgb(18, 17, 17);
  font-style: oblique;
  
}

.carte.flipped .recto {
  transform: rotateY(180deg);
}
.carte.flipped .verso{
  transform: rotateY(0);
}


button {
  margin: 5mm;
  padding: 10px;
  display :inline-block;
  background-color: rgb(255, 193, 145);
  background: radial-gradient(darkorange, bisque,  darkred);
  border: solid 1px whitesmoke;
  border-radius: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #0c0b0b; 
  cursor: pointer; 
  
}

.button {
  padding-top: 50px;
  display: flex;
  gap: none;
  width: auto;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
}

button:hover{
  opacity: 0.8;
}

.fin {
  text-align: center;
  font-size: 2rem;
  font-weight: 200;
  color: #bb3204;

}