h1, h2, h3, h4, #global_1, #global2, #round_1, #round_2, #rules u{
  font-family: 'Lato', sans-serif;
  font-weight: normal;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container, #modes, #rules, #winner, #hold_round_0{
  box-shadow:  0px 0px 20px 2px rgba(120,120,120,0.5), 
  0px 2px 4px rgba(120,120,120,0.1),
  0px 4px 8px rgba(120,120,120,0.1),
  0px 8px 16px rgba(120,120,120,0.1);
}
.container{
  background-image: url("images/bggame.jpg");
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  width: 80vw;
  height: 95vh;
  margin-top: 1.5vh;
}
/*_____________________________________________________________________________________________player 1*/

.left, .right{
 display: flex;
 flex-direction: column;
 width: 42%;
 height: 100%;
}
.left{
  background-color: #f4f4f4;
}
.score_glob_1, .score_glob_2{
  width: 380px;
  position: relative;
  top: 18.5vh;
}
.score_glob_1{
  left: 12.7vw;
}
.title_pl_1, .title_pl_2{
  display: flex;
  align-items: center;
  position: relative;
}
.title_pl_1 h1, .title_pl_2 h1{
  display: flex;
  font-size: 3.55vw;
  margin: 0;
}
.title_pl_1 h1{
  margin-right: 1.8vw;
}
#led_1, #led_2{
  width: 1.5vw;
}
#global_1, #global_2{
  display: flex;
  font-size: 6vw;
  color: #dc3545;
  margin: 0;
  margin-top: 1.7vh;
}
#global_1{
  margin-left: 3.8vw;
}
.current_1, .current_2{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #dc3545;
  width: 9.6vw;
  position: relative;
  top: 39vh;
}
.current_1{
  left: 15.4vw;
}
.current_1 h4, .current_2 h4{
  font-size: 1.1vw;
  margin-top: 1.8vh;
  margin-bottom: 1.3vh;
}
#round_1, #round_2{
  font-size: 2.55vw;
  color:white;
  margin: 0;
  margin-bottom: 1.3vh;
}

/*______________________________________________________________________________________________buttons*/

.center{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("images/bggame.jpg");
  background-repeat: no-repeat;
  background-position: center;
  width: 250px;
  height: 100%;
}
#btn_new_game{
  cursor: pointer;
  border: none;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  top:4vh;
}
#btn_new_game h3{
  font-size: 1.45vw;
}
#btn_new_game img{
  width: 1.9vw;
  margin-right: 10%;
}
#img_dices{
  background-color: white;
  box-shadow:  0px 0px 30px 2px rgba(210,208,208,0.5), 
  0px 2px 4px rgba(210,208,208,0.1),
  0px 4px 8px rgba(210,208,208,0.1),
  0px 8px 16px rgba(210,208,208,0.1);
  position: relative;
  width: 8vw;
  top: 17.5vh;
}
#btn_roll_dice{
  cursor: pointer;
  border: none;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  top: 35vh;
}
#btn_roll_dice h3{
  font-size: 1.45vw;
}
#btn_roll_dice img{
  width: 2vw;
  margin-right: 10%;
}
#btn_hold{
  cursor: pointer;
  border: none;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  top: 36.2vh;
}
#btn_hold h3{
  font-size: 1.45vw;
}
#btn_hold img{
  width: 1.5vw;
  margin-right: 10%;
}
/*____________________________________________________________________________________________player 2*/
.right{
  background-color: #fbfbfb;
  align-items: end;
}
.score_glob_2{
  right: 8.8vw;
}
.title_pl_2{
  justify-content: end;
}
.title_pl_2 h1{
  margin-right: 2.2vw;
}
#global_2{
  justify-content: end;
  margin-right: 8vw;
}
.current_2{
  right: 15.4vw;
}

/*__________________________________________________________________________________________hidden windows*/


/*choice player*/

#modes{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-image: url('images/bgmodwin.jpg');
  background-position: center;
  position: absolute;
  width: 40vw;
  height: 30vh;
}
.wrap_btn_rules{
  display: flex;
  justify-content: center;
}
#btn_rules{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  margin-top: 3vh;
}
#btn_rules h2{
  font-size: 1vw;
  margin:0;
}
#btn_rules img{
  width: 1vw;
  margin-right: 1vw;
}
.wrap_btn_players{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 40vw;
}
#btn_one_player, #btn_two_players{
  cursor: pointer;
  border: none;
  background-color: #dc3545;
  color: white;
  width: 15vw;
  height: 10vh;
}
#btn_one_player h1, #btn_two_players h1{
  font-size: 2vw;
}
.or{
  font-size: 2vw;
}
#btn_two_players{
  color: black;
}
/*display rules*/
#rules{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('images/bgmodwin.jpg');
  background-position: center;
  position: absolute;
  width: 70vw;
}
#rules p{
  font-size: 1.5vw;
  margin-left: 2vw;
  margin-right: 2vw;
}
#close{
  font-size: 1vw;
  cursor: pointer;
  background-color: #dc3545;
  border: none;
  color: white;
  text-align: center;
  width: 4vw;
  height: 4vh;
  margin: 3vw;
}

/*display winner*/
#winner{
  background-image: url('images/bgmodwin.jpg');
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  border:solid 2px #dc3545;
}
#winner h1{
  font-size: 3vw;
  margin-left: 7.2vw;
  margin-right: 7.2vw;
}
#winner h2{
  font-size: 5vw;
  color: #dc3545;
}
.win_pl{
  margin-top: 0;
  margin-bottom: 0;
}
#num_win{
  margin-top: 1vh;
  margin-bottom: 1vh;
  font-weight: bold;
}
.win{
  margin-top: 0;
  margin-bottom: 0;
}

/*display if  player hold zero to global*/
#hold_round_0{
  background-image: url('images/bgmodwin.jpg');
  background-position: center;
  display: flex;
  position: absolute;
}
#hold_round_0 h1{
  font-size: 3vw;
  color: #dc3545;
  margin: 2.3vw;
}

/*__________________________________________________________________________________________________________*/
/*___________________________________________________________________________________________@MEDIA MAX 640*/

@media screen and (max-width: 640px){
  .container{
    width: 90vw;
  }

/*___________________________________________________________________________________________________*/  
/*___________________________________________________________________________________________PLAYER 1*/

  .left, .right{
    width: 30%;
  }
  .score_glob_1{
    left: 5vw;
  }
  .title_pl_1 h1, .title_pl_2 h1{
    font-size: 7vw;
    margin: 0;
  }
  .title_pl_1 h1{
    margin-right: 1.8vw;
  }
  #led_1, #led_2{
    width: 2vw;
  }
  #global_1{
    font-size: 10vw;
    margin-left: 9vw;
  }
  .current_1, .current_2{
    width: 20vw;
    top: 65vh;
  }
  .current_1{
    left: 10vw;
  }
  .current_1 h4, .current_2 h4{
    font-size: 3vw;
  }
  #round_1, #round_2{
    font-size: 5vw;
  }
  .center{
    width: 350px;
  }

  /*_________________________________________________________________________________________*/
  /*________________________________________________________________________________BUTTONS*/
  
  #btn_new_game h3{
    font-size: 4vw;
  }
  #btn_new_game img{
    width: 3vw;
    margin-right: 5%;
  }
  #img_dices{
    width: 20vw;
    top: 30vh;
  }
  #btn_roll_dice h3{
    font-size: 4vw;
  }
  #btn_roll_dice img{
    width: 3.5vw;
    margin-right: 5%;
  }
  #btn_hold h3{
    font-size: 4vw;
  }
  #btn_hold img{
    width: 3vw;
    margin-right: 5%;
  }

  /*____________________________________________________________________________________________________*/
  /*___________________________________________________________________________________________PLAYER 2*/
  .score_glob_2{
    right: 2vw;
  }
  .title_pl_2 h1{
    margin-right: 2.2vw;
  }
  #global_2{
    font-size: 10vw;
    margin-right: 13vw;
  }
  .current_2{
    right: 10vw;
  }

/*_____________________________________________________________________________________________*/
/*_______________________________________________________________________________HIDDEN WINDOWS*/

  #modes{
    width: 70vw;
    height: 20vh;
  }
  .wrap_btn_rules{
    display: flex;
    justify-content: center;
  }
  #btn_rules h2{
    font-size: 3vw;
    margin:0;
  }
  #btn_rules img{
    width: 3.3vw;
    margin-right: 10px;
  }
  .wrap_btn_players{
    width: 70vw;
    height: 15vh;
  }
  #btn_one_player, #btn_two_players{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 27vw;
    height: 8vh;
  }
  #btn_one_player h1, #btn_two_players h1 {
    font-size: 4vw;
  }
  .or{
    font-size: 4vw;
  }
  #rules{
    width: 80vw;
  }
  #rules p{
    font-size: 3vw;
    margin-left: 2vw;
    margin-right: 2vw;
  }
  #close{
    font-size: 2vw;
    cursor: pointer;
    border:none;
    background-color: #dc3545;
    color: white;
    text-align: center;
    width: 10vw;
    margin: 3vw;
  }
}
