@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: #25252b;
	--pureBlack: #15131d;

	/*  */
	--mobileWidth: clamp(300px, 90vw, 800px);
	--optimalWidth: clamp(815px, 85vw, 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;

	/*  */

	--gridItemSpeed: 550ms;
}

html {
	overflow-x: hidden;
	font-size: 100%;
	background-color: white;
	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;
} */

.container {
	width: var(--optimalWidth);
	margin: 0 auto;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: var(--defaultFontSize);
	/* overflow: hidden; */
}

img {
	user-select: none;

	/* drag */
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

.full-bg-img img {
	width: 100vw;
	display: block;
}

.flex-row {
	display: flex;
}

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

.grid {
	display: grid;
}

/* button drop down */

.collapsible::after {
	color: #fff;
}

.active-1:after {
	content: "\2212";
}

.collapsible:after {
	content: "\002B";
	color: #110252;
	font-weight: bold;
	float: right;
	margin-left: 5px;
}
/* end of button drop down */
.page-divider {
	height: 2px;
	width: 100%;
	background-color: var(--textWhite);
	margin: 1.5rem 0;
}

button:not([disabled]) {
	cursor: pointer;
}

.anchor-color {
	color: #cd9c4b;
}

select:disabled {
	opacity: 0.5;
}

.hero img {
	width: 100vw;
}

.gap-s {
	gap: 1rem;
}

.grid22 {
	grid-template-columns: repeat(2, 1fr) !important;
	max-width: var(--optimalWidth);
}

.grid .img-container {
	width: 100%;
}

/* Navigation bar */

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

nav a:hover {
	text-decoration: underline;
}

nav .container {
	align-items: flex-end;
}

nav .flex-row {
	padding: 0.5rem;
}

.back-to-top {
	width: 50px;
	height: 50px;
	background: linear-gradient(
		180deg,
		rgb(34, 31, 60) 0%,
		rgb(131, 139, 142) 100%
	);
	border-radius: 50%;
	position: fixed;
	bottom: 25px;
	right: 25px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 1;
	cursor: pointer;
}

.back-to-top::after {
	position: relative;
	content: "\21D1";
	display: flex;
	justify-content: center;
	font-size: 2rem;
	font-weight: bold;
	color: white;
}

/*  */

.hero img {
	width: 100vw;
	display: block;
}

.artworks {
	margin: 1.5rem 0;
}

.artworks img {
	width: clamp(300px, 30vw, 500px);
}

.artworks .grid {
	grid-template-columns: repeat(
		auto-fit,
		minmax(clamp(180px, 15vw, 300px), 1fr)
	);
	justify-items: center;
	gap: 1rem;
}

.artworks .grid a {
	transition: var(--gridItemSpeed);
	position: relative;
}

.filter-grid {
	margin: 3rem auto;
	margin-top: unset;
}

.filter-grid select {
	background: var(--pureBlack);
	color: var(--textWhite);
	font-size: var(--fontSizeMedium);
	padding: 1rem;
	border-bottom: 1px solid white;
	width: clamp(350px, 30vw, 1000px);
}

.filter-grid option,
.filter-grid optgroup {
	font-size: var(--fontSizeOK);
}

.idea::before,
.craft::before,
.finalist::before {
	--awLabel: clamp(80px, 3vw, 150px);
	position: absolute;
	content: "";
	right: 5px;
	bottom: -30px;
	width: var(--awLabel);
	height: var(--awLabel);
	background-size: var(--awLabel);
	background-repeat: no-repeat;
}

.idea::before {
	background-image: url("images/idea.webp");
}

.craft::before {
	background-image: url("images/craft.webp");
}

.finalist::before {
	background-image: url("images/artwork.webp");
}

.craft:not(.finalist)::after,
.idea:not(.finalist)::after {
	position: absolute;
	content: "";
	left: 0;
	width: clamp(80px, 3vw, 150px);
	height: clamp(80px, 3vw, 150px);

	background-image: url("images/winner.webp");
	background-size: clamp(80px, 3vw, 150px);
	background-repeat: no-repeat;
}

/* modal */
body.modal-open {
	height: 100vh;
	overflow-y: hidden;
	padding-right: 15px; /* Avoid width reflow */
	position: fixed;
}

.modal h5 {
	font-size: var(--fontSizeMedium);
	margin-bottom: 1rem;
}

.modal {
	position: fixed;
	width: var(--optimalWidth);
	height: 100vh;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1;
	background-color: var(--bgTheme);
	padding: 5rem;
	color: var(--textWhite);
	overflow-y: scroll;
	visibility: hidden;
	opacity: 0;
}

.modal .flex-col {
	gap: 2rem;
	margin-bottom: 5rem;
}

.modal.modal-open::-webkit-scrollbar {
	background-color: transparent;
}

.modal.modal-open::-webkit-scrollbar-thumb {
	background-color: #5b5b5b;
}

.modal.modal-open {
	z-index: 1;
	transition: var(--speedFast);
	visibility: visible;
	opacity: 1;
}

.modal-close-button {
	display: flex;
	justify-content: flex-end;
}

.modal-close-button button {
	background: transparent;
	font-size: 2rem;
}

.video-container {
	position: relative;
	width: clamp(300px, 60vw, 1200px);
	height: calc(clamp(300px, 60vw, 1200px) * 0.5265);
}

.img-container {
	/* width: 100vw;
    height: 100vh;
    overflow: hidden; */
	/* width: clamp(300px, 60vw, 1200px); */
	width: clamp(500px, 80vw, 1500px);
	width: 100%;
}

.img-container img {
	width: 100%;

	/* width: 100%;
    height: 100%;
    object-fit: cover; */
	display: block;
}

/* footer */

footer {
	color: var(--textWhite);
	margin-top: 5rem;
	background-color: var(--pureBlack);
}

footer .map {
	flex-grow: 2;
}

footer .container .flex-row {
	justify-content: center;
	gap: 5rem;
	margin-top: 6rem;
}

footer h5 {
	font-size: var(--fontSizeMedium);
	text-transform: uppercase;
}

footer h6 {
	color: #cd9c4b;
	font-size: var(--fontSizeOK);
	margin: 1rem 0;
}

footer .L2.container {
	margin: 1.5rem auto 0;
	padding-bottom: 1.5rem;
	flex-direction: column;
	align-items: center;
}

@media only screen and (min-width: 300px) and (max-width: 910px) {
	.grid22 {
		grid-template-columns: 10fr !important;
	}
	.container {
		width: var(--mobileWidth);
	}

	.accordion-wrapper .img-container img {
		width: 100% !important;
	}

	/* .artworks img {
		width: clamp(180px, 100%, 90vw);
	}

	.modal {
		padding: 1rem;
	} */

	.title-wrapper h2,
	.title-wrapper h1 {
		line-height: 1.1;
	}

	.video-container {
		width: clamp(300px, 90vw, 1200px);
		height: calc(clamp(300px, 90vw, 1200px) * 0.5265);
	}

	.img-container {
		width: clamp(600px, 500vw, 2000px);
	}

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

	footer .L2 h7 {
		text-align: center;
	}
}

/* Grid on different media size */

@media only screen and (min-width: 350px) and (max-width: 399px) {
	.artworks .grid {
		grid-template-columns: 2fr;
	}

	.idea::before,
	.craft::before,
	.finalist::before {
		--awLabel: clamp(80px, 30vw, 150px);
		bottom: -15%;
	}
}

@media only screen and (min-width: 400px) and (max-width: 549px) {
	.artworks .grid {
		/* grid-template-columns: 1fr 1fr; */
	}

	.finalist::before {
		--awLabel: clamp(80px, 20vw, 150px);
		bottom: -20%;
	}
}

@media only screen and (min-width: 550px) and (max-width: 810px) {
	.artworks .grid {
		/* grid-template-columns: 1fr 1fr 1fr; */
	}

	.finalist::before {
		--awLabel: clamp(80px, 15vw, 150px);
		bottom: -25%;
	}
}