@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
	color: unset;
	border: unset;
	box-sizing: border-box;
	max-width: 100vw;
}

:root {
	--textWhite: #ffffff;
	--textDark: #333333;
	--textGrey: #5b5b5b;
	--colorAward: #b39157;
	--bgLogo: #ff6400;
	--bgTheme: #171717;
	--pureBlack: #000;

	/*  */
	--mobileWidth: clamp(300px, 90vw, 800px);
	--optimalWidth: clamp(815px, 80vw, 1600px);
	/*  */
	--defaultFamily: "Open Sans", sans-serif;
	--defaultFontSize: 1rem;
	/*  */
	--fontSizeHuge: 5rem;
	--fontSizeBig: 2rem;
	--fontSizeMedium: 1.5rem;
	--fontSizeOK: 1.2rem;

	/*  */
	--speedFast: 300ms;
	--speedNormal: 800ms;
	--speedOK: 1200ms;
	--speedSlow: 1800ms;
}

html {
	overflow-x: hidden;
	font-size: 100%;
	/* background-color: var(--bgTheme); */
	overflow-x: hidden;
	color: var(--textDark);
	font-family: var(--defaultFamily);
	scroll-behavior: smooth;
}

.container {
	display: flex;
	flex-direction: column;
	width: var(--optimalWidth);
	justify-content: center;
	margin: 0 auto;
}

#lib-loc {
	cursor: pointer;
	position: relative;
}

#lib-loc::before {
	content: "\2022";
	color: var(--bgLogo);
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

.dd-loc {
	visibility: hidden;
	position: absolute;
}

/* .dd-loc span {
	user-select: none;
	pointer-events: none;
} */

.loc-dd.active .dd-loc {
	z-index: 5;
	visibility: visible;
	background: var(--bgTheme);
	padding: 1rem;
	top: 0;
	margin-top: 2rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.flex-row {
	display: flex;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

a {
	color: var(--bgLogo);
}

button {
	background-color: var(--bgLogo);
	color: var(--textWhite);
	padding: 0.5rem 1rem;
	font-weight: 600;
	cursor: pointer;
}

.bg-container {
	position: relative;
}

.bg-container img {
	width: 100vw;
}

.bg-container h1 {
	color: var(--textWhite);
	position: absolute;
	bottom: 0;
	left: 10%;
	background-color: rgba(0, 0, 0, 0.4);
	padding: 0.5rem 1rem;
	font-size: var(--fontSizeMedium);
}

.bg-container img {
	display: block;
}

.li-num li {
	list-style: decimal;
}

.anchor-color {
	color: var(--bgLogo);
}
/* sliders */

.slides-container {
	position: relative;
}

.slide {
	position: absolute;
	transition: var(--speedNormal);
	max-width: 100%;
}

.slide:not(.slide-selected) {
	opacity: 0;
}

.switch-slide {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 5rem;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.switch-slide:hover {
	color: var(--bgLogo);
}

.left.switch-slide {
	left: -3rem;
}

.right.switch-slide {
	right: -3rem;
}

/* Dots (cont. slider) */
.dots {
	position: absolute;
	display: flex;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: fit-content;
}

.dots__dot {
	border: none;
	background-color: #666e88d6;
	opacity: 1;
	height: 1rem;
	width: 1rem;
	border-radius: 50%;
	margin-right: 1.75rem;
	cursor: pointer;
	transition: all 0.5s;

	/* Only necessary when overlying images */
	/* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
}

button.dots__dot {
	padding: unset;
}

.dots__dot:last-child {
	margin: 0;
}

.dots__dot--active {
	/* background-color: #fff; */
	background-color: var(--bgLogo);
	opacity: 1;
}

/* Nav */

#plain {
	fill: var(--textWhite);
}

#empha {
	fill: var(--bgLogo);
}

.login svg {
	width: 1.5rem;
}

.login #content {
	fill: var(--textWhite);
}

a .login {
	color: var(--textWhite);
}

svg.logo {
	width: clamp(200px, 15vw, 350px);
}

nav .container {
	color: var(--textWhite);
	font-weight: 600;
	flex-direction: row;
}

nav a:hover li {
	color: var(--bgLogo);
}

nav .L2 a {
	color: var(--textWhite);
}

.L1 {
	background-color: var(--pureBlack);
	padding: 0.5rem 0;
}

.L1 ul {
	gap: 1rem;
}

.L1 .container {
	justify-content: space-between;
	align-items: flex-end;
}

.L2 {
	background-color: var(--bgTheme);
	padding: 1.5rem 0;
}

.L2 ul {
	gap: 2rem;
}

.L2 .container {
	/* flex-direction: column; */
	flex-direction: row;
	justify-content: space-between;
}

.login {
	display: flex;
	gap: 0.2rem;
	align-items: center;
}

.mobile-nav-trigger {
	display: none;
	position: absolute;
	right: 5px;
	top: 45%;
	width: 3rem;
	height: 3rem;
	z-index: 3;
	overflow: visible;
	transition: var(--speedSlow);
	transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
	box-shadow: 1px 1px 5px #00000052;
	border-radius: 50%;
}
/* SVG SPECIFIC on trigger (add reveal class)*/
.menu-icon.reveal {
	transform: rotateZ(45deg);
}

#menu {
	transition: var(--speedNormal);
	transform-origin: center;
	transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

#cross-1,
#cross-2,
#cross-3,
#cross-4 {
	transition: var(--speedNormal);
}

.menu-icon.reveal #cross-1 {
	transform: translate(2px, 2px);
}
.menu-icon.reveal #cross-2 {
	transform: translate(2px, -2px);
}
.menu-icon.reveal #cross-3 {
	transform: translate(-2px, 2px);
}
.menu-icon.reveal #cross-4 {
	transform: translate(-2px, -2px);
}

.menu-icon.reveal #menu {
	opacity: 0;
	transform: scale(2);
}

/* SVG SPECIFIC/ */

.mobile-nav-trigger svg {
	stroke: var(--textWhite);
	fill: var(--bgLogo);
	width: 100%;
	height: auto;
	transition: var(--speedNormal);
}

.mobile-nav-trigger svg #bg {
	stroke: none;
}

.mobile-nav {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	top: 0;
	z-index: -5;
	visibility: collapse;
	display: none;
}

.mobile-nav.show {
	z-index: 1;
	visibility: visible;
}

.mobile-nav .circle {
	width: 50vw;
	height: 60vh;
	shape-outside: ellipse(100% 100% at 100% 100%);
	background-color: transparent;
	float: right;
	clip-path: ellipse(100% 100% at 100% 100%);
}

.mobile-nav .wrapper {
	position: absolute;
	bottom: 3%;
	right: 0;
	width: 100vw;
}

.icons {
	color: white;
	text-align: right;
	margin-bottom: 1.2rem;
	/* display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1rem; */
	transition: var(--speedNormal);
	overflow-x: unset;
}

.icons.hide {
	transform: translateX(50%);
	opacity: 0;
}

.icons a {
	display: inline-flex;
	color: var(--textWhite);
	gap: 1rem;
	align-items: center;
}

.icons a:active #bg,
.icons a:active {
	color: var(--textDark);
	fill: var(--textDark);
}

.icons svg #content {
	fill: var(--textWhite);
}

.icons svg #bg {
	fill: var(--bgLogo);
}
/* Hero */

.hero {
	background: var(--pureBlack);
}

.portal {
	border: 2px solid var(--bgLogo);
	margin: 2.5rem 0;
	padding: 1.5rem;
}

.portal .title {
	font-weight: 800;
	margin-bottom: 1rem;
}

.portal button {
	margin-top: 1rem;
	letter-spacing: 1.5px;
}

/* shelves */

.shelves .container {
	flex-direction: column;
	overflow-x: visible;
}

.shelf-name {
	font-weight: bold;
	margin-bottom: 1rem;
	font-size: var(--fontSizeMedium);
}

.page-divider {
	background-color: #e8e8ea;
	width: 100%;
	height: 2px;
	margin: 2rem 0;
}

.book .title {
	text-align: center;
}

/* news */

.event {
	width: 50%;
	background-color: #e9e9ed;
	position: relative;
}

.event img {
	width: 95%;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 1rem;
}

.event .svg-img {
	position: absolute;
	bottom: 0;
	width: 20%;
	left: 15%;
	opacity: 0.1;
}

.date {
	display: flex;
	gap: 1rem;
	align-items: center;
	width: fit-content;
}

.event .wrapper {
	gap: 2rem;
	padding: 2rem;
}

.event a button {
	float: right;
	position: relative;
	right: 5%;
	bottom: 5%;
}

.details {
	position: relative;
}

.details::before {
	content: "";
	left: -20px;
	height: 80%;
	width: 2px;
	background-color: var(--textGrey);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.news .slides {
	gap: 2rem;
	display: flex;
	justify-content: center;
}

.venue {
	display: none;
}

.upcoming {
}

.upcoming .container {
	margin: 2.5rem auto;
}

.upcoming .flex-row {
	gap: 2rem;
}

.day-30,
.upcoming .event .title {
	font-weight: bold;
}

/* past */

.past-text {
	display: none;
	max-width: max(800px, 50vw);
}

.digital-resource img {
	width: clamp(80px, 15vw, 300px);
}

.digital-resource .flex-row {
	gap: 1rem;
	justify-content: space-between;
	align-items: flex-start;
}

.library {
	display: flex;
	padding-bottom: 3rem;
	gap: clamp(1rem, 2vw, 3rem);
}

.library img {
	width: 50%;
}

.library .flex-col {
	justify-content: center;
	width: 50%;
	padding: 1rem;
}

table,
th,
td {
	border: 3px solid #e8e8ea;
	border-collapse: collapse;
	padding: 1rem 0.5rem;
}

table .center {
	text-align: center;
}

table .title {
	color: var(--bgLogo);
	font-weight: 700;
}

td:first-child {
	font-weight: bold;
}

/* Footer */

footer empha {
	color: var(--bgLogo);
	font-size: smaller;
}

footer svg {
	width: clamp(150px, 15vw, 350px);
	height: auto;
}

footer {
	background-color: var(--bgTheme);
	color: var(--textWhite);
}

footer h2,
footer h3 {
	font-size: var(--defaultFontSize);
}

footer h3 {
	color: var(--bgLogo);
}

footer a {
	color: unset;
}

footer section {
	padding: 2rem 0;
}

footer .flex-row {
	justify-content: space-between;
	width: 100%;
}

footer .flex-col {
	gap: 1rem;
}

footer section ~ section {
	background-color: var(--pureBlack);
}

footer section ~ section .container {
	flex-direction: column;
	margin: auto;
	width: fit-content;
	gap: 2rem;
	align-items: center;
}

/* Feedback form */

textarea {
	width: 100%;
}

input[type="submit"] {
	background-color: var(--bgLogo);
	color: var(--textWhite);
	border: unset !important;
	box-shadow: 1px 1px 1px #eeeeeecf;
}

input[type="submit"]:hover:not(disabled) {
	background-color: var(--bgTheme);
	/* color: var(--bgTheme); */
	cursor: pointer;
}
h3#feedback {
	cursor: pointer;
}

#feedback-form {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	background: var(--textWhite);
	padding: 3rem;
	color: var(--bgTheme);
	box-shadow: inset 0px 0px 10rem #eeeeeecf;
	border-radius: 1rem;
	opacity: 0;
	z-index: -1;
	transform: translateY(10vh);
}

#feedback-form.show {
	opacity: 1;
	transition: var(--speedNormal);
	z-index: 1;
	transform: translateY(0);
}

#feedback-form.show + .bg-blur::before {
	content: "";
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	width: 101vw;
	height: 101vh;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#feedback-form h3 {
	color: var(--bgTheme);
}

#feedback-form .flex-col {
	padding: 2rem;
	border: 3px solid var(--bgLogo);
}

#feedback-form input,
#feedback-form textarea {
	border: 2px solid #e8e8ea;
	padding: 0.5rem;
	border-radius: 5px;
}

#feedback-form select {
	border: 2px solid #e8e8ea;
	padding: 0.5rem;
	border-radius: 5px;
	background: transparent;
}

#feedback-form input:focus-visible,
#feedback-form textarea:focus-visible {
	outline: unset;
}

#feedback-form .cross {
	font-size: 2rem;
	color: black;
	position: absolute;
	top: 2%;
	right: 2%;
	cursor: pointer;
}

@media only screen and (min-width: 350px) and (max-width: 910px) {
	* {
		overflow-x: hidden;
	}

	html {
		font-size: 100%;
	}

	.container {
		width: var(--mobileWidth);
	}

	.L2 ul {
		gap: 1rem;
		justify-content: center;
	}

	.dots__dot {
		width: 0.5rem;
		height: 0.5rem;
	}

	.digital-resource .flex-row {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem !important;
		justify-items: center;
	}

	.digital-resource img {
		width: 100%;
		max-width: 80vw;
	}

	.event {
		width: 100%;
	}

	.event a button {
		right: 25px;
		bottom: 15px;
		font-size: smaller;
	}

	.upcoming .flex-row {
		flex-direction: column;
		gap: 1rem;
	}

	.library {
		flex-direction: column;
	}

	.library img {
		width: 100%;
	}

	.library .flex-col {
		width: 100%;
	}

	footer .flex-row {
		flex-direction: column;
		gap: 2rem;
	}

	.copyright {
		padding: 0 1rem;
		text-align: center;
	}

	/* touch devices */
	.mobile-nav-trigger {
		display: block;
	}

	.mobile-nav {
		display: block;
	}

	nav .L2 {
		display: none;
	}
}

@media (hover: none) {
}