:root {
  --main-color: dodgerblue;
  --rich-color: darkblue;
  --light-color: lightskyblue;
  --bounce-big: transform 800ms cubic-bezier(0,1.37,0.41,1.58);
  --bounce-small: transform 300ms cubic-bezier(0,1.3,1,1);
  --dynamic: transform 400ms ease-out, opacity 400ms ease-out;

  /* THEMED PAGE HEADER STRIPES */
  --accent-main: cadetblue;
  --accent-help: #e53f33;
  --accent-tests: orange;
  --accent-bits: yellowgreen;
  --accent-error: var(--accent-help);

  --nav-color: skyblue;
  --nav-hover-color: deepskyblue;

  --fade: linear-gradient(#fefefe, #dcdcdc);
  --glow-effect: 0 0px 5px deepskyblue, 0 0px 10px skyblue;
}

.emoji, span.icon {
  font-family: apple color emoji, segoe ui emoji,
    noto color emoji, android emoji, emojisymbols,
    emojione mozilla, twemoji mozilla, segoe ui symbol;
}

::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-thumb { background: #ffffffbb; } ::-webkit-scrollbar-track { background: #222; }
::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-button, ::-webkit-scrollbar-corner, ::-webkit-resizer { display:none; }

body { font-family: sans-serif; }
website-environment { background-color: #888; background-image: url('img/puzzle.svg'); background-position: center center; background-repeat: no-repeat; background-size: 30vh; }
/* website-layout > header { z-index: 999; } */
/* website-layout.master > main { z-index: -1; }  */
website-layout > header, website-layout > footer { padding: 1rem; text-align: center; filter: drop-shadow(0 0 1rem rgba(0,0,0,0.7)); }
website-layout > header { color: white; display: grid; align-items: center; justify-content: center; }
website-layout > footer { color: white; text-shadow: 0.05rem 0.05rem black; transition: var(--dynamic); }
/*website-layout > header > * { z-index: 2; } */
website-layout > header a,
website-layout > footer a { color: var(--nav-color); text-shadow: 0.05rem 0.05rem black; text-decoration: none; transition: filter 200ms ease-out, background 200ms ease-out; }
website-layout > header a:focus,
website-layout > header a:hover,
website-layout > footer a:hover,
website-layout > footer a:focus { color: var(--nav-color); filter: drop-shadow(0 0 1rem skyblue); }
h1, h2, h3 { margin: 0; margin-bottom: 0.5rem; }
website-layout > header h1 { margin: 0; font-size: 3.5rem; transition: transform 400ms ease-out; }
website-layout > header h1 a { color: white; display: flex; align-items: center; justify-content: center; 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:first-of-type { font-size: 1.6rem; display: none; }
main > h1:first-of-type a:visited { color: black; }
main > h1:first-of-type a:hover { color: blue; }
main > h1:first-of-type, main h2, main h3, main h4, main h5, main h6 { margin: 0; margin-bottom: 1rem; }
main h2 { font-size: 1.6rem; } main h3 { font-size: 1.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 {
  position: relative;
  padding: 1rem; background: #e9e9e9;
  box-shadow: 0 0.3rem 1rem 0 rgba(0,0,0,0.5);
  transition: var(--dynamic);
}

website-layout:not(.in) > header h1 { transform: translateY(-30vh); }
website-layout:not(.in) > main:not(.static),
website-layout:not(.in) > footer { transform: translateY(100vh); opacity: 0; }

main svg#icon {
  height: 2em;
  width: 2em;
}

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: #87ceeb22;
}

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: deepskyblue; border: 0; cursor: pointer; -webkit-appearance: none; box-shadow: 0 0 0.5rem rgba(0,0,0,0.5); transition: box-shadow 400ms; }
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: #426ac7; border: 0; cursor: pointer; }
@media screen and (min-width:1600px) { input[type=range] { transform-origin: right; transform: scale(1.2); margin-left: 1rem } }
@media screen and (min-width:1920px) { input[type=range] { transform-origin: right; transform: scale(1.5); margin-left: 2rem } }
@media screen and (min-width:3840px) { input[type=range] { transform-origin: right; transform: scale(3); margin-left: 4rem } }

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(180deg) saturate(500%);
  --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:not([unthemed]),input[type=button], input[type=submit], input[type=reset] {
  margin: 0; padding: 0.8rem 1rem; border: 0; border-radius: 0.5rem; cursor: pointer; transform: scale(1);
  font-weight: bold; text-transform: uppercase; box-shadow: 0 0 0.25rem rgba(0,0,0,0.3);
  font-size: 1rem; transition: box-shadow 200ms, var(--bounce-big), opacity 800ms;
  background: var(--main-color); color: var(--rich-color); outline: none;
} @media screen and (orientation: portrait) {
  button:not([unthemed]),input[type=button], input[type=submit], input[type=reset] { /*font-size: 0.8rem;*/ }
} @media (hover:hover) and (pointer:fine) {
  button:not([unthemed]):hover,  input[type=button]:hover,  input[type=submit]:hover,  input[type=reset]:hover  { transform: scale(1.1, 1.1); box-shadow: 0 0 0.40rem rgba(0,0,0,0.3); }
} button:not([unthemed]):focus,  input[type=button]:focus,  input[type=submit]:focus,  input[type=reset]:focus  { transform: scale(1.1, 1.1); box-shadow: 0 0 0.40rem rgba(0,0,0,0.3); }
  button:not([unthemed]):active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active { transform: scale(1);   box-shadow: 0 0 0.25rem rgba(0,0,0,0.3); }
  
input[type=submit] { background: #8bc34a; } input[type=reset],button[type=reset] { background: #ff403b; color: #480c0b; }

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 {
  width: 15rem;
  height: 7rem;
}

div.paragraph { margin-bottom: 1rem; }

ul.showcase li a:hover {
  background: skyblue;
}

.centered { text-align: center; } 

@media screen and (orientation: portrait) {
  html { font-size: 4vw; }
  website-layout { width: 100%; margin: 0; }
  website-layout > header > h1 { font-size: 2.5rem; }
}

@media screen and (orientation: landscape) {
  html { font-size: 1.5vw; }
  
  @media (min-height:768px) {
/*    html { font-size: clamp(9px, 2.2vh, 48px); }*/
  }
  
  /*@media (max-width:640px) and (max-height:360px) {
    master-list { font-size: 1.2rem; }
  }
  
  @media (max-width:960px) and (max-height:540px) {
    master-list { font-size: 1.2rem; }
  }*/
  
  @media (min-width:640px) {
    website-layout {
      width: 100%; margin: 0;
    }
  }
  
  @media (min-width:1024px) {
    website-layout {
      width: calc(100% - 2rem);
      margin: 0 auto;
    }
  }
  
  /*@media (min-width:1200px) {
    website-layout {
      width: calc(1200px - 2rem);
      margin: 0 auto;
    }
  }*/
  
  /*
  @media (min-width:1200px) {
    website-layout {
      width: 70%;
      margin: 0 auto;
    }
  }

  @media (min-width:1600px) {
    website-layout {
      width: 60%;
      margin: 0 auto;
    }
  }
  */
}