:root{
	--width: 61svw;
}

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

		basic style

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

body{
	background-color: var(--blue);
		background-image: url("../background/05.gif");
		background-repeat: repeat;
		background-size: initial;
}

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

		main sectionnn

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

main{
	width: var(--width);
	transform: translateX(calc(100svw - var(--width) - 2em));
	margin: 5svh 0;
}

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

	title floating at the top

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

h1{
	color: var(--white);
	text-shadow:
		0.05em 0.05em var(--blue),
		-0.05em -0.05em var(--blue),
		-0.05em 0.05em var(--blue),
		0.05em -0.05em var(--blue),
		0.066em 0.05em var(--aqua2),
		-0.1em -0.066em var(--aqua0)
		;
}

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

	diary entries!!!

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

main > div{
	background-color: var(--aqua);
	background-image: url("../background/00.png"), url("../background/02.png");
	background-repeat: repeat-y, repeat;
		background-position: calc(100% - 0.5em) 0, 0;
		background-size: 6svw auto, 8%;
	padding: 0.5em 1.15em;
	padding-right: calc(6svw + 1.33em);
	border: 0.3svw solid var(--blue);
	outline: 0.2svw solid var(--white);
}

main > div:not(:first-child){
	margin-top: 2em;
}

.sticker{
	float: left;
	max-width: 33%;
	margin: 0.5em;
	margin-left: 0;
}

.gallery{
	display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
}

.gallery a{
	max-width: 32%;
}

.gallery img{
	max-width: 100%;
}

h2, p, main > div a, details{
	text-shadow:
		0.04em 0.04em rgba(var(--shadow-rgb),0.1),
		-0.04em -0.04em rgba(var(--shadow-rgb),0.1),
		-0.04em 0.04em rgba(var(--shadow-rgb),0.1),
		0.04em -0.04em rgba(var(--shadow-rgb),0.1)
		;
}

details{
	margin: 1em auto;
}

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

	entry title + subtitle

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

h2, h2 + p{
	text-align: right;
}

h2{
	color: var(--white);
	text-shadow:
		0.05em 0.05em var(--blue),
		-0.05em -0.05em var(--blue),
		-0.05em 0.05em var(--blue),
		0.05em -0.05em var(--blue),
		0.066em 0.05em var(--aqua2),
		-0.1em -0.066em var(--aqua0)
		;
}

h2::before{
	content: "";
	display: inline-block;
		height: 1em;
		width: 50%;
	margin-right: 0.33em;
	transform: translateY(0.2em);
	background-image: url("../pixel/bone_C_01.png");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
}

h2 + p{
	color: var(--blue);
	font-weight: bold;
	font-size: 1.25em;
	transform: translateY(-0.5em);
	margin: 0;
	font-family: "Determination Sans Web", "Determination Sans", "rainyhearts", "JF Dot Izumi Gothic 16", sans-serif;
}

h2 + p::after{
	content: "";
	display: inline-block;
		height: 2em;
		width: 2em;
	margin-left: 0.33em;
	transform: translateY(1em);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
}

main > div:nth-of-type(5n + 1) h2 + p::after{
	background-image: url("../pixel/lawn_sans_01.gif");
}

main > div:nth-of-type(5n + 2) h2 + p::after{
	background-image: url("../pixel/lawn_sans_02.gif");
}

main > div:nth-of-type(5n + 3) h2 + p::after{
	background-image: url("../pixel/lawn_sans_03.gif");
}

main > div:nth-of-type(5n + 4) h2 + p::after{
	background-image: url("../pixel/lawn_sans_04.gif");
}

main > div:nth-of-type(5n) h2 + p::after{
	background-image: url("../pixel/lawn_sans_05.gif");
}

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

		links

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

a{
	color: var(--white);
}

a:hover{
	color: var(--yellow);
}

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

	CUTE PIC ON THE SIDE!!!

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

#vector{
	object-fit: contain;
	max-height: 95svh;
	max-width: calc(100svw - var(--width) - 5svw);
	position: fixed;
	bottom: 2.5svh;
	left: 0;
}