:root {
  --fade: linear-gradient(#fefefe, #dcdcdc);

  --glow-effect:
    0 -1px 4px #FFF,
    0 -2px 10px #080,
    0 -5px 20px #0d0;
}

body { font-family: sans-serif; }
website-environment { background-color: #888; }
website-layout > header { margin-top: 0.5rem; position: relative; box-shadow: 0 -0.4rem 1rem 0 rgba(0,0,0,0.5); }
@media screen and (max-width:768px) { website-layout > header { margin-top: 0; box-shadow: inset 0 0.5rem 1rem 0 rgba(0,0,0,0.8); } }
website-layout > header::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: url(img/abstract.webp); background-size: cover; z-index: -10;
}
website-layout > header::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.65); background-size: cover; z-index: -5;
}
website-layout > header, website-layout > footer { padding: 1rem; text-align: center; }
website-layout > header { color: white; }
website-layout > footer { color: white; text-shadow: 0.05rem 0.05rem black; }
website-layout > header > * { z-index: 2; }
website-layout > header a,
website-layout > footer a { color: greenyellow; text-shadow: 0.05rem 0.05rem black; text-decoration: none; transition: text-shadow 400ms; }
website-layout > header a { line-height: 1.5rem; }
website-layout > header a:focus,
website-layout > header a:hover,
website-layout > footer a:hover,
website-layout > footer a:focus { text-shadow: var(--glow-effect); }
h1, h2, h3 { margin: 0; margin-bottom: 0.5rem; }
website-layout > header h1 { color: white; display: flex; align-items: center; justify-content: center; font-size: clamp(1.8rem, 8vw, 3.5rem); font-weight: normal; text-shadow: 0.1rem 0.1rem black; }
website-layout > header h1 img { height: 1em; width: auto; margin-right: 1rem; }
website-layout > header h1 span { flex-grow: 0; }
website-layout > header nav { display: flex; flex-flow: row wrap; justify-content: space-evenly; }
main h1 { font-size: 1.6rem; }
main h1 a:visited { color: black; }
main h1 a:hover { color: blue; }
main > h1 { text-decoration: underline; }
main h2 { font-size: 1.2rem; }
main h3 { font-size: 1.1rem; }
main h1, main h2, main h3, main h4, main h5, main h6 { margin: 0; margin-bottom: 1rem; }
code, pre { background: #cbcbcb; }
pre { padding: 0.5rem; border-left: 5px solid dimgrey; box-shadow: 0 0.1rem 0.3rem 0 rgba(0,0,0,0.3); }
table { text-align: left; border-collapse: collapse; }
table thead tr:last-child { border-bottom: 1px solid black; }
table tbody tr:nth-child(even) { background: gainsboro; }
table tfoot tr:first-child { border-top: 1px solid black; }
blockquote:before { content: "\275d"; }
blockquote:after { content: "\275e"; }
main hr { border: 0; margin: 1rem 0; height: 1px; background: dimgrey; }

main {
  padding: 1rem; background: white;
  box-shadow: 0 0.3rem 1rem 0 rgba(0,0,0,0.5);
  background: #e9e9e9;
  border: 0; border-top: 3px solid yellowgreen; 
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

main a { text-decoration: none; }
main a:hover { text-decoration: underline; }

fieldset { border: 1px solid dimgrey; border-radius: 3px; }
fieldset legend { padding: 0.5rem; font-weight: bold; color: dimgrey; }

::placeholder { color: #26323888; }

select,
textarea,
input[type=text],
input[type=email],
input[type=search],
input[type=url],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime-local],
input[type=color],
input[type=number] {
  padding: 0.7rem;
  border: 1px solid dimgrey;
  border-radius: 0.2rem;
  background-color: #fbfbfb;
  box-shadow: inset 0 0 0.2rem 0 rgba(0,0,0,0.5);
}

select:hover,
textarea:hover,
summary:hover,
input[type=text]:hover,
input[type=email]:hover,
input[type=search]:hover,
input[type=url]:hover,
input[type=date]:hover,
input[type=month]:hover,
input[type=week]:hover,
input[type=time]:hover,
input[type=datetime-local]:hover,
input[type=color]:hover,
input[type=number]:hover {
  background-color: #8cc43722;
}

input[type=number] { width: 6rem; }

input[type=range] { margin: 0 0.5rem 0 0; background-color: transparent; -webkit-appearance: none; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { background: #484d4d; border: 0; width: 100%; height: 25.6px; cursor: pointer; box-shadow: inset 0 0 0.5rem rgba(0,0,0,0.5); }
input[type=range]::-webkit-slider-thumb { margin-top: -3px; margin-bottom: -3px; width: 18px; height: 32px; background: #8cc437; border: 0; border-radius: 2px; cursor: pointer; -webkit-appearance: none; box-shadow: 0 0 0.2rem rgba(0,0,0,0.9); transition: background 200ms; }
input[type=range]::-webkit-slider-thumb:hover { background: #c0fb68;}
input[type=range]:focus::-webkit-slider-runnable-track { background: #545a5a; }
input[type=range]::-moz-range-track { background: #484d4d; border: 0; width: 100%; height: 25.6px; cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 18px; height: 25.5px; background: #8cc437; border: 0; cursor: pointer; }

input[type=color] {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  width: 1.3rem;
  height: 1.5rem;
  vertical-align: baseline;
}

label input[type=radio]+span,
label input[type=checkbox]+span {
  --pip-effect: var(--glow-effect);
  --pip-shadow: drop-shadow(0 0 1rem rgba(0,0,0,0.5));
  --pip-colorization: sepia(100%) hue-rotate(40deg) saturate(250%);
  --pip-transition: text-shadow 400ms ease;
  --pip-buffer: 0.5rem;
}
label input[type=radio]:not(:only-child), label input[type=checkbox]:not(:only-child) { display: none; }
label input[type=radio]+span::before, label input[type=checkbox]+span::before { filter: grayscale(1); margin-right: var(--pip-buffer); transition: var(--pip-transition); }
label input[type=radio]+span:hover::before, label input[type=checkbox]+span:hover::before { text-shadow: var(--pip-effect); }
label input[type=radio]:checked+span::before, label input[type=checkbox]:checked+span::before { filter: var(--pip-shadow) grayscale(1) var(--pip-colorization); }
label input[type=radio]+span::before { content: "\1F518"; }
label input[type=checkbox]+span::before { content: "\1F532"; }
label input[type=checkbox]:checked+span::before { content: "\2705"; }

button,
input[type=button],
input[type=submit],
input[type=reset] {
  background: white;
  border: 0;
  padding: 0.6rem 1rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(0,0,0,0.5);
  text-transform: uppercase;
  transition: transform 200ms;
}

button:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
  transform: scale(1.1);
}

input[type=button] {  }
input[type=submit] { background: #8cc437; }
input[type=reset]  { background: #f44336; }

select {
	appearance: none; -moz-appearance: none; -webkit-appearance: none;
	display: block; width: auto; max-width: 100%; margin: 0;
	padding: 0.5rem 1.5rem 0.5rem 0.5rem; color: #263238; line-height: 1.3; font-size: 1rem;
	font-family: sans-serif; font-weight: normal;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23263238%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat, repeat; background-position: right 0.5rem top 54%, 0 0; background-size: 0.65rem auto, 100%;
}

select::-ms-expand { display: none; }

*[dir="rtl"] select,
:root:lang(ar) select,
:root:lang(iw) select {
	background-position: left 0.5rem top 54%, 0 0;
	padding: 0.5em 0.5em 0.5em 1.5em;
}

select:disabled,
select[aria-disabled=true] {
	color: dimgrey;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}

details {
  background: rgba(255,255,255,0.5);
  border: 0;
  border-radius: 0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(0,0,0,0.5);
}

details summary {
  color: #263238;
  border: 0;
  border-radius: 0.2rem;
  padding: 0.5rem;
  background: rgba(255,255,255,0.5); 
  box-shadow: 0 0 0.2rem 0 rgba(0,0,0,0.5);
}

blockquote:before { content: "\275d"; }
blockquote:after { content: "\275e"; }

meter {
  padding: 0;
}

progress {
  width: 5rem;
}

textarea {
  height: 7rem;
  width: 15rem;
}