@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@100&display=swap');

@media all and (min-width: 50px)   {  body  { font-size:1.0em;  } }
@media all and (min-width: 100px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 200px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 300px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 400px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 500px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 600px)  {  body  { font-size:1em;  } }
@media all and (min-width: 700px)  {  body  { font-size:1em;  } }
@media all and (min-width: 800px)  {  body  { font-size:1em;  } }
@media all and (min-width: 900px)  {  body  { font-size:1em;  } }
@media all and (min-width: 1000px) {  body  { font-size:1em;  } }
@media all and (min-width: 1100px) {  body  { font-size:1em;  } }
@media all and (min-width: 1200px) {  body  { font-size:1em;  } }
@media all and (min-width: 1300px) {  body  { font-size:1em;  } }
@media all and (min-width: 1400px) {  body  { font-size:1em;  } }
@media all and (min-width: 1500px) {  body  { font-size:2em;  } }
@media all and (min-width: 1600px) {  body  { font-size:2em;  } }
@media all and (min-width: 1700px) {  body  { font-size:2em;  } }

body#bodycontainer {
	font-family: 'Lexend', sans-serif;
	
	margin: 0px;
	padding: 0.25em;

	background-color: white;
	background-attachment: fixed;
	
	overflow-y: auto;
	overflow-x: hidden;
	
	height: fit-content;
	width: 100%;
}

header {	
	font-family: 'Josefin Slab', sans-serif;
	font-weight: 100;
}

header.sideheader {
	display: inline;
	font-size: 1em;
	content: "CB | ";
}

.pagetitlebox { 
	color: white;
	/*border: solid 0.1em rgba(227,11,92,0.75); */
	border-radius: 0.5em;
	/*background: rgba(0,0,0,.5);*/
	background: rgba(227,11,92,0.25);
	/*text-shadow: 2px 0px 4px #000000;*/
	box-shadow: 2px 0px 4px #000000;
	margin: auto;
  	width: auto;
  	text-align: center;
  	max-height: 10vh;
  	font-size: 2em;
  	padding: 0.25em;
  	backdrop-filter: blur(10px);
} 



input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	color: white;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	margin: 0.25em;
	border-radius: 0.25em;
	background-color: rgba(0, 0, 0, 0.5); 
}

table {
	font-family: inherit;
	font-size: inherit;
}

input::placeholder, textarea::placeholder {
	color: rgba(252, 190, 213, 0.5);
}

option:checked {
	color: rgba(227, 11, 92, 1);
}

input[type="radio"]+label, input[type="checkbox"]+label {
	margin: 0.25em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	background-color: rgba(0, 0, 0, 0.5); 
	color: white;
	border-radius: 1em;
	border: rgba(0, 0, 0, 0) solid 0.1em;
}

input[type="radio"], input[type="checkbox"] {
	display: none;
}

input[type="checkbox"]:checked+label, input[type="radio"]:checked+label { 
	background-color: rgba(227, 11, 92, 0.5); 
	border: #B6094A solid 0.1em;
}

button {
	font-family: inherit;
	font-size: inherit;
	border-radius: 0.5em;
	background-color: rgba(227, 11, 92, 0.5);
	border: #B6094A solid 0.1em;
	padding: 0.75em;
	text-align: center;
	margin-right: 1em;
	margin-left: 1em;
}

dialog::backdrop { /* native */
  	background-color: rgba(227, 11, 92, 0.5);
}

dialog {
	border-radius: 0.5em;
	border: #B6094A solid 0.1em;
	padding: 0.75em;
}

hr {
  	border: 0;
  	height: 0.2em;
  	max-width: 75%;
  	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(227, 11, 92, 0.75), rgba(0, 0, 0, 0));
}

.hidden {
	display: none;
}

.visible {
	display: flex;
}

.highlight {
	background-color: rgba(227, 11, 92, 0.25);
	border-radius: 0.5em;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.valigntextbox {
	display: table;
}

.valigntext {
	display: table-cell; 
	vertical-align: middle;
}

.flipcardcontainer {
	border: solid 0.2vw rgba(255,255,255,.8); 
	min-height: 10em;
	margin: 0.25em;
	border-radius: 0.25em;
	padding: 0.25em;
	backdrop-filter: blur(20px);
	align-items: center;
  	display: flex;
  	height: 100%;
  	justify-content: center;
  	width: 100%;
}

.cardcontainer {
	border: solid 0.2vw rgba(255,255,255,.8); 
	border-radius: 0.25em;
	backdrop-filter: blur(20px);
	margin: 0.25em;
	padding: 0.25em;
	height: fit-content;
}

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

.foreground {
	/*border: solid 0.2vw rgba(255,255,255,.8); */
	margin: 0.25em;
	border-radius: 0.25em;
	padding: 0.25em;
	background: rgba(255,255,255,0.5);
	color: black;
	backdrop-filter: blur(10px);
	box-shadow: 2px 0px 4px #000000;
}

.teacherform {
	display: table;
	width: 100%;
}

.formrow {
	display: table-row;
	width: 100%;
}

.leftcol, .rightcol {
	display: table-cell;
	/*width: 50%;*/
}

.rightalign {
	text-align: right;
}

.leftalign {
	text-align: left;
}

.centeralign {
	text-align: center;
}

h2 {
	text-align: center;
	width: 100%;
	padding-top: .25em;
	padding-bottom: .25em;
}

p {
	border-radius: 0.25em;
	padding: 0.25em;
	margin: 0.25em;
}

.bookblurb p {
	background: rgba(255,255,255,0.5);
	color: black;
}

.thick {
	line-height: 2em;
}

.blocktext {
	display: block;
	padding: 0.25em;
}

.smallertext {
	font-size: 0.75em;
}

.smalltext {
	font-size: 0.5em;
}

.callnolabel {
	border-radius: 1em;
	height: 5em;
	width: 5em;
	background: white;
	color: black;
	font-weight: bolder;
	font-size: 1em;
	text-align: center;
	float: left;
	margin: .25em;
}

.titleauthorcontainer {
	margin-left: auto;
 	margin-right: auto;
 	text-align: center;
}

.bookcover {
	float: right;
	width: auto;
	border: solid 0.1vw white;
	margin: .25em;
}

.smallbookcover {
	height: 9em;
}

.bookauthor::before {
	content: "by ";
}

.preview::before {
	background-color: rgba(55, 55, 55, 0.5);
	border-radius: 0.1em;
	content: "PREVIEW VERSION - Click description below to customize.";
}

.verified::after {
	color: green;
	font-weight: bold;
	content: " \2714";
	border-radius: 1em;
	background-color: yellow;
	border: 0.25em solid green;
	text-align: center;
	width: 2em;
	height: 2em;
}

.notverified::after {
	color: red;
	font-weight: bold;
	content: " \2718";
	border-radius: 1em;
	background-color: gray;
	border: 0.25em solid red;
	text-align: center;
	width:  2em;
	height: 2em;
}

.horrorgenre {
	/*background: orange;*/
	background: rgba(128,0,128,.75);
	color: white;
}

.scifigenre {
	/*background: red;*/
	background: rgba(255,0,0,.75);
	color: white;
}

.romancegenre {
	/*background: pink;*/
	background: rgba(255,128,128,.75);
	color: black;
}

.historicalgenre {
	/*background: brown;*/
	background: rgba(139,69,19,.75);
	color: white;
}

.fantasygenre {
	/*background: purple;*/
	background: rgba(128,0,128,.5);
	color: white;
}

#nametagcontainer {
	height: 5em;
	width: 15em;
	border: solid 0.25em black;
	border-radius: 0.25em;
}

#mainfocuscontainer {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.over {
	border: dashed;
}

datalist {
  	display: flex;
}

input[type="email"], input#username {
    text-transform: lowercase;
}

span.todo {
	text-decoration: line-through;
}

/* BOOK CARD STYLING */
#bigcardscontainer {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-gap: 0.25em;
}

.card img {
    object-fit: cover;
    float: left;
    padding: 0.15em;
}    

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 600px;
  height: 400px;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/*NAVIGATION BAR STYLING*/
#headertextfull::before {
	content: "Classbrary Books";
	margin: 0.25em;
}

#headertextsmall::before {
	content: "CB";
}

nav#navmenu {
	position: sticky;
	top:  0;
	z-index: 3;

	backdrop-filter: blur(20px);
	background-color: rgba(255,255,255,0.5);

	margin: 0.2em;
	padding: 0.2em;

	overflow: hidden;

	font-family: 'Josefin Slab', sans-serif;
	font-weight: bolder;

	display: flex;
	justify-content: left;

	width: 100%;
	
	transition: all 3s ease;
}

nav#navmenu::after {
    content: "";
    clear: both;
}
/*

.iconcontainer {
	border-radius: 0.5em;
	background: rgba(227,11,92,0.75);
	padding: 0.5em;
	margin: 0.25em;
	font-size: 0.5em;
	width: fit-content;
	display: inline-block;
}
*/

.link {
	border-radius: 0.25em;
	border-left: 0.2em solid rgba(227,11,92,0.5);
	padding: 0.2em;
	margin: 0.2em;
}

.link.navbar.subscriber {
	background: rgba(227,11,92,0.25);	
}

.link.navbar {
	z-index: 2;
}

.chosen {
	background-color: rgba(127, 11, 192, 0.25);
	border-bottom: 1px solid rgba(127, 11, 192, 0.75);
	/*transition: all 0.5s ease-out;*/
}
/*
.chosen > .expand {
	display: flex;
	flex-direction: column;
	height: auto;
	top: 1em;
	left: 1em;
	justify-content: left;
	z-index: 4;
}
*/
.expandbutton {
	display: flex;
	width: 25%;
	transition: all 3s ease;
}

.pink {
	background: gray;
	color: pink;
	height: 700px;
}

.first {
	order: -1;
}

.expandbutton .expand {
	display: none;
	flex-direction: column;
	position: relative;
	top: 1em;
	opacity: 0;
	background: transparent;
	transition: all 3s ease;

}
/*
.expandbutton:hover .expand {
	display: flex;
	flex-direction: column;
	height: auto;
	top: 1em;
	left: 1em;
	justify-content: left;
	z-index: 4;
}

.expandbutton:hover .expand::after {
	clear: both;
	content: "uhhhh....";
}

.expand:has(.chosen)
{
	display: flex;
}
*/

.dropcontainer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: left;
	width: 100%;
}

/* styling for LOADING ICON */
#toploader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2em;
	height: 2em;
	opacity: .85;
	border-left: 1em solid rgba(227, 11, 92, 1);
	border-right: 1em solid rgba(227, 11, 92, 1);
	border-top: 0.5em solid #fff;
	border-bottom:  0.5em solid #000;
	border-radius: 50%;
	/*border-right-color: transparent;*/
	/*width: calc(.5vh + 1vw);
	height: calc(.5vh + 1vw);*/
	animation: spin 2s linear infinite;
	margin: calc(7px + .25vw);
}

#overlay {
	position: absolute;
	top: calc(50vh - 50px);
	left: calc(50vw - 50px);
	height: 100px;
	width: 100px;
	z-index: 5;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* below styling borrowed from https://stackoverflow.com/questions/26612700/ticks-for-type-range-html-input */
input[type=range] + datalist {
	display: block;
	margin-top: -4px;
}

input[type=range] + datalist option {
	display: inline-block;
	width: calc((100% - 12px) / (var(--list-length) - 1));
	text-align: center;
}

input[type=range] + datalist option:first-child {
	width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
	text-align: left;
}

input[type=range] + datalist option:last-child {
	width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
	text-align: right;
}

/* below styling borrowed from http://danielstern.ca/range.css/#/  */
/* Styling for RANGE SLIDER */
input[type=range] {
	width: 100%;
	margin: 13.3px 0;
	background-color: transparent;
	-webkit-appearance: none;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
	background: rgba(227, 11, 92, 0.3);
	border: 0.2px solid #e30b5c;
	border-radius: 1.3px;
	width: 100%;
	height: 8.4px;
	cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
	margin-top: -13.5px;
	width: 35px;
	height: 35px;
	background: rgba(227, 11, 92, 0.5);
	border: 1px solid #e30b5c;
	border-radius: 45px;
	cursor: pointer;
	-webkit-appearance: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background: #f7629a;
}

input[type=range]::-moz-range-track {
	background: rgba(227, 11, 92, 0.3);
	border: 0.2px solid #e30b5c;
	border-radius: 1.3px;
	width: 100%;
	height: 8.4px;
	cursor: pointer;
}

input[type=range]::-moz-range-thumb {
	width: 35px;
	height: 35px;
	background: rgba(227, 11, 92, 0.5);
	border: 1px solid #e30b5c;
	border-radius: 45px;
	cursor: pointer;
}

input[type=range]::-ms-track {
	background: transparent;
	border-color: transparent;
	border-width: 28.3px 0;
	color: transparent;
	width: 100%;
	height: 8.4px;
	cursor: pointer;
}

input[type=range]::-ms-fill-lower {
	background: #7d0633;
	border: 0.2px solid #e30b5c;
	border-radius: 2.6px;
}

input[type=range]::-ms-fill-upper {
	background: rgba(227, 11, 92, 0.3);
	border: 0.2px solid #e30b5c;
	border-radius: 2.6px;
}

input[type=range]::-ms-thumb {
	width: 35px;
	height: 35px;
	background: rgba(227, 11, 92, 0.5);
	border: 1px solid #e30b5c;
	border-radius: 45px;
	cursor: pointer;
	margin-top: 0px;
/*Needed to keep the Edge thumb centred*/
}

input[type=range]:focus::-ms-fill-lower {
	background: rgba(227, 11, 92, 0.3);
}

input[type=range]:focus::-ms-fill-upper {
	background: #f7629a;
}

@supports (-ms-ime-align:auto) {
/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
	input[type=range] {
		margin: 0;
	/*Edge starts the margin from the thumb, not the track as other browsers do*/
	}
}