@font-face {
    font-family: 'icon';
    src: url(assets/icon.ttf) format('truetype');
    font-variation-settings:
        'FILL' 0
}

@font-face {
    font-family: 'font';
    src: url(assets/font.ttf) format('truetype');
}

.icon {
    font-family: icon;
}

img{
    max-width: 100%;
    margin: auto;
}



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: font;
    font-weight: 600;
}

body {
    font-family: fontsans-serif;
    padding: 2vh 6vw;
    color: #ffffff8d;text-align: center;
    background-image: url("assets/back.png");
    background-color: #17313e;
    height: 100vh; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    font-size: 17Px;
}

main {
    color: #17313e;
    background-color: #b8f4f35e;
    box-shadow: 0px 0px 2rem #00000090;
    padding: 2rem;
    
}
main,
.touche,
.attaque{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-radius: 2rem;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 2rem #00000090;
}

button{
    box-shadow: 0px 0px 0.8rem #00000080;
    border: none;
    border-radius: 2rem;
    color:#17313e;
    padding: 1rem;
    width: fit-content;
    margin-top: 1rem;
    font-size: 1.2rem;
}

.attaque:active {
    background-color: #780b2e;
    color: #00000000;
    box-shadow: 0px 0px 10rem#ff0000;
    font-weight: 800;
}

#board {
    margin: 0 auto;
    display: flex;
gap:1rem
}

.cell {
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    z-index: 1;
    max-width: 34vw;
}
.attaque {
   display: flex;
   background-color: #c31348;;
   padding:5rem;
   color: #710527;
   height: fit-content;
   position: relative;
   top : -2rem;
   z-index: 100;
   font-size: 1.3rem;
   font-weight: 800;
}
.points, .attaque{
border-radius: 2rem;
box-shadow: 0px 0px 2rem #00000080;
padding: 1rem;
}
.points {font-size: 1.1rem;
    font-weight: 800;
    background-color: #739fb6;
}

li{text-align: center;
    list-style-type: none;
}

.finish {
    color :#780b2e;
    font-weight: bold
}
hr {
    width: 20rem;
    background-color: #ffffff8d;
    height: 1px;
    border :none
}

.popUp{
    box-shadow: 0px 0px 2rem #00000090;
    padding:3rem 1rem;
    border-radius: 2rem;
    background-image: url("assets/back.png");
    background-color: #17313e;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    position: absolute;
    height: calc( 90vh);
    width: 88vw;
    top : calc(2.5vh);
    left : calc(6vw);
    color:#ffffff;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 1.4rem;
}

.none {display: none;}
.hidden{visibility: hidden;}

#popUpForm{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

input{
    padding: 1rem 2rem;
    border-radius: 2rem;
    border : none;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}
label{margin-top:1rem}

input[type=radio]{
    scale :200%;
    accent-color: #17313e;
}

.points::after { 
    content: " Pv";
  }
#msgAttaque{
    font-size: 1.3rem;
    font-weight: bold;
}

.opacity {
    opacity: 70%;
    filter: grayscale(50%);
    scale: 90%;
}