:root {
   --primary:rgb(214,166,77);
   --secondary:rgb(89,95,126);
}

/*\

layout

\*/

body {
	display:flex;
	width:calc(210mm + 4em);
	height:100vh;
	flex-direction:column;
	margin:auto;
	background-color:rgb(51,51,51);
	overflow:hidden;
}
main {
	flex-grow:1;
   display:flex;
   width:100%;
   height:100%;
	justify-content:center;
	align-items:center;
}
footer {
	width:100%;
	height:2.6em;
	box-sizing:border-box;
	padding:0 0.4em;
}

/*\

image

\*/

#viewer {
   flex-grow:1;
	display:flex;
	width:100%;
	height:100%;
	justify-content:center;
	align-items:center;
   perspective:1000mm;
   perspective-origin:50% 75%;
	overflow:hidden;
}
#image {
   width:210mm;
   height:148mm;
   transform-origin:50% 75%;
   transform-style:preserve-3d;
}
#image > * {
   position:absolute;
}
#image:not([style]) {
   transform:rotateX(0) rotateY(0);
   transition-property:transform;
   transition-duration:200ms;
   transition-timing-function:linear;
}
#border feFlood {
   flood-color:var(--primary);
   transition-property:flood-color;
   transition-duration:1000ms;
   transition-timing-function:ease;
}
#background {
	filter:url(#border);
}
#background rect {
   transition-property:fill;
   transition-duration:1000ms;
   transition-timing-function:linear;
}
#image.night #background rect {
   fill:var(--secondary);
}
#image.day #background rect {
   fill:var(--primary);
}
#title {
   fill:none;
   stroke:var(--primary);
   stroke-linecap:square;
   stroke-linejoin:bevel;
   stroke-width:4.4;
   transition-property:stroke;
   transition-duration:1000ms;
   transition-timing-function:linear;
   filter:url(#outline);
}
#silhouette feFlood {
   transition-property:flood-opacity;
   transition-duration:1000ms;
   transition-timing-function:linear;
}
#image.night #silhouette feFlood {
   flood-opacity:1;
}
#image.day #silhouette feFlood {
   flood-opacity:0;
}
#image .sprite {
   filter:url(#silhouette);
}

/*\

form

\*/

form {
	display:flex;
	width:100%;
	height:100%;
	align-items:center;
}
form label {
	width:1.6em;
	height:1.6em;
	margin:0 0.2em;
}
form label:nth-of-type(3) {
	flex-grow:1;
	text-align:center;
	margin-right:4em;
}
form label:nth-of-type(3) span {
	max-width:8em;
}
label input {
	display:none;
}
label input + span {
	display:inline-block;
	width:100%;
	height:100%;
	border-radius:0.2em;
	box-shadow:0 0 0.2em 0 rgb(71,71,71);
	overflow:hidden;
	cursor:pointer;
}
label input[type='color'][name='primary'] + span {
	background-color:var(--primary);
}
label input[type='color'][name='secondary'] + span {
	background-color:var(--secondary);
}
label input[type='checkbox'] + span {
	background-color:var(--primary);
   transition-property:background-color;
   transition-duration:500ms;
   transition-timing-function:linear;
}
label input[type='checkbox']:checked + span {
	background-color:var(--secondary);
}

/*\

animation

#silhouette feFlood {
   animation-name:silhouette;
   animation-duration:20s;
   animation-timing-function:linear;
   animation-delay:0s;
   animation-iteration-count:infinite;
   animation-fill-mode:both;
   animation-direction:alternate;
   animation-play-state:running;
}
@keyframes silhouette {
   0% {
      flood-opacity:1;
   }
   100% {
      flood-opacity:0;
   }
}
#background rect {
   animation-name:background;
   animation-duration:20s;
   animation-timing-function:linear;
   animation-delay:0s;
   animation-iteration-count:infinite;
   animation-fill-mode:both;
   animation-direction:alternate;
   animation-play-state:running;
}
@keyframes background {
   0% {
      fill:rgb(89,95,126);
   }
   100% {
      fill:rgb(214,166,77);
   }
}

\*/