body {
    text-align: center;
    background: rgb(148,187,233);
    background: linear-gradient(180deg, rgba(148,187,233,1) 14%, rgba(52,17,227,1) 96%);
    min-height: 100vh;
    max-width: 100vw;
    margin: 0;
    padding: 0;
}

#booster img {
    width:300px;
    height:412px;
}

.containerPerso {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 5%;
    margin-right: 5%;
}

#cartes-pokemon-ouvertes {
    justify-content: center;
}

.carte-pokemon {
    perspective: 1000px;
    width: 220px;
    height: 302px;
    position: relative;  
    margin-top: 3%;
}

.carte-pokemon img {
    width:100%;
    box-shadow: rgb(0, 0, 0) 0px 8px 32px, rgb(0, 0, 0) 0px 16px 48px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}


.carte-pokemon .face {
    position: absolute;
    transform: rotateY(0deg);
    backface-visibility: hidden;
    transition: transform .8s linear;
}

.carte-pokemon .pile {
    position: absolute;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    transition: transform 0.8s linear;
}

.carte-pokemon:hover .face {
    transform: rotateY(-180deg);
    cursor: pointer;
}

.carte-pokemon:hover .pile {
    transform: rotateY(0deg);
    cursor: pointer;
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

#booster img:hover {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-2px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(2px, 0, 0);
    }
}

#loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s infinite linear;
  }
  
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }