@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--color1: #0b0d10;
	--color2: #6957d1;
	--color3: #161a20;
	--color4: #C8ACD6;

	--color-sidebar: #0b0d106c;

	--color-h1: rgb(226, 226, 226);
	--color-h2: rgb(208, 179, 211);
	--color-h3: rgb(181, 141, 185);
	--color-p: rgb(240, 240, 240);
}

* {
	margin: 0;
	padding: 0;
}

html {
	font-family: 'Kanit', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, monospace;
	line-height: 1.5rem;
	font-size: 17px;
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	overflow-y: auto;
	display: grid;
	grid-template-columns: auto 1fr;
	background-image: linear-gradient(to bottom right, hsl(207, 100%, 5%), hsl(293, 100%, 5%));
}

#sidebar {
	box-sizing: border-box;
	height: 100vh;
	width: 250px;
	padding: 5px 1em;
	border-right: 1px solid #6957d1a8;
	background-color: var(--color-sidebar);
	backdrop-filter: blur(10px);

	position: sticky;
	top: 0;
	align-self: start;

	transition: 300ms ease-in-out;
	text-wrap: nowrap;
}

#sidebar.close {
	padding: 5px;
	width: 54px;
	overflow: hidden;
}

#toggle-btn {
	margin-left: auto;
	padding: 10px;
	border: none;
	border-radius: .5em;
	background: none;
	cursor: pointer;

	svg {
		transition: rotate 150ms ease;
	}
}

#toggle-btn:hover {
	background-color: var(--color3);
}


#sidebar svg {
	flex-shrink: 0;
	fill: var(--color-h1);
}

#sidebar a span,
#sidebar .dropdown-btn span {
	flex-grow: 1;
}

#sidebar a:hover,
#sidebar .dropdown-btn:hover {
	background-color: var(--color3);
}

#sidebar a:has(.logo):hover {
	background-color: unset;
}

#sidebar .sub-menu {
	display: grid;
	transition: 300ms ease-in-out;
	grid-template-rows: 0fr;

	>div {
		overflow: hidden;
	}

	a {
		padding-left: 2em;
	}
}

#sidebar .sub-menu.show {
	grid-template-rows: 1fr;
}


.dropdown-btn svg {
	transition: 200ms ease;
}

.rotate svg:last-child {
	rotate: 180deg;
}

#sidebar ul {
	list-style: none;
}

#sidebar>ul>li:first-child {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;

	.logo {
		font-size: 1.2em;
		font-weight: 500;
	}
}

#sidebar a,
#sidebar .dropdown-btn,
#sidebar .logo {
	border-radius: 0.5em;
	padding: 0.5em;
	text-decoration: none;
	color: var(--color-h1);
	display: flex;
	align-items: center;
	gap: 1em;
}

.dropdown-btn {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	font: inherit;
	cursor: pointer;
}

#sidebar ul li.active a,
#sidebar ul li button.active {
	color: var(--color2);

	svg {
		fill: var(--color2);
	}
}

main {
	z-index: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
}

main h1,
main h2,
main h3,
main p {
	margin-top: 0px;
	margin-bottom: 0px;
}

main h1 {
	font-size: 70px;
	line-height: 1em;
	color: var(--color-h1);
	text-shadow: #b565ff9a 0px 3px 3px;
	cursor: default;
	user-select: none;
	text-align: center;
	margin-bottom: 0.3em;
}

main h2 {
	color: var(--color-h2);
	text-shadow: #6432929a 0px 3px 3px;
	cursor: default;
	user-select: none;
	font-variant: small-caps;
}

main h3 {
	color: var(--color-h3);
	text-shadow: #6432929a 0px 3px 3px;
	cursor: default;
	user-select: none;
	font-variant: small-caps;
}

main p {
	font-size: 1em;
	font-weight: 300;
	color: var(--color-p);
	text-align: justify;
	letter-spacing: 1px;
}

#main-container {
	box-sizing: border-box;
	margin-bottom: 20px;
	/* padding: 10px max(25%, 100px); */
	/* padding: 10px min(20vw, 350px); */

	/* width: calc(100vw - 50px); */
	width: min(1000px, 60vi);

	display: flex;
	flex-direction: column;
	gap: 1em;
}

.container {
	border: 1px var(--color2) solid;
	padding: 15px;

	border-radius: 20px;
	background-color: var(--color-sidebar);
	z-index: 0;

	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

#links {
	gap: 0.5em;
	/* display: grid; */
	/* grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); */
	display: flex;
	justify-content: space-around;
}

.link-btn {
	background-color: var(--color3);
	font-family: 'Kanit';
	color: #f0f0f0;
	position: relative;

	padding: 0.5em;
	border: none;
	border-radius: 10px;

	display: flex;
	justify-content: center;
	align-items: center;

	flex-grow: 0.2;

	svg {
		max-height: 1.5em;
		fill: var(--color-p);
	}
}

.link-btn::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 2px;
	border-radius: 10px;
	background-image: linear-gradient(to bottom right, #008cff, #e100ff);
	z-index: -1;
}

.link-btn:hover {
	box-shadow: 40px 0 100px #008cff70, -40px 0 100px #e100ff70;
	cursor: pointer;
	animation-fill-mode: forwards;
	z-index: 2;
	animation: pop 0.3s ease-in-out;



	svg {
		transition: .3s ease-in-out;
		fill: var(--color1);
		rotate: 360deg;
		scale: 1.4;
	}
}

@keyframes pop {

	0%,
	100% {
		transform: scale(100%);
	}

	50% {
		transform: scale(110%);
	}
}

.gallery {
	display: grid;
	/* border: 1px solid red; */
	grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
	gap: 10px;
	max-height: 400px;
	overflow-y: hidden;
}

.gallery.expanded {
	max-height: fit-content;
	overflow-y: auto;
}

@supports selector(::-webkit-scrollbar) {
	.gallery::-webkit-scrollbar {
		height: 8px;
	}
	
	.gallery::-webkit-scrollbar-thumb {
		background-color: var(--color2);
		border-radius: 4px;
	}
}

.gallery .galleryElement {
	width: 100%;
	/* margin-bottom: 15px; */
	break-inside: avoid;
}

.galleryElement img {
	max-width: 100%;
	border-radius: 10px;
}

.expandBtnArea {
	display: flex;
	justify-content: center;
	width: 100%;
}

.expandGalleryBtn {
	background-color: var(--color3);
	color: #f0f0f0;
	position: relative;

	height: 3em;
	width: 3em;

	padding: 0.5em;
	border: none;
	border-radius: 100%;

	display: flex;
	justify-content: center;
	align-items: center;

	svg {
		max-height: 1.5em;
		fill: var(--color-p);
	}
}

.expandGalleryBtn::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 2px;
	border-radius: 100%;
	background-image: linear-gradient(to bottom right, #008cff, #e100ff);
	z-index: -1;
}

.expandGalleryBtn:hover {
	box-shadow: 40px 0 100px #008cff70, -40px 0 100px #e100ff70;
	cursor: pointer;
	animation-fill-mode: forwards;
	z-index: 2;
	animation: pop 0.3s ease-in-out;

	svg {
		transition: .3s ease-in-out;
		fill: var(--color1);
		scale: 1.4;
	}
}

@media(max-width:1200px) {
	/* .gallery {
		columns: 2;
	} */
}

@media(max-width: 800px) {
	body {
		grid-template-columns: 1fr;
	}

	main {
		padding: 2em 3em 60px 3em;
	}

	#main-container {
		border: none;
		padding: 0;
	}

	nav {
		z-index: 1;
	}

	#sidebar {
		height: 60px;
		width: 100%;
		border-right: none;
		border-top: 1px solid var(--color2);
		padding: 0;
		position: fixed;
		top: unset;
		bottom: 0;

		>ul {
			padding: 0;
			display: grid;
			grid-auto-columns: 60px;
			grid-auto-flow: column;
			align-items: center;
			justify-content: center;
			overflow-x: auto;
		}

		ul li {
			height: 100%;
		}

		ul a,
		ul .dropdown-btn {
			width: 60px;
			height: 60px;
			padding: 0;
			border-radius: 0;
			justify-content: center;
		}

		ul li span,
		ul li:first-child,
		.dropdown-btn svg:last-child {
			display: none;
		}

		ul li .sub-menu.show {
			position: fixed;
			bottom: 60px;
			left: 0;
			box-sizing: border-box;
			height: 60px;
			width: 100%;
			background-color: var(--color3);
			border-top: 1px solid var(--color2);
			display: flex;
			justify-content: center;

			>div {
				overflow-x: auto;
			}

			li {
				display: inline-flex;
			}

			a {
				box-sizing: border-box;
				padding: 1em;
				width: auto;
				justify-content: center;
			}
		}
	}

	#sidebar.close {
		padding: 0;

		height: 60px;
		width: 100%;
		overflow: unset;
	}

	.gallery {
		display: unset;
		columns: 1;
	}
}