@import url(font.css);

:root {
	--bg: #fff;
	--bg-side: #ddd;
	--fg: #0d0909;
	--link: #42717b;
	--alert: #ffbd77;
	--visited: #8542ff;
}


html {
	background-color: var(--bg-side);
}

body {
	background-color: var(--bg);
	color: var(--fg);
	margin: 25px auto;
	width: 550px;
	padding: 1px 30px;
	font-family: "EB Garamond", "Times New Roman", Times, sans-serif;
	font-size: 14pt;
	line-height: 1.6;
}

code {
	font-family: "Iosevka Term", monospace;
}

nav {
	float: right;
}

.next-meeting {
	text-align: center;
	background-color: var(--alert);
}

.next-meeting a {
	color: var(--link);
	filter: brightness(1.5);
}

#landing {
	padding: 4px;
}


a:link {
	text-decoration: none;
	color: var(--link);
}

a:hover {
	text-decoration: underline;
	font-style: italic;
}

a:visited {
	color: var(--visited);
}

.action_button, .lesser_action_button {
	padding: 10px;
	text-decoration: none;
	text-align: center;
	font-size: 16pt;
}

.action_button:hover, .lesser_action_button:hover {
	font-style: normal;
}

.action_button {
	background-color: var(--fg);
	color: var(--bg);
}

.action_button:link {
	color: var(--bg);
}

.action_button:visited {
	color: var(--bg);
}

.lesser_action_button {
	border: 2px solid var(--fg);
}

.lesser_action_button:link {
	color: var(--fg);
}

.lesser_action_button:visited {
	color: var(--fg);
}

img {
	max-width: 550px;
}

.profile {
	max-width: 128px;
	border-radius: 100%;
}

textarea, input {
	font-size: 14pt;
	background-color: var(--bg);
	color: var(--fg);
	border: 2px solid var(--fg);
	padding: 6px;
	margin: 6px;
	overflow: scroll;
	font-family: "EB Garamond", "Times New Roman", serif;
}

input[type=submit] {
	background-color: var(--fg);
	color: var(--bg);
}

input[type=submit]:hover {
	text-decoration: underline;
}

@media only screen and (max-wdith: 768px), (orientation: portrait) {
	body {
		max-width: 90%;
	}

	nav {
		font-size: 11.5pt;
	}

	img {
		max-width: 99.99%;
	}
}

mark {
	background-color: var(--alert);
	color: var(--fg);
	--link: #42717b;
}

@media (prefers-color-scheme: dark) {
	mark {
		--link: #2aa3be;
	}
}

#team {
	list-style-type: none;
	padding: 0 10px;
}

#team li {
	display: flex;
	align-items: center;
	font-size: 24px;
	margin-bottom: 20px;
}

#team img {
	margin-left: auto;
}

pre {
    white-space: pre-wrap; 
    word-wrap: break-word;
    background: #f4f4f4; 
    padding: 10px;
} 

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #000;
		--bg-side: #333;
		--fg: #ffebeb;
		--link: #6d878d;
		--alert: #ca6800;
		--visited: #9b64fb;
	}

	mark {
		background-color: var(--fg);
		color: var(--bg);
		--link: #2aa3be;
	}

    pre {
        background: #3a3a3a;
    }
}