body > .container
		{
			position: fixed;
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			font-family: Nunito, sans-serif;
			font-weight: 200;
			letter-spacing: 0.2px;
			color: rgba(255, 255, 255, 0.6);
			background-color: rgb(41, 41, 63);
			background-image: url(/graphics/wbd26/wbd-bg.png);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;

			overflow-y: auto;
		}

	body > .container > .background
		{
			position: fixed;
			left: 0px;
			top: 0px;
			height: 100%;
			width: 100%;				
			z-index: -1;
		}

	body > .container > .background > *
		{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: contain;
			opacity: 0.7;
		}

	body .background > .bg-top-left
		{
			background-position: top left;
			background-image: url(/graphics/wbd26/bg-top-left.png);
		}
	body .background > .bg-top-right
		{
			background-position: top right;
			background-image: url(/graphics/wbd26/bg-top-right.png);
		}
	body .background > .bg-bottom-left
		{
			background-position: bottom left;
			background-image: url(/graphics/wbd26/bg-bottom-left.png);
		}
	body .background > .bg-bottom-right
		{
			background-position: bottom right;
			background-image: url(/graphics/wbd26/bg-bottom-right.png);
		}





	.container > .title
		{
			display: flex;
			margin-top: 90px;

			font-family: "Nunito Sans", sans-serif;
			font-size: 32px;
			font-weight: 800;
			text-transform: uppercase;
			color: rgb( 255, 255, 255 );
			/* Red outline */
			-webkit-text-stroke: 2px #e74c3c;    /* Red border – adjust thickness */
			text-stroke: 6px #e74c3c;            /* Standard version (still prefixed in some browsers) */

			text-shadow:  0 0 8px rgba( 0, 0, 0, 0.7);   /* soft red glow around the outline */
		}

	.container > .title .text
		{
			max-width: 500px;
			margin: 0px auto;
			text-align: center;
		}

	.container > .bookshelf
		{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
		}

	.container > .bookshelf svg,
	.container > .bookshelf > .bunny
		{
			width: 50vw;
			height: 50vw;
			max-width: 600px;
			max-height: 600px;
		}

	.container > .bookshelf svg
		{
			transform: rotate( -5deg );
			margin-left: 8vw;
			margin-top: 70px;				
		}

	.container > .bookshelf > .bunny
		{
			background-image: url( /graphics/wbd26/bunny-with-book.png );
			background-repeat: no-repeat;
			background-size: contain;
			margin-left: auto;
			margin-right: 8vw;
			margin-right: initial;
			margin-top: 45px;				
		}


	.container > .booklist
		{
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			align-items: center;
			font-family: "Comfortaa", sans-serif;
			font-weight: 400;

			row-gap: 20px;
			padding: 20px;

		}

	.container > .booklist > .row
		{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			padding: 10px 10px;
			padding: 20px;
			margin: 0px 20px;
			max-width: 800px;
			max-width: 600px;
			border-radius: 25px;
			align-items: center;
			justify-content: center;
			width: 100%;
		}



	.container > .booklist > .row:nth-child(odd)
		{
			background-color: rgba(255, 150, 150, 0.4);
			color: rgb(0, 0, 0);
			border-radius: 25px;
		}

	.container > .booklist > .row:nth-child(even)
		{
			background-color: rgba(255, 150, 150, 0.4);
			color: rgb(0, 0, 0);
			border-radius: 25px;
			flex-direction: row-reverse;
		}

	.container > .booklist > [data-clues='0'] .hasclues
		{
			display: none;
		}

	.container > .booklist > :not([data-clues='0']) .hasnoclues
		{
			display: none;
		}

	.container > .booklist .image
		{
			min-width: 100px;
			min-height: 100px;
			width: 100px;
			height: 100px;
			background-size: cover;
			background-repeat: no-repeat;
			margin-left: auto;
		}

	.container > .booklist > .row:nth-child(even) .image
		{
			margin-left: initial;
			margin-right: auto;
		}

	#book-1 .image 
		{
			background-image: url( /graphics/wbd26/book-closed-1.png );				
		}

	#book-2 .image 
		{
			background-image: url( /graphics/wbd26/book-closed-2.png );				
		}

	#book-3 .image 
		{
			background-image: url( /graphics/wbd26/book-closed-3.png );				
		}

	#book-4 .image 
		{
			background-image: url( /graphics/wbd26/book-closed-4.png );				
		}

	#book-5 .image 
		{
			background-image: url( /graphics/wbd26/book-closed-5.png );				
		}

	.row.book
		{
			position: relative;
			overflow: hidden;
		}

	.book:not(.selected) .icons
		{
			visibility: hidden;
			opacity: 0;
		}

	.book[data-found] .text.notfound
		{
			display: none;
		}

	.book:not([data-found]) .text.found
		{
			display: none;
		}

	.book .found .title,
	.book .found .author
		{
			font-weight: 800;
			font-size: large;
		}

	.book .found .description
		{
			font-style: italic;
		}

	.book .icons
		{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			column-gap: 10px;

			font-family: 'Comfortaa';
			text-transform: lowercase;
			background-color: rgb(192 113 113 / 90%);
			background-color: rgb(192 113 113 / 90%);

			opacity: 1;
			transition: all 0.5s ease-in-out;
		}

	.book .icons > *
		{
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			background-color: rgba( 255, 255, 255, 0.9 );
			background-color: rgb(255 252 181 / 60%);
			align-items: center;
			height: fit-content;
			border-radius: 25px;
			padding: 15px;
			font-size: 10px;
			row-gap: 10px;
			border: 1px solid black;
			cursor: pointer;
		}

	.book .icons > * > *
		{
			transform: scale( 1 );
			transition: transform 0.5s ease-in-out;
		}

	.book .icons > *:hover > *
		{
			transform: scale( 1.3 );
		}

	.book .icons > *
		{
			transition: transform 0.7s ease-in-out;
			transform: translate( 0px, 0px ) rotate( 0deg );
		}

	.book:not(.selected)
		{
			cursor: pointer;
		}

	.book.selected .icons > :nth-child( 1 )
		{
			transform: translate( 0px, 5px ) rotate(-12deg);
		}

	.book.selected .icons > :nth-child( 2 )
		{
			transform: translate( 0px, -5px ) rotate( 0deg );
		}

	.book.selected .icons > :nth-child( 3 )
		{
			transform: translate( 0px, 5px ) rotate( 12deg);
		}

	.book .icons img
		{
			width: 30px;
		}

	.book[data-clues='0'] .icons .checklist,
	.book[data-clues='0'] .icons .guess,
	.book[data-found] .icons .guess
		{
			opacity: 0.2;
		}


	.popup.hiddenobjects .image svg
		{
			display: block;
			cursor: zoom-in;
			touch-action: pinch-zoom;
			xposition: absolute;
			xtop: 0;
			xleft: 0;
			width: 100%;
			height: 100%;
			xobject-fit: contain;
			max-height: calc( 100vh - 60px );
		}

	.popup .messages
		{
			user-select: none;
			pointer-events: none;
			transform: translateZ( 0 );
			opacity: 0;

			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: rgba( 0, 0, 0, 0.5 );

			transition: opacity 0.5s ease-in-out;
		}

	.popup .messages:has( > .open)
		{
			pointer-events: auto;
			transform: transform: scale( 0.995 );
			opacity: 1;
		}

	.popup .messages > :not(.open)
		{
			display: none;
		}


	.popup .messages > *
		{
			background-color: rgba( 255, 255, 255, 0.2 );
			border-radius: 25px;
			text-shadow:  0 0 8px rgba( 0, 0, 0, 0.7);   /* soft red glow around the outline */
			margin: 0px 15px;

		}

	.popup .messages .foundaclue
		{
			position: relative;
		}

	.popup .messages .foundaclue .title
		{
			color: rgb( 0, 200, 0 );
		}

	.popup .messages .foundaclue .description,
	.popup .messages .foundaclue .author
		{
			color: rgb( 0, 200, 0 );
			font-style: italic;
		}


	.popup div.donate
		{
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-bottom: -22px;
		}

	.popup div.donate > a
		{
			display: flex;
			border-radius: 15px;
			background-color: rgba(31, 158, 94, 1);
			color: rgba(255, 50, 51, 1);
			color: rgba(255, 255, 255, 1);
			z-index: 1;
			padding: 10px;
			cursor: pointer;
			font-size: larger;
			font-family: 'Comfortaa';
			border: 1px solid rgba( 0, 0, 0, 0.8);
		}

	.popup div.donate > a:not([href])
		{
			background-color: rgba( 255, 50, 51, 1 );
		}

	.popup div.donate > a:not([href])::before
		{
			content: "Please wait, loading link.";
		}


	.popup div.donate > a[href]::after
		{
			content: "Donate here!";
		}

	.popup:not(.waiting) .foundaclue .awaiting
		{
			display: none;
		}

	.popup .foundaclue .awaiting
		{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

	.popup .foundaclue .awaiting > img
		{
			display: inline-block;
			max-height: 70%;
		}


	/*
		cluelist
	*/

	.popup.cluelist
		{
			
		}

	.popup.cluelist > .content
		{
			min-width: 400px;
			padding: 0px;
		}

	.popup.cluelist > .content > .scroll
		{
			padding: 20px;
			border-radius: initial;
		}

	.popup.cluelist ul
		{
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			row-gap: 15px;
			font-family: 'Nunito Sans';
		}


	.popup.cluelist ul li.hide
		{
			display: none;
		}

	.popup.cluelist ul .title
		{
			font-weight: 800;
		}

	.popup.cluelist ul .title
		{
			font-style: italic;
		}

	.popup.guesstitle form
		{
			padding: 20px;
		}

	.popup.guesstitle.found form
		{
			display: none;
		}

	.popup.guesstitle:not(.found) .messages
		{
			display: none;
		}



	.popup.guesstitle > .content
		{
			max-width: 570px;
			xmin-width: 470px;
			min-height: 450px;
			width: fit-content;
			width: 100%;
			padding: 0px;
			background-color: rgb(200 44 39 / 63%);
			background-image: initial;
		}

	.popup.guesstitle .scroll
		{
			flex-direction: column;
			justify-content: center;
			width: 100%;
		}

	.popup.guesstitle .messages
		{
			background-color: initial;
			padding: 0px 10px;
		}

	.popup.guesstitle .messages > *
		{
			padding: 0px 10px;
		}