:root {
	--primary-color: light-dark(rgb(167, 75, 209), rgb(217, 141, 252));
}
& {
	border-top: 0.5rem solid var(--primary-color);
	color-scheme: light dark;
}
* {
	line-height: 1.5;
	color: light-dark(black, #dadada);
}
.profile-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.profile-card img {
	height: 3rem;
	width: 3rem;
}
nav img {
	height: 1.5rem;
	width: 1.5rem;
}
.flex {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
html, body, header, figure {
	margin: 0;
	word-wrap: break-word;
}
body {
	padding-bottom: 3rem;
}
td {
	align-items: center;
}
.side-by-side {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 5rem;
}
pre {
	text-wrap: wrap;
}
.side-by-side > * {
	flex: 1;
}
a {
	text-decoration: none;
}
h1 {
	margin-bottom: 1rem;
}
h1 ~ * {
	margin-top: 0;
}
label {
	cursor: pointer;
}
button, .button {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	font-size: 1.1rem;
	text-align: center;
	cursor: pointer;
	margin-bottom: 1rem;
	justify-content: center;
	color: light-dark(black, black);
	background-color: var(--primary-color);
	border: none;
	border-radius: 0.25rem;
	text-decoration: none;
	padding: 0.5rem 0;
}
svg {
	fill: light-dark(white, black);
}
.cancel {
	background-color: rgb(255, 104, 104) !important;
}
.cancel:hover {
	text-decoration: none;
	color: white;
}
a:has(button) {
	text-decoration: none;
}
a:has(button):hover {
	text-decoration: none;
}
a:has(button):hover * {
	color: initial;
	fill: initial;
}
button * {
	font-size: 1.25rem;
}
html {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.rel_me_links {
	list-style-type: none;
}
.rel_me_links li a {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
}
.rel_me_links li svg {
	fill: var(--primary-color);
}
#auth img {
	float: right;
}
small {
	display: block;
	margin-top: 1rem;
}
small code {
	font-size: small;
}
main {
	max-width: 35rem;
	margin: auto;
	padding: 1rem;
}
p, code, li {
	font-size: 1.0625rem;
	word-wrap: break-word;
}
table {
	border-radius: 10px;
	/* table-layout: fixed; */
	width: 100%;
}
details {
	width: 100%;
	box-sizing: border-box;
}
h2 {
	margin-bottom: 0.5rem;
	margin-top: 3rem;
}
h2:first-of-type {
	margin-top: 1rem;
}
h2 + * {
	margin-top: 0;
}
.message {
	border: 2px solid lightgrey;
	padding: 10px;
}
nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	flex-wrap: wrap;
	gap: 1rem;
}
nav ul {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	flex-wrap: wrap;
}
/* skip link hiding code from https://www.a11ymatters.com/pattern/skip-link/ */
.accessibility_label_top {
	position: fixed;
	top: -200px;
}
.accessibility_label_top:focus {
top: 0;
left: 50%;
padding: 10px;
}
.accessibility_label {
position: fixed;
bottom: -200px;
}
.accessibility_label:focus {
bottom: 0 !important;
left: 50%;
padding: 10px;
z-index: 1;
}
input[type="radio"] {
	min-width: auto !important;
	width: 2em;
	height: 2em;
}
nav ul {
	list-style-type: none;
	padding-left: 0;
}
.announcement p {
	margin-left: 5%;
	margin-right: 5%;
}
.article_list li {
	padding-bottom: 15px;
}
h1 {
	font-size: 2rem;
	display: inline-block;
	margin-bottom: 5px;
}
img {
	border-radius: 5px;
}
h2, h1, h3 {
	color: var(--primary-color);
}
.announcement {
	background-color: #2A7E50;
	padding: 1px;
	text-align: center;
	margin-bottom: 10px;
}
.announcement a {
	color: white;
	font-weight: 600;
	border-color: white;
}
summary {
	padding-top: 5px;
}
.feed_list {
	padding: 0;
	list-style-type: none;
}
a {
	color: var(--primary-color);
	text-decoration: underline;
}
nav a {
	text-decoration: none;
}
footer {
	margin-top: 3rem;
}
a:focus {
	background-color: var(--primary-color);
	color: white;
}

button:focus, input[type="submit"]:focus {
	background-color: var(--primary-color);
	color: white;
	outline: 3px var(--primary-color) solid;
}
pre {
	border: 1px solid var(--primary-color);
	padding: 0.25rem;
}
select {
    font-size: 1.0625rem;
    background: white;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

a:hover {
	color: rgb(151, 124, 241);
}
a:hover svg {
	fill: rgb(151, 124, 241);
}
input[type="text"], input[type="username"], input[type="password"], input[type="url"], textarea {
    padding: 0.25rem;
    border-radius: 0.25rem;
	margin-bottom: 0.25rem;
	border: 1px solid lightgrey;
    display: inline-block;
    text-align: left;
    min-width: 50%;
    font-size: 1.0625rem;
	box-sizing: border-box;
	width: 100%;
}
h1 {
	margin-top: 0;
}
input[type="submit"] {
    padding: 0.5rem;
	margin-top: 0.5rem;
	width: 100%;
    border: none;
    background-color: var(--primary-color);
	color: light-dark(white, black);
    border-radius: 10px;
    min-width: 0 !important;
    font-size: 1.1875rem;
}

@media only screen and (max-width: 767px) {
	article img, .blogList img {
		width: 100% !important;
	}
	textarea {
		width: 100%;
		box-sizing: border-box;
	}
	input[type="submit"] {
		text-align: center;
	}

	.main-photo {
		float: none !important;
		margin-left: 0;
	}
	.flex_left_home, .flex_right_home {
		flex: 0 100%;
	}

	nav li {
		margin-bottom: 10px;
	}
	ul {
		padding: 0;
	}
}
section li {
	float: none;
}
.rel_me_links {
	padding: 0;
	list-style-position: inside;
}
.rel_me_links li {
	margin-bottom: 1rem;
}
.error {
	border: 2px solid red;
}
.warning {
	border: 2px solid orange;
}
.green_border {
	border: 2px solid lightgreen;
}
.green-button {
	background-color: rgb(87, 218, 87);
}
tr {
	text-align: left;
}
tr td:first-child {
	display: flex;
	gap: 0.5rem;
}
nav ul *, nav ul, nav p {
	margin: 0;
}
.message {
	list-style: none;
}
td, tr {
	padding-right: 0.5rem;
}
/* Reponsive table code below from https://allthingssmitty.com/2016/10/03/responsive-table-layout/ */
@media screen and (max-width: 700px) {
	table thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	tr td:first-child {
		display: block;
	}

	table tr {
		border: 1px solid #878787;
		display: block;
		margin-bottom: 1rem;
		padding: 0.25rem;
	}

	table td {
		border-bottom: 1px solid #878787;
		display: block;
		text-align: right;
	}
	table td:last-child {
		border-bottom: 0;
	}

	table td::before {
		content: attr(data-label);
		float: left;
	}
	.side-by-side {
		margin-top: 1rem;
	}
	h1 {
		font-size: 1.5rem;
	}
}