/*link styles*/
a:link {color: rgb(30,30,30)}
a:visited {color: rgb(10,10,10)} 
a:active {color: rgb(51,51,51)}

/*body text styles*/
div,p {
	font-family: 'Spectral',serif;
	background-color: transparent;
}
body {
	font-family: 'Spectral',serif;
	width: 100vw;
	height: 100vh;
	margin: 0px;
	padding: 0px;
	background: linear-gradient(to bottom, #8AF 0%, #EEE 50%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/*
 *
 */

h1 {
	font-family: 'Noto Sans Display',sans-serif;
	text-shadow: 3px 3px 5px rgba(0, 0, 64, 0.85);
	text-align: center;
	margin-block-start: 5px;
	color: #b51402;
	/*background: linear-gradient(to right, #8AF 0%, #EEE 50%);*/
	font-weight: 300;
	word-wrap: normal;
	word-break: break-word;
}

/* version for mobile devices with touch interfaces */
.title {
	font-family: 'Noto Sans Display',sans-serif;
	text-shadow: 3px 3px 5px rgba(0, 0, 64, 0.85);
	text-align: center;
	margin-block-start: 5px;
	color: #b51402;
	/*background: linear-gradient(to right, #8AF 0%, #EEE 50%);*/
	font-weight: 300;
	font-size: 4em;
	word-wrap: normal;
	word-break: break-word;
}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.title {
		font-family: 'Noto Sans Display',sans-serif;
		text-shadow: -3px -3px 5px white, 3px 3px 5px rgba(0, 0, 64, 0.85);
		text-align: center;
		margin-block-start: 5px;
		color: #b51402;
		/*background: linear-gradient(to right, #8AF 0%, #EEE 50%);*/
		font-weight: 300;
		font-size: 8em;
	}
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

div.printonly { display: none }

/*
 * BASIC LINK STYLE
 */
a {
	text-decoration: none; 
	margin: 1px;
	padding: 1px 1px 1px 7px;
	border-width: 0px 0px 0px 6px;
	border-style: none none none none;
}

a:hover {
	padding: 1px;
	border-color: #CFB;
	border-width: 1px 1px 1px 6px;
	border-style: none none dotted solid;
}


/*
 * Lower Box LINK STYLE - button like elements that go at the bottom, 
 * less important for everyday navigation 
 */
a.lb {
	padding: 1px 4px 3px 7px;
	border-width: 1px 1px 1px 1px;
	border-color: black;
	background-color: #ffd74955;

  display: inline-block;
	color: black;
	float: right;
	clear: both;
	font-family: 'Noto Sans',sans-serif;
	font-weight: 300;
	font-size: 80%;
	text-shadow: 1px 1px 1px white;
	text-decoration: none; 
	margin: 2px 2px 2px 2px;
	border-radius: 4px;
}
a.lb:hover {
	padding: 1px 4px 3px 1px;
	border-width: 1px 1px 1px 7px;
	border-color: white;
	background-color: #ffd749dd;
	margin: 2px 2px 1px 2px;
}

/*
 * VERY PLAIN LINK STYLE
 */
a.plain {
	text-decoration: none; 
	margin: 0px;
	padding: 0px;
	border-width: 0px;
	border-style: none none dotted solid;
}
a.plain:hover {
	text-shadow: 1px 1px 1px white;
}

div.lg { width: 95vw; padding: 5px; 	background-color: transparent;}
div.med { width: 800px; padding: 5px 50px; 	background-color: transparent;}
div.sml { max-width: 400px; color: #833; padding: 15px; margin: auto;}

.emphasis { 
	font-family: 'Noto Sans', sans-serif; 
	text-align:left; 
	border: 2px dotted black;
	border-radius: 5px;
	padding: 30px;
	background-color: seashell;
}
.equation { font-family: 'Noto Serif', serif; text-align:center; }

.footer {
	font-family: 'Noto Sans', sans-serif; 
	font-size: small; 
	color: black;
	text-align:left; 
	text-shadow: 1px 1px 2px white;
}

.smltxt { font-family: 'Spectral', serif; font-size: small; text-align:left; }
.medtxt { font-family: 'Spectral', serif; font-size: medium; text-align:left; padding-top: 10px; }
.subtitle { font-size: 14pt; text-align:center; margin-bottom: 24px; }
.caption { font-size: 9pt; }
div.exr { float:right; margin-left: 8px; }
div.exl { float:left; margin-right: 8px; }
div.ctr { margin: auto; background-color: transparent;}
div.vert {transform: rotate(-90deg);}
div.ex,div.exc,div.exr,div.exl { text-align: left; }

div.bg50percent {
	/*background-color: rgba(0,0,0,.5);*/
	color: #fff;
}

.container-all {
	width: 50vw;
	min-width: 400px;
	margin: auto;
	background-color: transparent;
}

/*MOBILE*/
.top-items { 
  position: absolute;
  top: 0;
  left: 0;
  border-right: 2px dotted darkred;
  padding: 1rem;
  max-height: 70vh;
  max-width: 70vw;
}
.bottom-items { 
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  border-left: 2px dotted darkred;
  max-height: 20vh;
  max-width: 20vw;
}

/*SCREENS*/
@media (hover: hover) and (pointer: fine) {
	.top-items { 
	  position: absolute;
	  top: 0;
	  right: 0;
	  padding: 1rem;
	  border-bottom: 2px dotted darkred;
	  border-right: none;
	  max-height: 70vh;
	  max-width: 70vw;
	}
	.bottom-items {
	  position: absolute;
	  bottom: 0;
	  right: 0;
	  padding: 1rem;
	  border-top: 2px dotted darkred;
	  border-left: none;
	  max-height: 20vh;
	  max-width: 20vw;
	}
}




/* version for mobile devices with touch interfaces */
span.bg50percent {
	/*background-color: rgba(255,255,255,.5);*/
	color: black;
	font-size: xx-large;
}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	span.bg50percent {
		/*background-color: rgba(255,255,255,.5);*/
		color: black;
		font-size: medium;
	}
}

/* version for mobile devices with touch interfaces */
.introtext {
	margin: auto; 
	color: black;
	font-family: 'Noto Sans Display',sans-serif;
	font-size: x-large;
	font-weight: 300;
	text-shadow: 3px 3px 5px rgba(255, 255, 255, 1);
}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.introtext {
		width: 95%; 
		margin: auto; 
		padding:20px;
		color: white;
		font-family: 'Noto Sans Display',sans-serif;
		font-size: 3em;
		font-weight: 300;
	  text-shadow: 2px 2px 2px black, 0 0 25px black, 0 0 5px darkblue;
	}
}

/* version for mobile devices with touch interfaces */
.splashtext {
	margin: auto; 
	padding:20px;
	color: black;
	font-family: 'Noto Sans Display',sans-serif;
	font-weight: 300;
	text-shadow: 3px 3px 5px rgba(255, 255, 255, 1);
	background-color: rgba(250,207,65,.75);
	max-width: 80%; 
	border: 2px dashed mediumvioletred;
	border-radius: 25px ;
}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.splashtext {
		color: white;
		font-size: 1.2em;
	  text-shadow: 2px 2px 2px black, 0 0 25px black, 0 0 5px darkblue;
	}
}

/* version for mobile devices with touch interfaces */
.mobileonly {
	display: inline;
	color: orangered;
	font-size: larger;
	position: fixed; left: 5px; bottom: 28px;
}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.mobileonly {
		display: none;
	}
}
/* version for mobile devices with touch interfaces */
.container-right {
	position: fixed;
	overflow: scroll;
	top: 0em;
	bottom: 0em;
	left: 1%;
	width: 98vw;
	background-color: transparent;
}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.container-right {
		left: 51%;
		width: 49vw;
	}
}

/* version for mobile devices with touch interfaces */
.pic-container-right {
	overflow: scroll;
	float: left;
	clear: both;
	width: 98vw;
	background-color: transparent;
}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.pic-container-right {
		width: 47vw;
	}
}

/* version for mobile devices with touch interfaces */
.container-left {
	width: 100%;
	background-color: transparent;
	display: none;
}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.container-left {
		width: 50%;
		display: block;
	}
}

.thumb-container-left {
	width: 50%;
	background-color: transparent;
}

/* version for mobile devices with touch interfaces */
.pic-max-90pc-width {
	width: 98%;
	max-width: 98%;
	max-height: 80vh;
	clear: both;
	background-color: transparent;
	object-fit: contain;
}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.pic-max-90pc-width {
		max-width: 90%;
	}
}

.fixed-heading {
	position: fixed;
	top: 0em;
	left: 51%;
}

.top-menu {
	z-index: 100;
	float:left;
	position: fixed;
	clear: both;
	top: 0em;
	right: 0em;
	width: 50vw;
	background-color: transparent;
}

.fixed-menu {
	float:left;
	position: fixed;
	clear: both;
	top: 4em;
	left: 51%;
}

.left-fixed-menu {
	position: fixed;
	float: right;
	top: 4em;
	right: 51%;
	/*width: 40vw;*/
	align: right;
}

/*
  MIDDLE 50 - a block to display center screen with items inside
*/
.middle50 {
	margin: auto;
	width: 70vw;
	min-width: 50vw;
	padding:28px;
	border-radius: 45px;
	border-style: solid;
	border-width: 3px;
	border-color:  mintcream;
	background-color: #facf4155;

}

/*
		LEFT SLIDE IN / SLIDE OUT MENU
*/
/* version for mobile devices with touch interfaces */
.left-slide {
  position: fixed;
	float: left;
	bottom: 4em;
	width: 100vw;
	padding:8px;
	background-color: rgba(64, 64, 64, 0.5);
}
/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.left-slide {
		position: fixed;
	  left: -8vw;
	  top: 0;
	  max-width: 8vw;
	  height: 100vh;
	  transition: left 0.3s ease-in-out;
		padding: 8px;
		background-color: rgba(32, 32, 32, 0.25);
		z-index: 10;
	}
	.left-slide.active {
 	 left: 0px;
	}
	.left-slide > .menuitem {
	  float: right !important;
	}
}



/*
		LEFT STACKED ITEMS
*/
/* version for mobile devices with touch interfaces */
.left-stacked {
  position: fixed;
	float: left;
	bottom: 4em;
	width: 90vw;
	padding:8px;
	background-color: rgba(64, 64, 64, 0.5);
}
/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.left-stacked {
		position: fixed;
		float: left;
		top: 4em;
		height: 80vh;
		padding: 8px;
		max-width: 8vw;
		background-color: rgba(128, 96, 64, 0.5);
	}
	.left-stacked > .menuitem {
	  float: right !important;
	}
}


/*
		RIGHT STACKED ITEMS
*/
/* version for mobile devices with touch interfaces */
.right-stacked {
	  /* THIS LOOKS ODD */
		position: fixed;
		float: right;
		bottom: 4em;
		width: 90vw;
		padding:8px;
		background-color: rgba(16, 16, 24, 0.2);
}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.right-stacked {
		right: 1em;
		top: 4em;
		height: 90vh;
		padding:10px;
		width: 180px;
		max-width: 15vw;
		background-color: rgba(16, 16, 24, 0.2);
	}
	.left-stacked > .menuitem {
	  float: right !important;
	}
}



/* version for mobile devices with touch interfaces */
.stacked {
	float: left;
	clear: none;
}
/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
.stacked {
	float: right;
	margin:	auto;
	clear: both;
	width: 100%;
}

}

.heading-pic {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 1.5em;
	padding: 0px 10px;
	float:left;
	clear: both;
	text-shadow: -2px -2px 2px whitesmoke, 3px 3px 3px rgba(0, 0, 64, 0.85);
}
.heading-right {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0em;
	padding: 0px 20px;
	float:left;
	clear: both;
}

.heading-left {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0em;
	float:right;
	clear: both;
}

.menu-right {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 4em;
	float:left;
	clear: both;
}

.blankrow {
	height: 80px;
}

div.revealonhover {
	visibility: hidden;
	border: 5px solid black;
}

.bgwhite {
	background-color: white;
}

.tfl-highlight {
	float: left;
	text-align: left;
	border: 0px;
	border-radius: 50px;
	width: 100px;
	padding:0px;
	margin:0px 0px 0px 0px;
}

.tfl:hover {
	float: left;
	text-align: left;
	border: 0px;
	border-radius: 50px;
	width: 100px;
	padding:0px;
	margin:0px 0px 0px 0px;
}

.tfl:not(:hover) {
	float: left;
	text-align: left;
	border-radius: 5px;
	width: 100px;
	padding:0px;
	margin:0px 0px 0px 0px;
}


.tflcb {
	display: inline-block;
	float: left;
	text-align: left;
	clear: both;
	width:100%;
}


.tfl-highlight img {
	width: 100px;
	height: 100px;
	padding: 0px;
	object-fit: cover;
}
@media (max-width: 100px) {
  .tfl-highlight img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

.tfl img {
	width: 100px;
	height: 100px;
	padding: 0px;
	object-fit: cover;
}
@media (max-width: 100px) {
  .tfl img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

.tfr {
	float: right;
	width: 96px;
	height: 96px;
	padding: 2px;
}

.formtext {
	font-family: 'Noto Sans',sans-serif;
}

.error {
	opacity: 0;
  background-color: purple;
  transition: opacity 3s ease-in;
}
.error.active {
  opacity: 1;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.single-pic-left-panel {
	float: right;
	clear: both;
	max-width: 48vw;
	height: 90vh;
	max-height: 90vh;
	padding: 0px;
	margin: 15px;
	overflow: scroll;
}

.menuitem {
	font-family: 'Noto Sans',sans-serif;
	font-weight: 400;
	font-size: 100%;
	color: black;
	border-radius: 4px;
	border-style: solid;
	text-shadow: 1px 1px 1px white;

	margin:       1px 3px 2px 1px;
	padding:      3px 5px 3px 8px;
	border-width: 1px 1px 1px 1px;
	border-color:  black;
	background-color: #facf41dd;

}
.menuitem:hover {
	cursor: pointer;
	margin:       1px 3px 2px 1px;
	padding:      2px 4px 2px 1px;
	border-width: 2px 2px 2px 8px;
	border-left-color:  white;
	border-top-color:  white;
	border-right-color:  white;
	border-bottom-color:  white;
	background-color: #ffd94bff;
}

.menuitem-loli {
	text-shadow: -3px -3px 5px white, 3px 3px 5px rgba(0, 0, 64, 0.85);
	font-family: 'Noto Sans',sans-serif;
	font-weight: 400;
	font-size: 110%;
	height: 36px;
	padding: 3px 5px 5px 5px;
	background-color: #facf41;
	color: black;
  border: 0px solid midnightblue;
	border-radius: 18px;
	cursor: pointer;
	z-index: 1;
  position: relative;
}
.menuitem-loli:hover {
	background-color: #fed345;
}

.menuitem-r {
	float: right;
	font-family: 'Noto Sans',sans-serif;
	font-weight: 400;
	font-size: 100%;
	padding: 3px;
	border: 1px solid black;
	margin: 1px;
	background-color: #facf41;
	color: black;
	border-radius: 4px;
	margin-right: 3px;
	margin-bottom: 2px;
	text-shadow: 1px 1px 1px white;
}

.menuitem-r:hover {
	cursor: pointer;
	border: 2px solid white;
	margin: 0px;
	margin-bottom: 1px;
	margin-right: 2px;
}

.grid-container {
	display: grid;
	/*grid-template-columns: 96px 96px 96px 96px ; */
	grid-template-columns: repeat(6, 96px);
	grid-auto-rows: 96px;
	row-gap: 4px;
	column-gap: 4px;
	float:right;
}

.spanning-column {
	grid-column: 5 / span 50; /* Span all 6 rows in the 2nd column */
	grid-row: 1 / 50; 
	gap: 10px; 
}

.grid-item {
	padding: 0px;
	text-align: center;
}

.ui-dialog {
	background-color: lightgoldenrodyellow;
	border: 0px solid midnightblue;
	border-radius: 25px;
	padding: 0px 0px 25px 0px;
	margin: 0px;
}
.ui-dialog-content {
	color: midnightblue;
	font-family: 'Noto Sans',sans-serif;
	padding: 15px;
	font-weight: 400;
	font-size: large;
}
.ui-dialog-overlay.modal-opened {
  background: rgb(0, 0, 0);
  opacity: 0.5;
  filter: Alpha(Opacity=50);         
}

.ui-dialog-titlebar {
  width: 100%;
  height: 50px;
  padding-top: 14px;
  border: 0px solid lightgreen;
  background-color: midnightblue;
  color: whitesmoke;
  font-family: 'Noto Sans',sans-serif;
	font-weight: 400;
	font-size: large;
	clear: both;
	text-align: center;
	border-radius: 24px 24px 0px 0px;
	margin: 0px;

}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

.ui-button {
	cursor: pointer;
	font-family: 'Noto Sans',sans-serif;
	font-weight: 300;
	font-size: 100%;
	padding: 4px;
	margin-left: 15px;
	border: 1px solid black;
	background-color: seashell;
	color: black;
	border-radius: 5px;
	margin-right: 3px;
	margin-bottom: 2px;
}

/* version for mobile devices with touch interfaces */
	.regulartext {
		margin: auto; 
		padding:20px;
		color: black;
		font-family: 'Noto Sans',sans-serif;
		font-weight: 300;
		font-size: smaller;
		text-align: left;
		text-shadow: 3px 3px 5px rgba(255, 255, 255, 1);
		background-color: rgba(250,247,250,.65);
/*		background-color: rgba(250,207,65,.65);*/
		width: 80%; 
		border: 1px solid white;
		border-radius: 12px ;
	}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.regulartext {
		color: black;
		font-family: 'Noto Sans',sans-serif;
		font-weight: 400;
		font-size: medium;
	  text-shadow: 2px 2px 2px white, 0 0 25px floralwhite;, 0 0 5px lightblue;
		width: 50%; 
	}
}


.regular {
	color: black;
	font-family: 'Noto Sans',sans-serif;
	font-weight: 400;
	font-size: medium;
  text-shadow: 2px 2px 2px white, 0 0 25px floralwhite;, 0 0 5px lightblue;
}




/* version for mobile devices with touch interfaces */
	.regulartextmono {
		margin: auto; 
		padding:20px;
		color: black;
		font-family: 'Noto Sans Mono',sans-serif;
		font-weight: 300;
		font-size: smaller;
		text-align: left;
		text-shadow: 2px 2px 4px white;
		background-color: rgba(250,247,250,.65);
/*		background-color: rgba(250,207,65,.65);*/
		width: 80%; 
		border: 1px solid white;
		border-radius: 12px ;
	}

/* version for regular screens with pointing devies and fine control: laptops, desktops etc */
@media (hover: hover) and (pointer: fine) {
	.regulartextmono {
		color: black;
		font-family: 'Noto Sans Mono',sans-serif;
		font-weight: 600;
		font-size: small;
	  text-shadow: -1px -1px 2px white, 2px 2px 2px darkgrey;
		width: 50%; 
	}
}

#buttonContainer {
  position: absolute;
  top: 120px; /* Adjust vertical positioning */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  text-align: center; /* Align buttons within container */
}