/*\

@font-face

\*/

@font-face {
	font-family:Viking;
	src:url('font/Viking-Normal.ttf');
	font-display:block;
}

/*\

reset

\*/

body {
	margin:0;
	padding:0;
}
fieldset {
	margin:0;
	padding:0;
	border:0;
	outline:0;
}
img {
	margin:0;
	padding:0;
	border:0;
	outline:0;
}
label,
button {
	user-select:none;
	-moz-user-select:none;
	cursor:pointer;
}

/*\

responsive

\*/

html {
   font-size:62.5%;
}

@media screen and (max-width:480px) {
   body {
      font-size:1.2rem;
   }
}
@media screen and (min-width:480px) {
   body {
      font-size:1.4rem;
   }
}
@media screen and (min-width:768px) {
   body {
      font-size:1.6rem;
   }
}
@media screen and (min-width:1280) {
   body {
      font-size:1.8rem;
   }
}

/*\

lang

\*/

body[lang='en'] [lang]:not([lang='en']),
body[lang='fr'] [lang]:not([lang='fr']) {
	display:none;
}

/*\

layout

\*/

html {
	width:100%;
	height:100%;
	font-size:62.5%;
}
body {
   max-width:800px;
   min-height:100%;
	margin:auto;
	display:grid;
	grid-template-columns:100%;
	grid-template-rows:20mm auto;
	grid-template-areas:'header' 'body';
}
header {
	grid-area:header;
	display:flex;
	justify-content:center;
	align-items:center;
}
input[id='toggle'] {
	grid-area:header;
}
label[for='toggle'] {
	grid-area:header;
	justify-self:end;
	align-self:center;
}
form {
	grid-area:body;
}

/*\

select

\*/

form[name='generator'] {
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
}
form[name='generator'] > div {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
}
form[name='generator'] fieldset {
	border-style:solid;
	border-width:1px;
	border-color:rgba(10,10,10,0.1);
}
form[name='generator'] fieldset > legend {
	margin-top:2.5mm;
}
form[name='generator'] fieldset > div {
	display:flex;
	flex-wrap:wrap;
	padding:0 0.25em;
	justify-content:space-evenly;
}
form[name='generator'] fieldset > div > div {
	display:flex;
	flex-direction:column;
	width:6em;
	margin:0 0.25em 0.25em 0.25em;
}
form[name='generator'] fieldset > div > div > div {
	font-size:0.8em;
	text-align:center;
}
form[name='generator'] input[type='radio'] {
	display:none;
}
form[name='generator'] label {
	width:6em;
	height:6em;
}
form[name='generator'] label img {
	width:inherit;
	height:inherit;
}
output {
	justify-self:center;
	display:flex;
	justify-content:center;
	align-items:center;
	height:2em;
	margin:5mm;
	box-sizing:border-box;
	padding:0 10mm;
}

/*\

option

\*/

form[name='settings'] {
	z-index:1;
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
	padding:5em;
}
form[name='settings'] input:invalid ~ div {
	display:none;
}
form[name='settings'] button {
	display:block;
	margin:auto;
	box-sizing:border-box;
	padding:1mm 2mm;
	background:rgb(230,230,230);
	filter:drop-shadow(0 0 1px rgb(100,100,100));
}
form[name='settings'] img {
	margin:auto;
	height:4em;
	mix-blend-mode:multiply;
}

/*\

toggle

\*/

input[id='toggle'] {
	display:none;
}
label[for='toggle'] {
	display:flex;
	width:20mm;
	height:20mm;
	justify-content:center;
	align-items:center;
	font-size:1.4em;
}
label[for='toggle']:hover,
input[id='toggle']:checked + label {
	color:rgb(100,100,100);
}
input[id='toggle']:checked ~ form[name='generator'] {
	opacity:0.1;
}
input[id='toggle']:not(:checked) ~ form[name='settings'] {
	display:none;
}

/*\

style

\*/

html {
	color:rgb(210,210,210);
	background:rgb(10,10,10);
}
body {
	font-family:Viking;
	line-height:1.2em;
	color:rgb(50,50,50);
	background:rgb(225,215,185);
}
@media screen and (min-width:480px) {
   body {
		box-sizing:border-box;
		padding:0 10mm;
		background-image:url('image/layout/border-left.png'),url('image/layout/border-right.png');
		background-size:10mm;
		background-repeat:repeat-y;
		background-position:left,right;
   }
}
header {
	font-size:1.8em;
	background:rgba(100,100,100,0.1);
}
p {
	text-align:justify;
}
a,
a:visited {
	color:rgb(100,100,200);
}
label img {
	--bevel:2.5mm;
	clip-path:polygon(0 var(--bevel),var(--bevel) 0,100% 0,100% calc(100% - var(--bevel)),calc(100% - var(--bevel)) 100%,0 100%);
}
input[type='radio']:checked + label {
	filter:drop-shadow(0 0 1mm rgb(100,100,100));
}
input[type='radio']:checked:active + label {
	filter:drop-shadow(0 0 1.5mm rgb(100,100,100));
}
output {
	font-size:1.8em;
	background-color:rgba(250,250,250,0.6);
	--bevel:2.5mm;
	clip-path:polygon(0 var(--bevel),var(--bevel) 0,100% 0,100% calc(100% - var(--bevel)),calc(100% - var(--bevel)) 100%,0 100%);
}