@font-face {
    font-family:"Pixel" ;
    src: url("../font/pixel.ttf"); 
  }

*{
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    user-select: none;
}

#gameboard{         /*TAILLE DU BAZARD*/
    width : 1000px;         /*1370*/
    height : 320px;         /*430*/
    margin-left: 240px;
    background-color: rgba(228, 0, 0, 0);       /*BACKGROUND DU TERRAIN JOUABLE*/
    border: 2px dotted rgba(255, 0, 0, 0);
    margin-top: 150px;
}

@keyframes animate{
    0%{color: #ff7300;
        transform: scale(1.2);}
    50%{color: #000000;
        transform: scale(1);} 
    100%{color: #ff7300;
        transform: scale(1.2);}
  }

@keyframes reverseAnimate{
    0%{color: #000000;}
    50%{color: #ff7300;
        transform: scale(1.2);} 
    100%{color: #000000;
        transform: scale(1);}
  }

body{
    background-color: rgb(2, 2, 65);
    background-image: url("../image/Smash/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: url("../curseur/Mario.cur"), auto;
    overflow-x: hidden;
    overflow-y: hidden;
}

h1{
    font-size: 50px;
    font-family: Pixel;
    color: rgb(0, 0, 0);
    text-shadow: 3px 3px 2px rgb(255, 255, 255);
    text-align: center;
    margin-top: 100px;
    animation: animate 2s ease-in-out infinite;
}

h2{
    font-size: 60px;
    font-family: Pixel;
    color: rgb(0, 0, 0);
    text-shadow: 3px 3px 2px rgb(255, 255, 255);
    text-align: center;
    animation: reverseAnimate 2s ease-in-out infinite;
}

#combattant img{
    width: 120px;
    margin-top: 470px;
    margin-left: 500px;
}

.warrior{
    display: inline-block;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 110px;
    transition: all 500ms ease-in;
    transform: scale(1);   
    cursor: url("../curseur/J1.cur"), auto;
}

.warrior:hover{
    transition: all 300ms ease-in;
    transform: scale(1.3);
    filter: brightness(110%);
}

.choix{
    display:flex;
    justify-content: center;
}

.choix:has(.warrior:hover)>
    .warrior:not(:hover)
{
    transition: all 300ms ease-in;
    transform: scale(0.8);
    filter: brightness(50%);
}

#start_button{
    text-align:center;
}

#bouton_jouer{
    font-family: Pixel;
    font-size: 50px;
    text-decoration: none;
    border-style: none;
    background-color: transparent;
    margin-top: 150px;
    color: white;
    text-shadow: 3px 3px 2px rgb(0, 0, 0);
    cursor: url("../curseur/Mario.cur"), auto;
}

#bouton_jouer:hover{
    color :#ff7300;
}

#joueur_1{
    position: relative;
    height: 1px;
    width: 120px;
}
#j1{    /*taille joueur 1*/
    height: 150px;
}

#joueur_2{
    position: relative;
}
#j2{    /*taille joueur */
    height: 150px;
}

#player1_bdv{
    width: 200px;
    height: 20px;
    background-color: #ddd;
    margin-bottom: 10px;
    position: absolute;
  }

  
#player1_bdv-inner {
    height: 100%;
    background-color: #4caf50;
  }

#player2_bdv{
    width: 200px;
    height: 20px;
    background-color: #ddd;
    margin-bottom: 10px;
    position: absolute;
    display: flex;
    justify-content: flex-end;
}

  
#player2_bdv-inner {
    height: 100%;
    background-color: #4caf50;
}



@media screen and (min-width: 1000px){   /*taille écran PC portable = 1662px */
   
    body{
        background-color: rgb(2, 2, 65);
        background-image: url("../image/Smash/background.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        cursor: url("../curseur/Mario.cur"), auto;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    h1{
        font-size: 25px;
    }
    h2{
        font-size: 25px;
    }

    .warrior{
        width: 150px;
    }

    #joueur1{
        height : 200px;
    }
 }