:root{
	--width: calc((100svw - 3.33 * 6svw) * 0.42);
}

/*...........................................................

		basic style

..........................*/

main{
	width: calc(100svw - 3.33 * 6svw);
	text-align: center;
	margin: auto;
}

h1{
	font-size: 2em;
	text-align: center;
	margin: 1em auto;
}

#popup section, p, ul, ol, #colours{
	box-sizing: border-box;
	padding: 0.75em;
	background-color: var(--white);
	border: 0.3svw solid var(--blue);
	outline: 0.2svw solid var(--white);
	box-shadow: 0.75svw 0.75svw rgba(var(--shadow-rgb),0.25);
}

p{
	margin-bottom: 1.5em;
}

ul, ol{
	padding-left: 1.5em;
	text-align: left;
}

#heart, .goki, #process > section img{
	filter: drop-shadow(0.33svw 0.33svw rgba(var(--shadow-rgb),0.33));
}

/*...........................................................

	goki no diagram part one!! (maybe the only part, in the end)

..........................*/

.goki{
	max-height: 95svh;
	max-width: 42%;
	object-fit: contain;
	margin: 1svh auto 2.5svh auto;
}

#popup section, #gokidia h1{
	width: calc(var(--width) * 0.85);
}

#gokidia h1{
	margin-top: 0.5em;
	position: absolute;
	text-align: left;
	line-height: 1;
}

/*..........................

	"click on her" directions

..........................*/

#gokidia h1::after{
	content: "Click on her to learn more!";
	text-align: right;
	display: block;
	margin-top: 0.75em;
	font-size: 0.5em;
	text-shadow: 0.033em 0.033em var(--aqua2);
	font-family: "rainyhearts", "JF Dot Izumi Gothic 16", sans-serif;
}

/*........................................

		gokiburi colour scheme!

..........................*/

#colours{
	position: absolute;
		top: 3svh;
		right: 8svw;
	width: 34svw;
	height: auto;
	display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: space-around;
	border-color: var(--aqua2);
	padding: 0.25em;
}

#colours h2{
	width: 100%;
	margin: 0.75em auto;
	margin-top: 0;
	font-size: 1em;
	filter: drop-shadow(0.06em 0.05em var(--grey));
}

#colours h2::before, #colours h2::after{
	content: "";
	display: inline-block;
	background-image: url("pixel/stag.gif");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	height: 0.7em;
	width: 0.7em;
	margin: 0 0.33em;
}

#colours > div{
	width: 25%;
	display: flex;
		flex-flow: column wrap;
		align-items: center;
		justify-content: center;
	font-size: 0.85em;
}

#colours > div > div{
	--size: 2.66svw;
	display: block;
	height: var(--size);
	width: var(--size);
	border-radius: 100%;
	margin-bottom: 0.4em;
	border: 0.15svw solid var(--white);
	outline: 0.1svw solid var(--navy);
	box-sizing: border-box;
/*	filter: drop-shadow(0.33svw 0.1svw rgba(var(--shadow-rgb),0.2));*/
}

.eyes{
	background-color: #85738E;
}

.skin{
	background-color: #DDAE91;
}

.hair{
	background-color: #5E4A67;
}

.clothes{
	background-color: #FFD56B;
}

/*........................................

		pop up boxes

..........................*/

/*..........................

	container for popups

..........................*/

#popup section{
	display: none;
	height: auto;
	z-index: 99999;
	max-height: 92svh;
}

#popup section:target{
	display: block;
}

.dogbed{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: transparent;
}

#popup section img, .dogbed img{
	max-width: 100%;
}

/*..........................

	link to close the box

..........................*/

#popup section a:last-child{
	display: block;
	margin-top: 0.25em;
}

/*..........................

	different pop ups!!!

..........................*/

#pin{
	top: 5svh;
	left: 58svw;
	width: calc(var(--width) * 1.05)!important;
}

#pin img{
	max-height: 83svh;
	width: calc(50% - 0.5em);
	float: left;
	margin-right: 0.5em;
}

#translation{
	text-align:left;
	margin: 0.75em auto;
	line-height: 1.5;
}

#translation span{
	font-variant: small-caps;
	font-size: 1.05em;
	font-weight: bold;
}

#ahoge{
	top: 28svh;
	left: 10svw;
}

#outfit{
	top: 50svh;
	left: 8svw;
}

#socks{
	left: 56svw;
	top: 53svh;
}

#collar{
	left: 10svw;
	top: 10svh;
}

#shoelaces{
	top: 4svh;
	left: 9svw;
}

#shoelaces img{
	max-height: calc(61svh - 0.33em);
	display: block;
	margin: auto;
	margin-bottom: 0.33em;
}

#sleeve{
	top: 7svh;
	left: 6svw;
	width: calc(var(--width) * 1.1)!important;
}

/*...........................................................

		older design discussion

..........................*/

#oldver{
	display: flex;
		align-items: center;
		justify-content: center;
	width: 100%;
}

#heart{
	max-width: 40svw;
	min-height: 66svh;
	max-height: 75svh;
	margin-top: 3em;
	margin-right: 5%;
	object-fit: contain;
}

/*...........................................................

		redesign process discussion

..........................*/

#process{
	text-align: left;
}

#process p, #process ol{
	margin: 1.5em auto;
}

#process p{
	width: 80%;
	overflow: auto;
}

#process ol{
	width: 50%;
}

#process p img{
	border: 0.15svw solid var(--black);
	width: 42%;
}

/*..........................

	alternates float sides

..........................*/

#process p:nth-child(odd) img, #process p:nth-child(odd) iframe{
	float: left;
	margin-right: 1em;
}

#process p:nth-child(even) img, #process p:nth-child(even) iframe{
	float: right;
	margin-left: 1em;
}

/*..........................

		larger img

..........................*/

#process p img.wide{
	width: 75%;
	margin: 1em auto;
	height: auto;
	display: block;
	float: none;
}

/*..........................

	"conclusions" container

..........................*/

#process > section{
	display: flex;
		align-items: flex-start;
		justify-content: space-around;
	margin-top: -1.25em;
}

#process > section a{
	width: 50%;
	margin-left: 2%;
	align-self: center;
}

#process > section a img{
	max-width: 100%;
}

#process > section h2{
	margin: 0.25em auto 0.5em auto;
	filter: drop-shadow(0.075em 0.06em var(--grey));
}