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

		variables

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

:root{
	--outline: 0.5svw;
	--margin: 5svh;
}

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

	 basic styling

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

body{
	text-align: center;
	background-image: url("background/02.png");
		background-repeat: repeat;
		background-size: 8%;
}

h1{
	font-size: 4svw;
	margin-top: 0.5em;
}

h1::before, h1::after{
	content: "";
	display: inline-block;
	width: 5em;
	height: 0.5em;
	background-image: url("pixel/bone_03.png");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	margin: 0 0.5em;
	filter: drop-shadow(0.1em 0.1em rgba(var(--shadow-rgb),0.2));
}

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

	 main container

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

main{
	width: 95%;
	margin: var(--margin) auto;
}

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

	BIG BOX THAT HOLDS ALL THE THINGS!

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

.nice{
	display: flex;
		justify-content: space-between;
	background-color: var(--bg-color);
	color: var(--white);
}

.nice{
	padding: 0.75em;
	border: var(--outline) solid var(--white);
	outline: var(--outline) solid var(--blue);
	filter: drop-shadow(0.9svw 0.9svw rgba(var(--shadow-rgb),0.2));
	margin-bottom: calc(1.25 * var(--margin));
}

.nice > div > p:last-child{
	margin-bottom: 0;
}

.cheer p, .confetti{
	background-color: var(--bg-color);
}

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

	classic undertale

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

#classic{
	--bg-color: var(--blue);
}

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

	character pics

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

.win.shake{
	background-image: url("vector/shake.png");
}

.win.peace{
	background-image: url("vector/peace.png");
}

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

		dusttale au!!!

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

#dust, #bernadette{
	--bg-color: var(--black);
}

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

	character pics

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

.win.hood{
	background-image: url("vector/hood.png");
}

.win.slash{
	background-image: url("vector/slash.png");
}

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

	half + half blocks, left + right

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

.nice > div{
	width: calc(50% - 0.33rem);
}

.nice > div:first-child{
	text-align: left;
}

.nice > div:last-child{
	text-align: right!important;
}

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

	small-text "titles" of boxes!!

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

.huh{
	font-size: 0.7em;
	display: inline-block;
	align-self: flex-end;
}

.nice > div:first-child .huh{
	margin-right: 0.66em;
}

.nice > div:last-child .huh{
	margin-left: 0.66em;
}

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

	quote box that extends outwards

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

.nice > div:first-child .cheer > p:last-child, .nice > div:last-child .cheer > p:first-child{
	position: relative;
	width: 166%;
	text-align: center;
	justify-content: center;
}

.nice > div:last-child .cheer > p:first-child{
		left: -66%;
}

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

	top half of the table where it's bisected!

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

.yay{
	display: flex;
}

.cheer, .win{
	width: 50%;
	display: flex;
}

.cheer > p, .confetti, .nice > div > p{
/*	font-size: 0.8em;*/
	border: 0.1em solid var(--white);
	padding: 0.2rem 0.33rem;
	width: 100%;
	box-sizing: border-box;
}

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

	holds the text half

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

.cheer{
	flex-flow: column;
	justify-content: space-between;
}

.cheer > p{
	margin: 0;
	display: flex;
		justify-content: flex-start;
		align-items: center;
	flex: 1;
}

.cheer > p, .cheer > div.confetti{
	margin-bottom: 0.5rem;
}

.nice > div:last-child .cheer > p{
	justify-content: flex-end;
}

.cheer > p:last-child{
	margin-bottom: 0;
}

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

	the bigger box that needs to scroll

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

.cheer > .confetti{
	padding: 0.33em;
	margin: 0;
	flex: 3;
	text-align:left;
	max-height: 16svw;
}

.hugme{
	height: calc(100% - 0.3em);
	margin: 0.2rem;
	padding: 0;
	padding-right: 0.3rem;
}

.confetti .hugme p{
	padding: 0;
	margin: 0;
/*	margin-left: -0.2em;*/
}

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

	holds the cute pics!

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

.win{
	height: 35svw;
	border: 0.1em solid var(--white);
	padding: 0.2em;
	background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
}

/* left side */

.nice > div:first-child .win{
	margin-left: 0.5em;
}

/* right side */

.nice > div:last-child .win{
	margin-right: 0.5em;
}

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

	 bottom part of table with wider boxes

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

.confetti{
	box-sizing: border-box;
	padding: 0.5em;
	margin: 0.5em 0;
	text-align: justify;
}

.nice > div > .confetti{
	height: 33svh;
	overflow: auto;
}

.nice > div > .confetti p{
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 0.5em;
	padding-right: 0.25em;
}

.nice > div > p{
	margin: 0.5em 0;
/*	background-color: red;*/
}