/* font import */
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

html.lightMode {
	--primary: #B7E4E2;
	--secondary: #31ACBA;
	--secondaryHover: #056472;
	--textPrimary: black;
	--textSecondary: white;
	--linkHover: blue;
	--searchBar: white;
	--saturation: 100%;
	--tertiary: #2f7299;
	--tertiaryHover: #2c566e;
	--textTertiary: #ffffff;
}

html.darkMode {
	--primary: #121212;
	--secondary: #1f1f1f;
	--secondaryHover: #121212;
	--textPrimary: #C4C4C4;
	--textSecondary: #C4C4C4;
	--linkHover: #a1c6ff;
	--searchBar: #222b2e;
	--saturation: 60%;
	--tertiary: #3d4042;
	--tertiaryHover: #27292c;
	--textTertiary: #ffffff;
}

html.scratchMode {
	--primary: #fcfcfc;
	--secondary: #4d97fe;
	--secondaryHover: #4588e5;
	--textPrimary: #565e75;
	--textSecondary: #ffffff;
	--linkHover: #4180d7;
	--searchBar: #ffffff;
	--saturation: 100%;
	--tertiary: #4588e5;
	--tertiaryHover: #3e79cc;
	--textTertiary: #ffffff;
}

html.terminalMode {
	--primary: #121212;
	--secondary: #1f1f1f;
	--secondaryHover: #121212;
	--textPrimary: #32cd32;
	--textSecondary: #32cd32;
	--linkHover: #43a343;
	--searchBar: #222b2e;
	--saturation: 60%;
	--tertiary: #3d4042;
	--tertiaryHover: #27292c;
	--textTertiary: #43a343;
}

body {
	margin: 0;
	background: #b7e4e2;
	margin:0;
	background: var(--primary);
}

a {
	color: inherit;
	background-color: inherit;
	text-decoration: underline;
}

a:visited:not(.navButton):visited {
	color: inherit;
	background-color: inherit;
	text-decoration: underline;
}

a:hover:not(.navButton):hover {
	color: var(--linkHover);
	background-color: inherit;
	text-decoration: underline;
}

button {
	cursor: pointer;
}

a, button {
    transition-duration: 0.4s;
}

/* navbar */
header {
	background: var(--secondary);
	color: var(--textSecondary);
	font-size: 20px;
	width: 100%;
	height: 70px;
	font-family: "Montserrat", Arial, sans-serif;
}

.navHomeIcon {
	padding: 3px;
	float: left;
	height: 70px;
	width: 70px;
	box-sizing: border-box;
	filter: saturate(var(--saturation));
	user-drag: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.navTitle {
	float: left;
	width: 37.5%;
	min-width: 180px;
	box-sizing: border-box;
	height: 100%;
	margin-top: 0px;
	padding-top: 10px;
	padding-left: 20px;
	margin-bottom: 0px;
}

.navButton {
	background-color: var(--secondary);
	font-size: 16px;
	color: var(--textSecondary);
	transition-duration: 0.4s;
	padding: 25px 10px 25px 10px;
	text-decoration: none;
	text-align: center;
	float: right;
	height: inherit;
	box-sizing: border-box;
}

.navButton:hover {
	background-color: var(--secondaryHover);
}

.expandableDropdown {
	background-color: var(--secondary);
	display: none;
	width: 50px;
	height: 50px;
	float: right;
	margin-right: 10px;
	margin-top: 10px;
	background-image: url("expandable.svg");
	z-index: 100;
}

.expandableLink {
	display: none;
	background-color: var(--secondary);
	font-size: 16px;
	color: white;
	padding: 10px 5px 10px 5px;
	width: 150px;
	text-decoration: none;
	text-align: center;
	float: right;
	height: 50px;
	box-sizing: border-box;
	margin: 0px;
	position: relative;
	top: 60px;
	left: 10px;
	z-index: 100;
}

@media only screen and (max-width: 1154px) {
	/* Resize Text */
	.navTitle {
		word-wrap: break-word;
		font-size: calc(30px - calc(1.2vh - 1vw));
	}

	header {
		height: auto;
		box-sizing: border-box;
		display: inline-block;
		font-size: 22px;
	}
	@media only screen and (max-width: 1000px) {
		/* Hide nav links */
		.navButton {
			display: none;
		}

		/* Show dropdown instead */
		.expandableDropdown {
			display: inline;
		}
	}
}
/* /navbar */

/* Main Page */
.homeContent {
	color: var(--textPrimary);
	font-size: 20px;
	width: 100%;
	text-align: center;
	margin-top: 0px;
	font-family: Arial, sans-serif;
	min-height: calc(100vh - 305px);
}

.homeAlert {
	background-color: var(--secondary);
	padding: 10px;
	border-radius: 15px;
	width: 60%;
	margin: auto;
	position: relative;
	color: var(--textSecondary);
	z-index: 5;
}

.closeAlert {
	position: absolute;
	right: 5px;
	top: 5px;
	margin: 5px;
}

.homeAnswers {
	margin-left: 10%;
	margin-right: 10%;
}
/* /Main Page */

/* Forum Helpers List */
.forumHelpersContent {
	font-family: Arial, sans-serif;
	margin-left: 20px;
	color: var(--textPrimary);
}

hr {
	margin: 0px 20px 0px 0px;
}

.forumHelpersNavBlock {
	border: 2px solid black;
	width: 100px;
	height: 150px;
	position: fixed;
	right: 5px;
	bottom: 5px;
	text-align: center;
	background: var(--primary);
}

@media only screen and (max-width: 800px) {
	.forumHelpersNavBlock {
		display: none;
	}
}

#searchBar {
	padding: 10px;
	width: 40%;
	min-width: 175px;
	height: 50px;
	border-radius: 10px 0px 0px 10px;
	border: 4px solid black;
	outline: none;
	box-sizing: border-box;
	border-right: none;
	background-color: var(--searchBar);
	color: var(--textPrimary);
}

#searchButton {
	padding: 10px;
	height: 50px;
	width: 10%;
	min-width: 100px;
	border-radius: 0px 10px 10px 0px;
	border: 4px solid black;
	box-sizing: border-box;
	margin-left: -7px;
	border-left: none;
	background-color: var(--secondary);
	color: var(--textSecondary);
}

#searchButton:hover {
	background-color: var(--secondaryHover);
}

#searchButton:disabled,
#searchButton:disabled:hover {
	background-color: grey;
}

#searchOptions {
	border-radius: 10px;
	margin-top: 2px;
	width: 40%;
	min-width: 175px;
	box-sizing: border-box;
	background-color: var(--secondary);
	color: var(--textSecondary);
	box-shadow: 1px 1px 10px #363636;
}

#searchOptions:empty {
	display: none;
}

.searchOption {
	padding: 5px;
	width: 100%;
	box-sizing: border-box;
	border-radius: 10px;
}

.searchOption:hover {
	cursor: pointer;
	background-color: var(--secondaryHover);
}

.forumHelpersHeader {
	text-align: center;
}

.forumHelpersSubheaders {
	width: fit-content;
	background: var(--secondary);
	color: var(--textSecondary);
	padding: 10px;
	border-radius: 10px;
}

.profileContainer {
	min-height: 130px;
}

.profileName {
	font-family: Arial, sans-serif;
}

.profileInner {
	display: grid;
	grid-template-columns: auto calc(100vw - 30vw);
	grid-template-rows: minmax(min-content, max-content);
	justify-content: start;
	align-content: start;
}

.profilePicture {
	float: left;
	border-radius: 10px;
	margin-right: 10px;
	height: 60px;
	width: 60px;
	filter: saturate(var(--saturation))
}

.profileBio {
	margin: 0px 20px 10px 0px;
	text-align: left;
}

.ocularStatusBox {
	border: 5px solid black;
	border-radius: 10px;
	padding: 5px;
	margin-right: 20%;
	width: fit-content;
	filter: saturate(var(--saturation));
}
/* /Forum Helpers List */

/* Credits */
.creditsContent {
	color: var(--textPrimary);

	font-size: 20px;
	width: 100%;
	text-align: center;
	margin-top: 0px;
	font-family: Arial, sans-serif;
}

.creditsPeople {
	display: flex;
	padding: 10px 15%;
	flex-wrap: wrap;
	justify-content: center;
}

.creditsBlock {
	padding: 20px;
	width: 250px;
	box-sizing: border-box;
}

.creditsProfilePicture {
	border-radius: 10px;
	width: 100px;
	filter: saturation(var(--saturation));
}

.creditsLink {
	color: inherit;

	text-decoration: none;
	font-weight: bold;
}

.creditsServices {
	margin: 5%
}
/* /Credits */

/* Privacy */
.privacyContent {
	color: var(--textPrimary);
	font-size: 20px;
	width: 100%;
	margin-top: 0px;
	font-family: Arial, sans-serif;
	box-sizing: border-box;
	padding: 20px;
}

.privacyWarning {
	font-family: Arial, sans-serif;
	position: fixed;
	width: 100%;
	padding: 10px;
	bottom: 0px;
	background-color: #fff959;
	text-align: center;
}

.privacyWarning:empty {
	display: none;
}

.privacyButton {
	border: 3px solid black;
	border-radius: 10px;
	padding: 10px;
	width: 100px;
}

.privacyButton:hover {
	background-color: (lightgrey);
	color: black;
}
/* /Privacy */

/* Apply */
.applyContent {
	padding: 0px 30px;
	box-sizing: border-box;
	color: var(--textPrimary);
	font-size: 20px;
	width: 100%;
	text-align: left;
	margin-top: 0px;
	font-family: Arial, sans-serif;
}
/* /Apply */

/* 404 (had to use lost since css won't use numbers at the start of class names) */
.lostTitle {
	color: var(--textPrimary);
	text-align: center;
	font-size: 30px;
	font-family: Arial, sans-serif;
	font-weight: bold;
}

.lostContent {
	color: var(--textPrimary);
	text-align: center;
	font-size: 20px;
	font-family: Arial, sans-serif;
}

.taco {
	filter: saturate(var(--saturation))
}
/* /404 */

/* Footer */
.footerContent {
	background: var(--secondary);
	color: var(--textSecondary);
	font-size: 20px;
	width: 100%;
	padding: 10px;
	height: 110px;
	box-sizing: border-box;
	text-align: center;
	font-family: Arial, sans-serif;
	line-height: 10px;
	height: auto;
}

#changeTheme {
	background-color: var(--tertiary);
	text-decoration: none;
	margin: 10px;
	padding: 20px;
	border-style: hidden;
	border-radius: 10px;
	display: inline-block;
	user-select: none; /* Repeatedly cliking the button should not select it */
}

#changeTheme:hover {
	cursor: pointer;
	color: var(--textTertiary);
	background-color: var(--tertiaryHover);
}
/* /Footer */