@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
	--text-color: #ffd2d2;

	--background-dark-color: #3f354b;
	--background-light-color: #4e3052;

	--box-color: #604564;
	--box-outline: #8d6484;
	--box-outline-hover: #b3849f;
	--shadow-color: #2f2635;
}

html {
	scrollbar-color: var(--box-outline) #00000000;
}

body {
	font-family: "Jetbrains Mono", monospace;
	font-optical-sizing: auto;
	text-align: center;
	color: var(--text-color);

	background: linear-gradient(135deg, var(--background-dark-color) 0%, var(--background-light-color) 100%);
	background-attachment: fixed;
	min-height: 100vh;
}

nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 10px;
}

header {
	font-size: large;
	padding-bottom: 30px;
	
	#burger {
		display: none;
	}
	.show-tabs {
		display: none;
	}

	nav {
		.btn {
			width: 120px;
		}
	}
}

.box {
	background-color: var(--box-color);
	border: 1px solid var(--box-outline);
	border-radius: 30px;
	padding: 1.5%;

	transition: box-shadow 0.15s ease-out;
	transition: border 0.3s ease-out;

	img {
		max-width: 95%;
		height: auto;
	}
}
.box:hover {
	box-shadow: 3px 3px 10px var(--shadow-color);
	border: 1px solid var(--box-outline-hover);
}

.btn {
	color: var(--text-color);
	background-color: var(--background-light-color);
	border: 1px solid var(--box-outline);
	border-radius: 20px;
	padding: 12px;

	position: relative;
	top: 0px;

	transition: top 0.3s ease-in-out;
	transition: scale 0.3s ease-in-out;
	transition: box-shadow 0.15s ease-out;
	transition: background-color 0.15s ease-in-out;
	transition: border-color 0.15s ease-in-out;
	transition: opacity 0.2s ease-out;
}
nav:hover .btn:not(:hover) {
	opacity: 0.65;
}
.btn:hover {
	background-color: var(--box-color);
	border-color: var(--box-outline-hover);
	top: -3px;
	scale: 105%;
	box-shadow: 2px 2px 5px var(--shadow-color);
}

.fancy-img {
	border: 1px solid var(--box-outline);
	border-radius: 15px;

	max-height: 450px;
	width: auto;

	transition: box-shadow 0.1s ease-out;
	transition: border 0.3s ease-out;
}
.fancy-img:hover {
	box-shadow: 3px 3px 10px var(--shadow-color);
	border: 1px solid var(--box-outline-hover);
}

#content {
	width: 52.5%;
	margin-left: auto;
	margin-right: auto;

	nav {
		flex-direction: column;
		align-items: center;

		.btn {
			width: 50%;
		}
	}
}

#sidebar {
	width: 16%;
	float: right;
	position: fixed;
	right: 2%;
	top: 50%;
	transform: translate(0%, -50%);

	nav {
		height: 100%;
		flex-direction: column;
		flex-wrap: nowrap;
	}
}

@media screen and (max-width: 900px) {
	header {
		.show-tabs {
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 10px;
			font-size: larger;
			width: 60px;
		}

		#burger:not(:checked) ~ nav {
			visibility: collapse;
			height: 0;
		}

		#burger:checked ~ nav {
			flex-direction: column;
			align-items: center;

			.btn {
				width: 90%;
			}
		}
	}

	#content {
		width: 95%;
	}

	#sidebar {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 15px;
		position: static;
		float: none;
		transform: translate(0%, 0%);
	}
}