﻿:root {
	--teal: hsl(193 100% 18%);
}

fieldset {
	border-color: navajowhite;
}

fieldset legend {
	color: burlywood;
}

.imgtoggle label {
	display: inline-block;
	margin-right: 0.25em;
}

.imgtoggle label img {
	width: 3em;
	border-width: 4px;
	border-color: transparent;
	border-style: solid;
}

.resources label img {
	border-radius: 27%;
}

.skills label img {
	border-radius: 50%;
}

.imgtoggle label:hover img {
	border-color: var(--teal);
}

.imgtoggle label img {
	filter: grayscale(100%) opacity(50%);
}

.imgtoggle label:has(input:checked) img {
	filter: none;
	border: 4px solid var(--teal);
}

.imgtoggle label input[type=checkbox] {
	display: none;
}

.radiogroup .flex {
	display: flex;
	align-content: flex-start;
	border-collapse: collapse;
	white-space-collapse: collapse;
}

.radiogroup label {
	background-color: antiquewhite;
	border: 2px solid var(--teal) ;
	border-left-width: 0;
	padding: 0.5em;
	padding-left: 0.75em;
	padding-right: 0.75em;
}

.radiogroup label:first-of-type {
	border-left-width: 2px;
}

.radiogroup label input[type=radio] {
	display: none;
}

.radiogroup label:has(input):hover {
	background-color: var(--teal);
	color: antiquewhite;
}

.radiogroup label:has(input:checked) {
	display: inline-block;
	background-color: var(--teal);
	color: antiquewhite;
}

textarea {
	width: 100%;
	min-height: 4em;
}

select {
	font-family: var(--font);
	font-size: 1.0em;
}

input:not([type="submit"]), textarea, select {
	background-color: antiquewhite;
	padding: 0.5em;
	box-sizing: border-box;
	border: 2px solid var(--teal);
}

input[type="submit"],
button,
input[type="button"],
input[type="submit"]:active:hover,
button:active:hover,
input[type="button"]:active:hover {
	padding: 0.5em;
	box-sizing: border-box;
	color: antiquewhite;
	font-weight: bold;
	border: 2px solid var(--teal);
	background-color: var(--teal);
	min-width: 2em;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	background-color: antiquewhite;
	color: var(--teal);
}

input.keyword {
	text-transform: uppercase;
}