/* VARIABLES */
:root
{
--saumon: rgb(220,200,170);
--saumon_fonce: rgb(190,170,140);
--vert: rgb(200,220,170);
--gris: rgb(75,75,75);
}

/* GLOBAL */

/**::-moz-selection {}
*::selection {}*/
body
{
background: rgb(50,50,50);
text-align: center;
}
html, body, p, li, button, input, textarea, select
{
color: black;
font-family: 'Open Sans', Sans-Serif;
font-weight: 400;
font-size: 13px;
}
h1, h2, h3, h4, h5, h6
{
color: black;
font-family: 'Open Sans Condensed', Sans-Serif;
font-weight: 300;
font-size: 20px;
text-transform: uppercase;
}
hr {background: black;}

/* DEFILE */

#defile
{
position: absolute;
width: 100%;
height: 10vh;
left: 0;
bottom: 5vh;
background: transparent;
border: none;
}
#defile span
{
display: block;
width: 2.5vh;
height: 2.5vh;
margin: auto;
margin-top: -2.5vh;
border-right: 1.5vh solid black;
border-bottom: 1.5vh solid black;
transform: rotate(45deg);
animation: defile 0.5s infinite alternate;
}
@keyframes defile {
	from {transform: translateY(0vh) rotate(45deg);}
	to {transform: translateY(2vh) rotate(45deg);}
}

/* CRYPT */

form
{
box-sizing: border-box;
width: 100%;
max-width: 320px;
margin-top: 20vh;
margin-left: auto;
margin-right: auto;
padding: 16px;
font-size: 0px;
}
form *
{
font-size: 15px;
font-weight: 600;
}
form > input
{
display: inline-block;
box-sizing: border-box;
padding: 0.4em 0.5em;
border: 2px solid var(--saumon);
text-align: center;
text-transform: uppercase;
}
form > input[type=text]
{
width: calc(100% - 48px);
border-radius: 4px 0 0 4px;
color: var(--gris);
}
form > input[type=text]:hover, form input[type=text]:focus {box-shadow: inset 0 0 10px var(--saumon_fonce);}
form > input[type=submit]
{
width: 48px;
margin-bottom: 8px;
background: var(--saumon);
border-radius: 0 4px 4px 0;
color: white;
}
form > input[type=submit]:hover {background: var(--saumon_fonce);}

/* Options */
form fieldset
{
box-sizing: border-box;
overflow: hidden;
max-height: 0px;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0);
border-radius: 4px;
transition: max-height 1s, border-color 1s;
}
form fieldset.on
{
max-height: 512px;
border-color: rgba(255,255,255,1);
}
form fieldset legend
{
margin-left: auto;
padding: 0 8px;
color: white;
font-size: 11px;
text-align: center;
cursor: pointer;
}
form fieldset label
{
display: block;
box-sizing: border-box;
text-align: left;
padding: 4px 0;
color: white;
font-size: 13px;
cursor: pointer;
}
form fieldset label input, form fieldset label input + span
{
margin-right: 0.25em;
vertical-align: middle;
border: 1px solid var(--saumon);
border-radius: 4px;
}
form fieldset label input {padding: 4px;}
form fieldset label input[type=checkbox] {display: none;}
form fieldset label input[type=checkbox] + span
{
display: inline-block;
width: 24px;
height: 24px;
}
form fieldset label input[type=checkbox]:checked + span {background: var(--saumon);}
form fieldset label input[type=number]
{
width: 36px;
background: transparent;
color: var(--saumon);
}

/* Résultat */
form p
{
box-sizing: border-box;
width: 100%;
margin-top: 16px;
padding: 0.4em 0.5em;
background: var(--vert);
border-radius: 4px;
color: var(--gris);
font-size: 20px;
font-weight: 400;
}
form p button
{
float: right;
background: transparent;
border: none;
transition: opacity 0.5s, transform 0.5s ease, filter 0.5s;
}
form input[name=cr]
{
opacity: 0;
font-size: 0px;
}