/*********************************************
    General
*********************************************/
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to right, #00c6ff, #0072ff);
}

.center {
    text-align: center;
}

/*********************************************
    Container
*********************************************/
.container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/*********************************************
    Home
*********************************************/
.imgDemo {
    height: 250px;
}

@media (max-width: 425px)  {
    .imgDemo {
        width: 70vw;
        height: 200px;
    }
}

/*********************************************
    Registration
*********************************************/
fieldset {
    border-radius: 10px;
}

fieldset h1 {
    text-align: center;
}

fieldset form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
}

fieldset form span {
    flex-direction: row;
}

fieldset form label {
    font-size: 1.2rem;
    font-weight: bold;
}

fieldset form input {
    background: transparent;
    border: none;
    border-bottom: 1px solid black;
    width: 90%;
    margin-bottom: 15px;
    outline: none;
    height: 30px;
}

.errorForm {
    height: 25px;
}

::placeholder {
    color: rgb(49, 49, 49);
}

fieldset form p {
    margin: 0;
    font-size: 0.8rem;
}

.formButtons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/*********************************************
    Login
*********************************************/
#loginError {
    color: red;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 20px;
}

/*********************************************
    Profil
*********************************************/
.profile_container {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.imgProfilQuestion {
    border: 2px solid black;
    border-radius: 50px;
    padding: 10px;
}

.profileCenter {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    text-align: center;
    align-items: center;
    width: 530px;
}

.hideIfNotLoggedIn {
    display: none;
}

.profile {
    width: 30vw;
}

.profile p {
    margin: 10px 0 0 0;
    padding: 0;
}

.profile hr {
    color: white;
}

.profilSelectBtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.profilSelectBtn select {
    border-radius: 20px;
    height: 25px;
    width: 250px;
    margin-top: 10px;
    text-align: center;
}

#memoryProfileImg {
    width: 20vw;
    margin-top: 10px;
}

#history, #ranking {
    border: 1px solid white;
}

#memoryRankingSelect {
    border-radius: 20px;
    height: 25px;
    width: 250px;
    margin-bottom: 10px;
    text-align: center;
}

#history tr td {
    border: 1px solid white;
    padding: 10px;
    text-align: center;
}

#ranking tr td {
    border: 1px solid white;
    padding: 10px;
    text-align: center;
}

@media (max-width: 1450px)  {
    .profileCenter {
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        text-align: center;
        align-items: center;
        width: 400px;
    }
}

@media (max-width: 1250px)  {
    .profileCenter {
        width: 350px;
    }
}

@media (max-width: 1150px)  {
    .profileCenter {
        width: 330px;
    }
}

@media (max-width: 1100px)  {
    .profile_container {
        flex-direction: column;
    }

    .profileCenter {
        width: 300px;
    }
}

/*********************************************
    Game
*********************************************/
#gameScore {
    display: none;
}

#gameTable {
    border-spacing: 15px;
    /* border: 2px solid black; */ /* Directement en JS */
    border-radius: 10px;
    height: 600px;
    margin-top: 30px;
}

#gameTable tr td {
    border: 1px solid black;
    cursor: pointer;
    background: black;
    border-radius: 20px;
    /* perspective: 1000px;
    border: none;
    padding: 0;
    width: 120px;
    height: 50px; */
}

/* .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    border-radius: 20px;
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
}

.card-front {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-back {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-inner.flip {
    transform: rotateY(180deg);
} */

#gameTable tr td img {
/* .card-inner img { */
    height: 120px;
    padding: 15px;
}

/*********************************************
    BUTTONS
*********************************************/

button {
    background: linear-gradient(to right, #004f80, #0048a8);
    width: 150px;
    padding: 13px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 0.95rem;
    margin-top: 20px;
    transition: transform 0.3s ease;
}

button:hover {
    transform: scale(1.05);
}