.Left {
font-family: fantasy;
font-size: medium;
font-weight: 100;

display: flex;
flex-direction: column;

  position: fixed;
  z-index: 1000;
  background-color: pink;
  color: white;
  padding: 15px 20px;
  border-radius: 50px;


}

.one {
    text-indent: 1rem;
}


.Middle{
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: 900;

flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}

.Right {

}

a,.Left {
    text-decoration: none;
    color: black;
}

h1, .Middle {
  animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
  50% {
    color: red;
  }
}

.Opening {
    left: 2rem;
    bottom: 2rem;
  background-color: paleturquoise;
  color: black;
  padding: 15px 20px;
  border-radius: 50px;

  display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

  font-size: small;
}

.OpeningH, .Odette {

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}

.Butt {

    font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: 10;

}


.GamesLabel {

font-weight: 200;

}

.Cards {


display: flex;
flex-direction: row;
/* gap: 20px; */
flex-wrap: wrap;
justify-content: center;
align-items: center;

position: relative;

/* width: 250px; */
/* height: 350px; */



}

.Cardss1, .Cardss2, .Cardss3, .Cardss4, .Cardss5, .Cardss6, .Cardss7, .Cardss8 {

    position: relative;

    width: 250px;
    height: 350px;

    transition: transform 1500ms;

    backface-visibility: hidden;

    transform-style: preserve-3d;

    

}

.Cardss1:hover, .Cardss2:hover, .Cardss3:hover, .Cardss4:hover, .Cardss5:hover, .Cardss6:hover, .Cardss7:hover, .Cardss8:hover {


transform: rotateY(180deg);



}


.Front1, .Front2, .Front3, .Front4, .Front5, .Front6, .Front7, .Front8, .Back1, .Back2, .Back3, .Back4, .Back5, .Back6, .Back7, .Back8{


    position: absolute;

    width: 100%;
    height: 100%;


    
}

.Carda1, .Carda2, .Carda3, .Carda4, .Carda5, .Carda6, .Carda7, .Carda8 {

position: absolute;

    width: 100%;
    height: 100%;

}

.Front1, .Front2, .Front3, .Front4, .Front5, .Front6, .Front7, .Front8{


transform: rotateY(180deg);

}