*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.pixelify-sans-pix {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 550;
  font-style: normal;
  font-size: xx-large;
}

body {
    background-image: url("./img/bgpbetter.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgb(41, 42, 49);
}

header {
    margin-left: 12.5%;
    margin-top: 5%;
}


.side {
    float:left;
    padding-left: 50%;
    /*opacity: 0%; */
    justify-content: center;
    animation-name: animSide;
    animation-duration: 1s;
    /*animation-trigger: ;*/
    animation-timing-function:ease-in-out;
    
}

#playable {
    margin-left: 44.3%;
    margin-top: 15.25%;
}

#grille{
    width: 600px;
    height: 600px;
    display: grid;
    grid-column-gap: 22.5px;
    grid-row-gap: 19px ;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    margin: auto;

}

.case{
   background-color: rgba(255, 255, 255, 0.5);
    display: grid;
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
    height: 220px;
    width: 200px;

}


.case:hover {
    background-image: url(./img/hover.png);
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
    animation-name: animHover;
    animation-duration: 1s;
    /*animation-trigger: unset;*/
}

.imgX {
    float: left;
    display: flex;
    opacity: 100%;
    width: 60px;
    height: 60px;
    animation-name: animImg;
    animation-duration: .5s;
    /*animation-trigger: ;*/
    animation-delay: .1s;
}

.imgO {
    float: left;
    display: flex;
    opacity: 100%;
    width: 60px;
    height: 60px;
    animation-name: animImg;
    animation-duration: .5s;
    /*animation-trigger: ;*/
    animation-delay: .1s;
}

.imgFrown {
     float: left;
    display: flex;
    opacity: 100%;
    width: 60px;
    height: 60px;
    animation-name: animImg;
    animation-duration: .5s;
    /*animation-trigger: ;*/
    animation-delay: .1s;

}

/*
.imgX:active {
    float: left;
    display: flex;
    opacity: 100%;
    width: 60px;
    height: 60px;
    animation-name: animImg;
    animation-duration: .5s;
    animation-trigger: inherit;
    animation-delay: .1s;
} 

.imgO:active{
    float: left;
    display: flex;
    opacity: 100%;
    width: 60px;
    height: 60px;
    animation-name: animImg;
    animation-duration: .5s;
    animation-trigger: inherit;
    animation-delay: .1s;
}

.imgFrown:active {
     float: left;
    display: flex;
    opacity: 100%;
    width: 60px;
    height: 60px;
    animation-name: animImg;
    animation-duration: .5s;
    animation-trigger: inherit;
    animation-delay: .1s;
}
*/

#images {
    float: left;
    opacity: 100%;
    margin-top: 15%;
}

#rejouer {
    display: block;
    margin: 0%;
    stroke: rgb(83, 37, 126);
    stroke-width: 10px;
    height: 50px;
    width: auto;
    background-color: rgb(255, 226, 139);
    border-radius: 5%;
    padding: 5px;
}

#rejouer:hover {
    animation-name: animRejouerHover;
    animation-duration: .75s;
    animation-fill-mode: forwards;
}

#rejouer:active {
    animation-name: animRejouer;
    animation-duration: .5s;
    animation-delay: 0s;
}

@keyframes animHover {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes animImg {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes animRejouerHover {
    0%{
        transform: scale(1);
    }

    100%{
        transform: scale(1.15);
    }
}

@keyframes animRejouer {
    0%{
        transform: translateY(0px);
 
    }

    100%{
        transform: translateY(5px);

    }
}

@keyframes animSide {
    0%{
        opacity: 0;
        transform: translateX(-100px);
    }

    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}