:root {
	/* colors */
	--text-colour: rgb(252, 234, 255);
	--highlight-colour: rgb(202, 176, 255);
	--base-bg-colour: rgb(30, 30, 46);
	--dark-bg-colour: 24, 24, 37;
	--darkest-bg-colour: 17, 17, 27;
}

body {
	font-family: 'Courier', monospace;
	margin: 0;

	background-color: rgb(var(--darkest-bg-colour));
	color: var(--text-colour);
}

#container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	/* this centers the entire page */
}

/* the area below is for all links on page
EXCEPT for navigation */
	#container a {
	color: var(--highlight-colour);
	text-decoration: none;
	font-weight: bold;
}

#container a:hover {
	color: var(--text-colour);
}

* {
	box-sizing: border-box;
}

/* navigation section */
#navbar {
	height: 40px;
	background-color: rgb(var(--darkest-bg-colour));
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 1000;
}

#navbar ul {
	display: flex;
	padding: 0;
	margin: 0;
	list-style-type: none;
	justify-content: space-evenly;
}

#navbar li {
	padding-top: 10px;
}

/* navigation links*/
#navbar li a {
	color: var(--highlight-colour);
	/* navbar text color */
	font-weight: 800;
	text-decoration: none;
}

#navbar li a:hover {
	color: var(--text-colour);
	text-decoration: none;
}

#flex {
	display: flex;
	flex: 1;
	align-items: stretch;
	min-height: calc(100vh - 80px);
}

/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
	background-color: rgb(var(--dark-bg-colour));
	flex: 0.3;
	width: 200px;
	padding: 20px;
	align-self: stretch;
}

main {
	background-color: var(--base-bg-colour);
	flex: 1;
	/* padding: 20px; commented out for .carousel bg stretch*/
	order: 2;
	/* trying to make .carousel stretch and scroll */
	width: 100%;
	overflow: hidden;
}

main h1 {
	padding-inline: 20px;
}

main h2 {
	padding-inline: 20px;
}

main p {
	padding-inline: 20px;
}

main ul {
	padding-inline: 20px;
	list-style-position: inside;
}

/* "order" value tells the CSS the order in which to display columns
left sidebar is 1, content is 2, and right sidebar is 3! */

#leftSidebar {
	order: 1;
}

footer {
	background-color: rgb(var(--darkest-bg-colour));
	width: 100%;
	height: 40px;
	padding: 10px;
	text-align: center;
}

h1,
h2,
h3,

h1 {
	font-size: 25px;
}

h2 {
	font-size: 20px;
}

.box {
	background-color: rgb(var(--darkest-bg-colour));
	border: 1px solid var(--highlight-colour);
	padding: 10px;

	overflow: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.carousel {
	background-color: rgb(var(--darkest-bg-colour));
	/* border: 1px solid var(--highlight-colour); */
	padding: 10px;
	display:flex;
	flex-direction:row;
	overflow:auto;
	align-items:center;
	gap:10px;
	width: 100%;
	/* keep overflow inside the carousel */
	overflow-x: auto;
	overflow-y: hidden;
	/* prevent page-wide horizontal scrolling */
	max-width: 100%;
}

/* stop images from shrinking */
.carousel img {
	display: block;
	object-fit: cover;
	flex-shrink: 0;
	transition: .3s ease;
}

/* stop link from shrinking too */
.carousel a {
	flex-shrink: 0;
}

.carousel-element {
	position: relative;
	display: block;
	flex-shrink: 0;
	overflow: hidden;
}

.overlay {
	transition: .3s ease;
	background-color: rgba(var(--darkest-bg-colour), 0.5);
	opacity: 0;
	
	position: absolute;
	inset: 0;
	
	display:flex;
	justify-content: center;
	align-items:center;
}

.overlay-content {
	text-align:center;
}

.carousel-element:hover .overlay {
	opacity: 1;
}

/* BELOW THIS POINT IS MEDIA QUERY */

/*change the width of page
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the 
"max-width" value below
*/

@media only screen and (max-width: 800px) {
	/* Enable horizontal scrolling on the flex row so the user
	   can swipe to see just the main content */
	#flex {
		overflow-x: auto;
		/* Snap scrolling makes it feel intentional on touch */
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	/* Sidebar: fixed narrow width, shrinks to ~30% of viewport.
	   Snaps into place when scrolled to. */
	aside {
		flex: 0 0 min(200px, 70vw);
		width: min(200px, 70vw);
		min-width: 0;
		scroll-snap-align: start;
		position: sticky;
		top: 40px;
		/* sidebar text overflow fix hopefully */
		word-wrap: break-word;
		overflow-wrap: break-word;
		overflow-x: hidden;
	}

	/* Main content fills the full viewport width so it reads
	   cleanly once the user scrolls past (or ignores) the sidebar */
	main {
		flex: 0 0 100vw;
		width: 100vw;
		min-width: 0;
		scroll-snap-align: start;
		order: 2;
	}

	#leftSidebar {
		order: 1;
	}