html:not(.dark) body,
html.light
body {
	color: black;
--current-color: black;
}
html.dark
body {
	color: white;
--current-color: white;
}

@media (prefers-color-scheme: dark) {
	:root {
		color: white;
--current-color: white;
	}
}

h1 {
	font-size: 225%;
}
h2 {
	font-size: 175%;
}
h3 {
	font-size: 150%;
}

#banner > div:first-of-type {
background: #ec603670;
	color: white;
}
html.light
#banner > div:first-of-type {
background: #ffffff93;
	color: black;
}

#main_nav {
	display: flex;
	transition: opacity 1s;
	font-size: 15px;
}
#main_nav:target, #main_nav.open {
	opacity: 1;
	visibility: visible;
}
@media (max-width:992px){
	#main_nav {
		opacity: 0;
		visibility: hidden;
	}
}

#sms_nav {
	will-change: box-shadow;
	transition: all .15s ease;
}
#sms_nav:hover,
#sms_nav:active {
/*
	box-shadow: 0px 0px 120px #024768, 0px 0px 120px #04B0BC, 0px 0px 120px #33C9C7, 0px 0px 120px #94DFDD,0px 0px 120px #97D3D3;
*/
	box-shadow: 0px -13px 73px var(--kmdw-orange);
}

html.light
#sms_nav:hover,
html.light
#sms_nav:active {
	box-shadow: 0px -13px 73px black;
}

#main_menu .sub-nav li > a {
	padding: 7px;
	outline-offset: 0;
}
#main_menu .sub-nav li > a:focus-visible {
	outline-offset: 0;
	box-shadow: 0px 3px 73px #006a8d;
	z-index: 3;
}

.p_btn {
	--b: 2px;
	--s: .35em;
	--c: #fff;
  
	color: var(--c);
	--_p: var(--s);
	background: conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--c) 0)
		var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
	padding: calc(.5em + var(--s)) calc(.5em + var(--s));
-	outline: var(--b) solid #0000;
-	outline-offset: .2em;

	font-size: 80%;
	cursor: pointer;
	border: none;
	margin: .1em;

position: relative;
text-decoration: none;
z-index: 2;
}
.p_btn:hover,
.p_btn:focus-visible{
	--_p: 0px;
-	outline-color: var(--c);
-	outline-offset: .15em;
	box-shadow: 0px -13px 73px #024768;
}
.p_btn:active {
	color: currentColor;
}

.exmpl {
	letter-spacing:.33em;
font-size: 24px;
margin: 0;
}
#tease {
	display: flex;
	flex-wrap: wrap;
justify-content: space-around;
}
/*
@media (min-width: 1260px) {
	#tease {
		justify-content: left;
	}
}
*/
#tease .box {
	height: auto;
	font-size: 24px;
	padding: 1.33em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	float: none;
	flex: 0 1 33%;
	width: auto;

	background-color: white;
	margin: 0.25rem;
	min-width: calc((693px / 3) - (2 * var(--main-margin-h)) - (4 * .25rem));
min-width: calc((1023px / 3) - (2 * var(--main-margin-h)) - (4 * .25rem));
	flex-basis: calc((100% - (4 * .25rem)) / 3);
	color: black;
	font-weight: bold;

max-width: 400px;
}
#tease .box:first-of-type {
	margin-left: 0;
}
#tease .box:last-of-type {
	margin-right: 0;
}
@media (max-width: 693px) {
	#tease .box {
		float: left;
		width: 100%;
		height: auto;
		flex: 1;
		flex-basis: 100%;
		margin: 0.25rem 0;
	}
}

.bordr {
	border-radius: 60% 50% 60% 20% / 70% 50% 30% 20%;
	border: 11px solid white;
}
html.light .bordr {
	border-color: black;
}
.bordr:nth-of-type(2) {
	border-radius: 60% 10% 70% 20% / 40% 60% 20% 30%;
}
.bordr:nth-of-type(3) {
	border-radius: 20% 60% 20% 20% / 50% 30% 60% 30%;
}

footer {
	background-color: var(--sms-bg-color);
	font-size: 1.25rem;
	font-weight: bold;
	color: var(--current-color);
}
html.light footer {
	color: white;
}
footer > div:last-child > span {
	color: black;
	font-size: .75rem;
	font-weight: normal;
	line-height: 1;
	letter-spacing: normal;
	word-spacing: normal;
}
html.dark footer > div:last-child > span,
html.light footer > div:last-child > span {
	color: white;
}

.gfx_shad {
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}