:root {
	--background-color: rgb(71, 71, 71);
	--foreground-color: rgb(110, 110, 110);
	--element-color: rgb(53, 53, 53);
	--standard-text-color: white;
	--heading-color: rgb(0, 0, 110);
	--standard-font: "Trebuchet MS";
	--code-font: "Courier New";
	--transition-time: 0.2s;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--background-color);
}



/*Menu Bar CSS*/
.scrappy_menu_bar {
	text-align: center;
	position: sticky;
	top: 0;
	margin: 0;
	padding: 1.5%;
	font-family: var(--standard-font);
	background-color: var(--foreground-color);
	min-width: 100%;
	z-index: 2;
}

.scrappy_menu_bar>h1 {
	color: var(--heading-color);
	font-family: var(--standard-font);
	margin: 0;

}

.scrappy_menu_bar>button {
	background-color: var(--element-color);
	color: var(--standard-text-color);
	border-radius: 8px;
	border-width: 0;
	padding: 10px 24px;
	outline: none;
	font-size: 18pt;
	opacity: 0.7;
	transition-duration: var(--transition-time);
	transition-timing-function: ease-in;
	transition-property: var(--transition-time);
	margin: 10px;

}

.scrappy_menu_bar>button:hover {
	transition-duration: var(--transition-time);
	transition-timing-function: ease-in;
	transition-property: opacity;
	opacity: 1;
}

.scrappy_menu_bar>#selected {
	opacity: 1;
}

select {
	background-color: var(--element-color);
	color: var(--standard-text-color);
	border-radius: 8px;
	border-width: 1px;
	border-color: black;
	color: var(--standard-text-color);
	padding: 5px 12px;
	outline: none;
	font-size: 12pt;
	margin: 4px;
	opacity: 0.7;

}

input {
	background-color: var(--element-color);
	color: var(--standard-text-color);
	border-radius: 8px;
	border-width: 1px;
	border-color: black;
	color: var(--standard-text-color);
	padding: 5px 12px;
	outline: none;
	font-size: 12pt;
	margin: 4px;
	opacity: 0.7;

}

option {
	background-color: var(--element-color);
	color: var(--standard-text-color);
	border-radius: 8px;
	border-width: 1px;
	border-color: black;
	color: var(--standard-text-color);
	padding: 5px 12px;
	outline: none;
	font-size: 12pt;
	margin: 4px;
	opacity: 0.7;

}

button {
	background-color: var(--element-color);
	color: var(--standard-text-color);
	border-radius: 8px;
	border-width: 1px;
	border-color: black;
	color: var(--standard-text-color);
	padding: 5px 12px;
	outline: none;
	font-size: 12pt;
	opacity: 0.7;
	transition-duration: var(--transition-time);
	transition-timing-function: ease-in;
	transition-property: var(--transition-time);
	margin: 4px;

}

button:hover {
	transition-duration: var(--transition-time);
	transition-timing-function: ease-in;
	transition-property: opacity;
	opacity: 1;
}

button:active {
	transition-duration: var(--transition-time);
	transition-timing-function: ease-in;
	transition-property: opacity;
	opacity: 0.3;
}

.scrappy_section {
	background-color: var(--element-color);
	color: var(--standard-text-color);
	border-radius: 8px;
	border-width: 1px;
	border-color: var(--foreground-color);
	padding: 10px 24px;

	outline: none;
	margin: 10px;
}

p {
	font-family: var(--standard-font);
	color: var(--standard-text-color);
	margin: 4px;
	
}

h1 {
	font-family: var(--standard-font);
	color: var(--heading-color);
	margin: 4px;
	
}

h2 {
	font-family: var(--standard-font);
	color: var(--standard-text-color);
	margin: 4px;
	
}

h3 {
	font-family: var(--standard-font);
	color: var(--standard-text-color);
	margin: 4px;
	
}

body>* {
	font-family: var(--standard-font);
	color: var(--standard-text-color);
	margin: 4px;
	overflow-wrap: break-word;
	

}