@charset "UTF-8";
/* CSS Document */
/* NB css things are also handled in the file do.js !*/

/*
body
	#container
		#contentwindowcontainer
			#contentwindowtopbar
			#contentwindow
				#contentiframe
					#document
		#librarytopbar
		#librarycontainer
			#library
				.introtext
				libraryitem
				libraryitem
				libraryitem

*/

* {
	box-sizing: border-box;
	/* to exclude padding and border from the actual width of a div */
}

div {
	-webkit-tap-highlight-color: transparent;
}

/* disables the flicker that a div on a tablet gives on tapping */

@font-face {
	font-family: niclogo;
	src: url("fonts/niclogo.ttf");
}

html {
  font-family: textfont, chessfont;
  font-size: 1.4em;
  line-height: 1.5; /* without unit, means 1.5 x font-size */
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
	width: 100vw;
	height: 100dvh;
	/* background-color: #f0f0f0; */
	background-color: #ddd;
	margin: 0;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	user-select: none;
	/* Chrome */
	-webkit-user-select: none;
	/* Safari */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* IE 10+ */

	-webkit-text-size-adjust: auto;
	-ms-text-size-adjust: auto;

	opacity: 0;
	/* will be fading in on pageshow event */
	transition: opacity 1000ms ease-in-out;
	cursor: default;
}

html, body {
    height: 100%;
    overflow: hidden; /* Prevent body scrolling */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}


:root {
	--heighttopbar: 40px;
}

#container {
	background: #ddd;
}

#contentwindowcontainer {
	background: #ddd;
	position: fixed;
	left: 0;
	top: 0;
	width:100%;
	height: 100dvh;
	xxxheight: auto;
	z-index:2;
}

#contentwindow {
	height: calc(100dvh - var(--heighttopbar));
}

#contentwindowtopbar {
	height: calc(var(--heighttopbar));
	display: grid;
	grid-template-columns: 33vw 34vw 33vw;
	align-items: center;
	gap: 1em;
	padding-right: 1em;
	background: navy;
	background: darkred;
}

#librarytopbar {
	height: calc(var(--heighttopbar));
	display: grid;
	grid-template-columns: 0vw 0vw 95vw;
	justify-items: right;
	align-items: center;
	gap: 0em;
	background: navy;
	background: darkred;
}

#librarytopbar div * {
	padding-right: 1.5em;
}

#librarytopbarrightcontainer {
	position: absolute;
	right: 2.5em;
	top: 0;
	height: var(--heighttopbar);
	display: flex;
	gap: .5em;
	align-items: center;
}

:is(#librarytopbar, #contentwindowtopbar) div {
	font-size: .8em;
	color: white;
	transition: all 300ms;
}

#contentwindowtopbar #menucontentwindowbooktitle {
	opacity: 0;
	position: absolute
		/*puts the element outside the flex order*/
	;
	left: 9em;
	font-weight: bold;
	color: white
		/*overwrites the hover color, it seems*/
	;
}

#contentwindowtopbar #menucontentwindowbacktolibrary {
	position: absolute
		/*puts the element outside the flex order*/
	;
	left: 1em;
}

:is(#librarytopbar, #contentwindowtopbar, #hamburgermenubutton) span:hover {
	color: #bbb;
	transition: all 300ms;
}

#hamburgermenubutton {
	position: absolute;
	top: -.2em;
	right: 0px;
	height: calc(var(--heighttopbar));
	text-align: right;
	padding-right: .5em;
	font-size: 1.5em;
	color: white;
	z-index: 10;
}

#hamburgermenu {
	z-index: 10;
	display: block;
	display: none;
	position: absolute;
	top: 2.5em;
	right: 1.5em;
	width: 10em;
	background: white;
	border-radius: 8px;
	border-radius: .5em;
	box-shadow: 8px 8px 8px #ccc;
}

#hamburgermenu div {
	display: block;
	height: 2em;
	padding-left: 1em;
	padding-right: 1em;
	font-size: 1em;
	line-height: 2;
	text-align: left;
}

#hamburgermenu div:hover {
	background: navy;
	background: darkred;
	color: white;
}

#hamburgermenuitem_signout {
	display: none;
}

#libraryfilterbox {
	display: inline-block;
	margin-right: .5em;
	transform: translateY(-.1em);
}

#libraryfilterbox input {
	width: 4em;
	height: calc(var(--heighttopbar) * .7);
	margin-top: .25em;
	font-size: .7em;
	color: #383839;
	background: #ddf;
	border-radius: .25em;
	border-width: 2px solid #777;
}

#librarycontainer {
	overflow: scroll;
	scrollbar-width: none
		/* Firefox */
	;
	-ms-overflow-style: none
		/* IE 10+ */
	;
	position: absolute;
	top: var(--heighttopbar);
	width: 100%;
	height: calc(100% - var(--heighttopbar));
}

#library {
	display: flex;
	width:100%;
	gap: 1em;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	overflow: scroll;
	scrollbar-width: none
		/* Firefox */
	;
	-ms-overflow-style: none
		/* IE 10+ */
	;
	position: absolute;
	height: auto;
	padding: 1em;
	background: #ddd;
}

#library>* {
	align-self: flex-start;
	/* to prevent the items from being vertically centered in case there are not enough items to fill the screen - proposed by chatgpt but it doesn't seem to work */
}

libraryitem {
	display: none;
	width: 12em;
	background-color: #f0f0f0;
	padding: 1em;
	padding-top: 2em;
	border-radius: .5em;
	box-shadow: 8px 8px 8px #ccc;
	transition: all 300ms;
}

libraryitem:hover {
	cursor: pointer;
	background-color: #f8f8f8;
}

libraryitem_image {
	display: block;
	width: 100%;
	margin-bottom: 1em;
}

libraryitem_image img {
	display: block;
	margin: auto;
	height: 8em;
	box-shadow: 8px 8px 8px #ccc;
	transition: all 300ms;
	max-height: unset;
	max-width: unset;
}

libraryitem_image img:hover {
	transform: scale(1.5);
	transform-origin: 50% 25%;
}

libraryitem_id {
	display: none;
}

libraryitem_title {
	display: block;
	margin: auto;
	text-align: center;
	font-size: .8em;
	line-height: 1.1;
	font-weight: bold;
	color: #333;
}

libraryitem_subtitle {
	display: none;
	font-size: .7em;
	line-height: 1.2;
	font-style: italic;
	color: black;
	margin-top: .2em;
}

libraryitem_author {
	display: none;
	font-size: .7em;
	font-weight: bold;
	line-height: 1.2em;
	margin-bottom: .7em;
	margin-top: .3em;
	border-bottom: 1px solid black;
}

libraryitem_description {
	display: none;
	font-size: .7em;
	line-height: 1.4;
}

libraryitem_price {
	display: none;
	font-size: .8em;
	line-height: 1.3em;
	font-weight: bold;
}

libraryitem_buy {
	display: inline-block;
	display: none;
	font-size: .7em;
	font-weight: bold;
	line-height: 1.3em;
	margin-top: .5em;
	background: orange;
	padding: .2em;
	padding-left: .5em;
	padding-right: .5em;
	transform: skewX(-10deg);
	transition: all 300ms;
}

libraryitem_buy:hover {
	transform: scale(1.5) skewX(-10deg);
}

.pointeronhover {
	cursor: pointer;
}

.darkmode #library {
	background: #383839;
}

.darkmode libraryitem {
	background-color: #222;
	box-shadow: none;
	border: 1px solid #383839;
}

.darkmode libraryitem:hover {
	background-color: #333;
}

.darkmode libraryitem_image img {
	box-shadow: none;
}

.darkmode libraryitem_title {
	color: gold;
}

.darkmode libraryitem_subtitle {
	color: #ddd;
}

.darkmode libraryitem_author {
	color: #ddd;
	border-bottom: 1px solid #ddd;
}

.darkmode libraryitem_description {
	color: #ddd;
}

.darkmode libraryitem_price {
	color: #ddd;
}

.darkmode libraryitem_buy {
	background: darkorange;
	color: #222;
}

.darkmode #hamburgermenu {
	box-shadow: none;
	border: 1px solid #383839;
	background: #222;
}

.darkmode #hamburgermenu div {
	color: #ddd;
}

#niclogo {
	position: absolute;
	margin: 0;
	padding: 0;
	top: .3em;
	width: 6em;
	left: calc(50% - 3em);
	z-index: 5;
}

#niclogo img {
	all: unset;
	width: fit-content;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

#libraryfilterboxcontainer {
	display: block;
	width: 100%;
	margin: auto;
	margin-top: .5em;
	margin-bottom: .5em;
}

#libraryfilterboxcontainer form {
	display: block;
	width: fit-content;
	margin: auto;
}

#introtext {
	display: block;
	width: 100%;
	transition: all 500ms;
	height: 1em;
	text-align: center;
	font-size: .7em;
	line-height: 1.5;
	padding: 0;
	margin: 0;
	margin-top: .5em;
	margin-bottom: .5em;
	transition: all 500ms;
}

.darkmode #container {
	background: #383839;
	color: #ddd;
}

body.darkmode {
	background: #383839;
	color: #ddd;
}

.button:hover {
	cursor: pointer;
}

#alertboxflash,
#alertbox,
#alertboxflashsmall {
	position: absolute;
	top: 25%;
	display: flex;
	justify-content: center
		/*horizontal*/
	;
	align-items: center
		/*vertical*/
	;
	line-height: 1
		/*unitless, means 1x font-size*/
	;
	/*centers the text*/
	width: clamp(320px, 40ch, 80%);
	left: calc(50% - calc(clamp(320px, 40ch, 80%) / 2));
	/* 50% minus half of the width - means centering */
	height: 48px;
	font-size: 22px;
	color: white;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
	text-align: center;
	font-family: sans-serif, chessfont;
	border-radius: 1000px;
	background: black;
	transition: opacity .5s ease-in-out;
	/* body will fade in on pageshow event */
	opacity: 0;
	z-index: 10;
}

.darkmode :is(#alertboxflash, #alertbox, #alertboxflashsmall) {
	background: darkred;
	color: #ddd;
}

.nobreak {
	white-space: nowrap;
}


@media (max-width: 1px) {
	body {
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		padding-bottom: 10vh;
		position: absolute;
		height: 75vh;
		background: orange;
		/* the whole screen gets this color, also when height is set to let's say 90vh (when all child divs are within that body height) */
	}

	#container {
		height: 100%;
		background: cyan;
	}

	#library {
		height: 100%;
		background: yellow;
	}



	#xxxcontentwindowtopbar #menucontentwindowbacktolibrary {
		display: none;
	}
}