/*
  Import all sub css files.
  *NOT RECOMMENDED* Only remove if you will load them seperately in each project file.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("/inc/css/reset.css");
@import url("/inc/css/sidebar.css");
@import url("/inc/css/aboutme.css");
@import url("/inc/css/leeruitkomsten.css");
/* 
  ^^^ I REPEAT, DO NOT TOUCH THESE FILES IF YOU DON'T KNOW WHAT YOU'RE DOING. ^^^
*/

/*
  Here CSS custom properties (variables) for primary color, highlight color, and background color are defined.
  Feel free to change the colors around.
  For the --primary-color-rgb, use a tool such as https://www.rapidtables.com/convert/color/hex-to-rgb.html and paste the rgb value here.
*/
:root {
	--primary-color: #10b981;
	--primary-color-rgb: 16, 185, 129; /* RGB value from the tool will be pasted here */

	--primary-highlight: #14e8a2;

	--background-color: #131318;
}

/* Define styles for body, links, sections, and table elements */
body {
	/* Max width for the body, centers it too */
	max-width: 1200px;
	margin: 0 auto;
}
a {
	/* Link color */
	color: var(--primary-color);
}
section {
	/* Default margin for sections */
	margin: 20px 0;
}
table,
th,
td {
	/* Table styles for the survey page */
	border: 1px solid white;
	text-align: left;
}

/* Define various utility and component styles */
.mb-2 {
	/* Adds a margin bottom of 2 rem. Is used a lot so don't touch. */
	margin-bottom: 2rem;
}
.image-full {
	/* Full with of the image */
	width: 100%;
	height: auto;
}
.image-2q {
	/* Half with of the image (2 quarters) */
	width: 50%;
	height: auto;
}
.image-1q {
	/* 1/4th with of the image (1 quarter) */
	width: 25%;
	height: auto;
}
.image-3q {
	/* 3/4th with of the image (3 quarters) */
	width: 75%;
	height: auto;
}
.link-underline {
	/* Underline for links */
	text-decoration: underline;
}
.badge__container {
	/* Container for badges so that they don't get placed under each other but next to each other */
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.badge {
	/* Badge styles */
	background-color: var(--primary-color);
	color: var(--background-color);
	padding: 5px 10px;

	border-radius: 1000px;
	width: fit-content;
}
.fit-content {
	/* Fit content class used for some buttons. Do not remove before altering other classes first. */
	width: fit-content;
}
.button {
	/* Button styles */
	background-color: var(--primary-color);
	color: var(--background-color);
	font-weight: bold;
	padding: 10px 20px;
	/* border-radius: 5px; Obsolete code */
	cursor: pointer;
}
.button:hover {
	/* Button hover style */
	background-color: rgba(var(--primary-color-rgb), 0.8);
}
.highlight {
	/* Highlight style */
	color: var(--primary-highlight);
}

/* Define styles for .wrapper .content and its .container child 
The wrapper classes are the containers in this project. */
.wrapper .content {
	margin-left: 425px;
	color: white;
	padding: 20px 30px;
}

/* Define custom styles for the webkit scrollbar, track, and thumb */
::-webkit-scrollbar {
	width: 10px; /* Set the width of the scrollbar */
}

::-webkit-scrollbar-track {
	background: var(
		--background-color
	); /* Set the background color of the scrollbar track */
}

::-webkit-scrollbar-thumb {
	background: var(
		--primary-color
	); /* Set the background color of the scrollbar thumb */
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(
		var(--primary-color-rgb),
		0.5
	); /* Change the background color of the scrollbar thumb on hover */
}