html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/************************************************************
 *              DEBUT DE LA FEUILLE DE STYLE                *
 ************************************************************/
 html, body {
    height: 100%;
  }

  
body {
    display: block;
    font-size: 1.5rem;
    background: linear-gradient(180deg, rgb(55, 106, 106), #49c3a19e);
    background-repeat: repeat;
}



/*
gestion des bouton radio et des blocks
*/

body > div, body > input[type=radio] {
    display: none;   
}

input[type=radio]:checked + div {
    display: block;   
}

/*
titre
*/



.warp {
    display: block;
    position: relative;
    width: 38.75rem;
    height: 17.312rem;
    font: normal 3.187rem/1 ultra;
    left: 50%;
    transform: translate(-50%, -15%);
    
}

[class*="warp__"] {
    display: table;
    position: absolute;
    font-weight: 1000;
    font-size: 1.2em;
    height: -webkit-fill-available;
    height: fill-available;
    height: -moz-available;
    transform-origin: 0% 40%;
    user-select: none;
    height: 13rem;
}

.warp__0 {
    
    transform: translate(5.864rem, 10.803rem) rotate(-1.086745rad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, red, rgb(255, 81, 0));

}

.warp__1 {
    
    transform: translate(7.05rem,9.066rem) rotate(-0.9066rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(255, 81, 0), rgb(255, 145, 0));
}

.warp__2 {
    
    transform: translate(8.364rem,7.479rem) rotate(-0.721122rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(255, 145, 0), rgb(255, 208, 0));
}

.warp__3 {
    
    transform: translate(10.364rem,6.192rem) rotate(-0.549089rad);
}

.warp__4 {
    
    transform: translate(12.016rem,5.238rem) rotate(-0.396518rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(255, 208, 0), rgb(217, 255, 0));
}

.warp__5 {
    
    transform: translate(14.259rem,4.542rem) rotate(-0.24948rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(217, 255, 0), rgb(115, 255, 0));
}

.warp__6 {
    
    transform: translate(16.256rem,4.175rem) rotate(-0.125599rad);
}

.warp__7 {
    
    transform: translate(18.178rem,4.047rem) rotate(-0.010001rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(115, 255, 0), rgb(0, 255, 128));
}

.warp__8 {
    
    transform: translate(19.997rem,4.146rem) rotate(0.110407rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(0, 255, 128), rgb(0, 255, 242));
}

.warp__9 {
    
    transform: translate(22.137rem,4.428rem) rotate(0.218032rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(0, 255, 242), rgb(0, 140, 255));
}

.warp__10 {
    
    transform: translate(23.352rem,4.891rem) rotate(0.329926rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(0, 140, 255), rgb(0, 17, 255));
}

.warp__11 {
    
    transform: translate(25.376rem,5.68rem) rotate(0.471284rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(0, 17, 255), rgb(111, 0, 255));
}

.warp__12 {
    
    transform: translate(26.98rem,6.452rem) rotate(0.586084rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(111, 0, 255), rgb(204, 0, 255));
}

.warp__13 {
    
    transform: translate(27.885rem,7.479rem) rotate(0.721121rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(204, 0, 255), rgb(255, 0, 221));
}

.warp__14 {
    
    transform: translate(29.324rem,9.066rem) rotate(0.906599rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(255, 0, 221), rgb(255, 0, 140));
}

.warp__15 {
    
    transform: translate(30.612rem,10.878rem) rotate(1.094035rad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(left, rgb(255, 0, 140), rgb(255, 0, 55));
}

/*
boutons
*/

.btnLogin , .btnCreer, input[type="text"]{
    display: block;
    margin: 1rem auto;
    position: relative;
    width: 22rem;
}

input[type="button"], input[type="text"] {
    height: 3rem;
    font-size: 1.2rem;
    border-radius: 0.5rem;
}

input[type="button"]{
    cursor: pointer;
    border: outset;
    background-color: floralwhite;
    border-width: 0.15rem;  
}
 
input[type="button"]:not(#rulesButton){
    border-image: linear-gradient(to right, 
    red,    
    orange, 
    yellow, 
    green,  
    blue,   
    indigo, 
    violet  
  ) 1;  
  border-image-slice: 1;  
  border-image-repeat: round;  

}



input[type="button"]:hover{
    animation: 0.05s linear 0s 1 btn;
    border-width: 0.1rem 0.3rem 0.3rem 0.1rem;
}

input[type="text"]{
    text-align: center;
}


input[type="button"]:active{
    border: inset;
}

@keyframes btn{
    0% {
        border-width: 0.15rem;        
    }

    100% {
        border-width: 0.1rem 0.3rem 0.3rem 0.1rem;
    }
}

.selectNiv {
    width: 2.5rem;
}

#minTimeTurn {
    width: 3rem;
}

input[type="text"], input[type="button"] {
    display: block;
}

input[type="text"], .btnCreer, input[type="radio"], select, label, p{
    position: relative;
    margin: 1rem 0;
}

input[type="text"], .btnCreer, p {
    left: 50%;
    transform: translate(-50%,0);
}

div {
    text-align: center;
}

.btnRetour {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 6rem;
    margin: 0 0;
}

.radioRole{
    display: none;
}

label {
    margin: 1rem 0;
}

.radioRole + label {
    border: solid;
    border-color: transparent;
    margin: 1rem 1rem;
    width: 14rem;
    height: 3rem;
    display: inline-block;
    padding: 0.5rem 0 0 0;
    cursor: pointer;
}

.radioRole:checked + label {
    font-size: 3rem;
}

#radioAttaquant:checked + label, #radioAttaquantIA:checked + label, #radioAttaquant:hover + label, #radioAttaquantIA:hover + label{
    color: red;
}

#radioDefenseur:checked + label, #radioDefenseurIA:checked + label, #radioDefenseur:hover + label, #radioDefenseurIA:hover + label{
    color: blue;
}

select{
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
}

select option[value="1"], select[value="1"]{
    color: rgb(230, 198, 22);
}

select option[value="2"]{
    color: rgb(230, 116, 22);
}

select option[value="3"]{
    color: rgb(230, 64, 22);
}

div.waitingGame {
    border: outset;
    width: 23rem;
    margin: 1rem auto;
    border-radius: 1rem;
    border-width: 0.3rem;
}


div.waitingGame:hover{
    animation: 0.05s linear 0s 1 divWaiting;
    border-width: 0.3rem 0.5rem 0.5rem 0.3rem;
}

div.waitingGame:active {
    border: inset;
    border-width: 0.3rem;
}

@keyframes divWaiting{
    0% {
        border-width: 0.3rem;        
    }

    100% {
        border-width: 0.3rem 0.5rem 0.5rem 0.3rem;
    }
}

/* PALETTE DE COULEUR */
#colors{
    display: none;
    border: solid;
    background-color: rgb(255, 249, 216);
    width: fit-content;
    padding: 0 10px;
    position: fixed;
    top : 50%;
    left: 50%;
    z-index: 1;
    cursor: grab;
}

#colors > #colorList div{
    width: 6vh;
    height: 6vh;
    border-radius: 5vh;
    margin: 1vh;
    display: inline-block;
    border: solid;
    border-color: transparent;
}

#colors > #colorList div:hover{
    border-color: yellow;
    cursor: pointer;
}

#colors > p{
    text-align: center;
}

#colors > #colorList div.impossibleColor:hover{
    cursor: not-allowed;
}

div#croix, span#croixRules {
    position: relative;
    width: fit-content;
    left: 0rem;
    top: 0.5rem;
    cursor: pointer;
    user-select: none;
}

/* TEMP */
#temp {
    display: block;
}


div#tour {
    color: red;
    font-size: 2rem;
    padding-bottom: 3rem;
}

input#btnQuitter {
    margin: 0 auto;
}

p#textEndGame {
    font-size: 3rem;
}

#EndGame{
    display: none;
}

/* REGLE */

#rules {
    display: none;
    position: fixed;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid;
    width: 40rem;
    height: 33rem;
    border-radius: 1rem;
    background-color: antiquewhite;
    padding: 2rem 1rem;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #2faf5c #dddddd00;
}

input#rulesButton {
    right: 1rem;
    top: 1rem;
    position: absolute;
    height: 3rem;
    width: 3rem;
    color: blue;
    font-size: 2rem;
    font-weight: bold;
}

span#croixRules {
    position: sticky;
    top: -1rem;
    left: 0;
    float: left;
    margin: -1rem;
    z-index: 1;
}

.attaquant{
    color: red;
}

.defenseur{
    color: blue;
}

#rules img{
    width: 25rem;
}

#rules li{

    float: left;
    
}

h2 {
    font-weight: bold;
    font-size: 2.5rem;
    padding-bottom: 1rem;
}

p{
    margin : 1.5rem 0;
}





#abandon{
    display: none;
    position: absolute;
    top: 1rem;
    right: 5rem;
}