@font-face {
    font-family: 'Redaction';
    src: url('../fonts/Redaction-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: '20';
    src: url('../fonts/Redaction_20-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: '35';
    src: url('../fonts/Redaction_35-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: '70';
    src: url('../fonts/Redaction_70-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


body {
	font-family: 'Redaction';
	font-size: 35px; /* unité de base du rem */
	background-color:black;
	color:black;
	margin: 0; padding:28px;
    width:100%; height:100%;
}

/* les liens */
a { color:red; text-decoration: none; }
a:hover { text-decoration: underline; }

*, *:before, *:after {/* TOUS les éléments de la page... */
    box-sizing: border-box; /* règle les ennuis de padding */
    outline:none; /* pas de cadre de sélection */
}

.clear { clear:both; } /* pour nettoyer après une série de float */

/* css reset */
ul { padding:0; } /* listes à puce */
li { padding:0; list-style: none; }


/* votre style */

#chat-flow { position: relative; } /* pour contebir des choses en absolute si besoin */

/* pour cacher le modèle plus tard */
#dial-modele { display:none; }

.dialog { background-color:black; color:white;
    border:solid 1px white;
	/*font-size:140px;*/
	padding:15px; 
	margin:15px;
	border-radius: 10px; /* bord rond */
	color:grey;
	 }
.dialog.active { /* la phrase la plus récente */
	color:white; } 
.dialog .btns { margin-top:10px;text-align: right;
}
.dialog .btn { /* les boutons d'action */
	display:inline-block; border:solid 1px white;
	padding:5px; margin-right:10px;
	cursor:pointer;
}
.dialog .btn:hover, .dialog .btn.clicked { /* .clicked sera ajouté en js pour indiquer le btn qui a été choisi */
	color:blue; background-color: white; }
.dialog .input {}
.dialog .input input { width:100%;
    padding:2px 5px;
    margin:10px 0 5px 0;
    font-family: 'Redaction'; font-size: 35px; 
    border: none;
    color: blue;
}

.typo2 { font-family: '20'; }
.typo3 { font-family: '35'; }
.typo4 { font-family: '70'; }

.hidden { display:none; }

.vrac { position: fixed;}

.changebg { color: black; background-color: white;}

#casescouleur {

    display:none;
    overflow:auto;
    height:100%;
    background-color:black;
    padding:10px;
    
    border-radius: 11px; /* bord rond */

    }

#casescouleur .carre {
   
    position:relative;
    float:left;
    margin: 10px;
    
    }

#glitch {
    background-color: black;
    width:100%; height: 100%;
    display:none;
   
    padding:0; margin:0;
    outline:none;
}

#glitch img {


    width:100%;
    height:100%;

   
}

#glitchtwo {
    

    display:none;
    padding:0; margin:0;
    outline:none;
}

#glitchtwo img {


    width:100%;
    height:100%;

   
}



/* on peut ajouter des classes css dans le fichier json, 
pour différencier certaines boites */


/* media-queries : altérer le style sous certaines conditions seulement */
@media screen and (max-width:600px){

}