/*\

global layout

\*/

html,
body,
main {
   width:100%;
   height:100%;
}

/*\

layout

\*/

main {
   display:grid;
   grid-template-columns:1fr;
   grid-template-rows:1fr;
   grid-template-areas:'viewport';
   justify-items:center;
   align-items:center;
   overflow:hidden;
}
main > * {
   grid-area:viewport;
   display:block;
   /* width:100%; */
   /* height:100%; */
   max-width:100%;
   max-height:100%;
}
main img,
main canvas {
   /* object-fit:contain; */
}
form[name='edit'] {
   position:fixed;
   top:0;
   left:0;
   bottom:1em;
   display:flex;
   /* width:400px; */
   flex-direction:column;
}
form:not([name='edit']) {
   display:none;
}
form[name='edit'] header {
   display:flex;
}

/*\

colour

\*/

body {
   background-color:rgb(60,60,60);
}
form[name='edit'] > section,
form[name='edit'] > fieldset {
   background-color:rgb(230,230,230);
}

/*\

global style

\*/

input[type='checkbox'],
input[type='radio'] {
	display:none;
}
label {
   cursor:pointer;
}

/*\

toggle

\*/

input[id='toggle'] ~ header label[for='toggle'] {
   display:flex;
   width:1em;
   height:1em;
   border-radius:0.5em;
   color:rgb(160,160,160);
   font-size:2em;
   justify-content:center;
   align-items:center;
   margin:0.25em;
}
input[id='toggle']:checked ~ header label {
   background:rgb(230,230,230);
}
input[id='toggle']:not(:checked) ~ header label {
   background:rgb(230,230,230);
}
input[id='toggle']:not(:checked) ~ header ~ *,
input[id='toggle']:not(:checked) ~ header label[for='toggle'] ~ * {
   display:none;
}

/* button */

button,
.button {
	display:inline-block;
	line-height:1.5em;
	box-sizing:border-box;
	padding:0 1em;
	border-style:solid;
	border-width:1px;
	border-color:rgb(127,127,127);
	border-radius:0.25em;
	color:inherit;
	background:transparent;
	cursor:pointer;
}
input[type='file'] {
	position:absolute;
	width:0;
	opacity:0;
	z-index:-1;
}

/* checkbox */

label input[type='checkbox']:checked + span {
   background-color:rgb(200,200,200);
}