:root { 
  --ubuntu-orange:#E95420;
  --asahi-blue:#96CAF3;
  --heart:#E41B17;
  --warm-grey-10:#F6F6F5;
  --warm-grey-30:#E6E4E2;
  --warm-grey:#AEA79F;
  --cool-grey:#333333;
  --text-grey:#111111;
  --dark-grey:#090909;

  --highlight:var(--ubuntu-orange);
  --background:var(--warm-grey-10);
  --background2:var(--warm-grey-30);
  --color:var(--text-grey);
  --hero-color:var(--background);
  --term-bar:#F3F3F3;
  --term-screen:#FFF;
  --term:#000;
}
@media (prefers-color-scheme: dark) {
  :root { 
    --highlight:var(--asahi-blue);
    --background:var(--text-grey); 
    --background2:var(--dark-grey);
    --color:var(--warm-grey-30);
    --hero-color:var(--color);
    --term-bar:#36363B;
    --term-screen:#1E1E1E;
    --term:#FFF;
  }
}

html{ font:100%/1.5 Ubuntu; color:var(--color); background-color:var(--background2); }
header, main { background-color:var(--background); }
.inner { max-width:44em; margin:0 auto; padding: 0 1em; }
a { text-decoration:none; font-weight:bold; color:var(--highlight); }
a:hover { text-decoration:underline; }
img, video { display:block; height:auto; margin:auto; max-width:100%; }
header, #banner, #hero { text-align:center; }
header .inner { padding:1.5em 0 1em 0; }
header img { height:6em; }
header a { color:var(--color); font-weight:normal; }
h1 { margin:0.25em 0; }
nav ul, footer ul { list-style-type: none;padding:0; margin:0 auto; }
nav li, footer li { display:inline-block; }
nav li { margin:0 0.5em; }
#banner p { font-size:0.75em; margin:0; padding:0.25em 0; }
#banner a { color:var(--heart); }
main { padding:1em 0; }
.home main { padding-top:0; }
main.home p { text-align:center; font-size:2em; font-style:italic; }
h2 { margin-top:0; }
#hero { background-color:black; color:var(--hero-color); padding:2em 0; height:30em;}
#hero h2 { margin:0; }
#hero em { font-size:0.75em; }
#hero img, #hero video {position:absolute; margin: auto; left: 0; right: 0;}
#hero img { z-index:0; margin-top:2em; }
#hero video { z-index: 1; margin: auto; margin-top: 3.3em; width: 31em; }
footer { height:100%; }
footer .inner { padding-top:2em; }
footer p { font-size:0.8em; }
footer p, footer a { color:var(--cool-grey); }
footer li { margin-right:0.5em; }
footer img { height:1em; }
footer img:hover { opacity:50%; }

code,time,kbd,samp,.mono{ color:var(--highlight); font-family:monospace; }
a:focus,[tabindex]:focus{ outline:3px solid; }
@supports selector(:focus-visible){ a:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){ outline:none; } }
:focus-visible{ outline:3px solid; }
::selection { background:rgba(122, 122, 122, 0.2); } 
p, code { line-height:calc(1ex / 0.32); }
@supports (font-size-adjust:1;) { article { font-size-adjust:0.5; } }
#term { box-shadow: 0 0.5em 1em rgb(0 0 0 / 0.25); border-radius: 1em; margin: 1em; }
#bar { height: 1em; padding: 0.5em; border-radius: 1em 1em 0em 0em; background-color: var(--term-bar); }
.dot { height: 1em; width: 1em; border-radius: 50%; display: inline-block; }
.red { background-color: #FF5F57; }
.yellow { background-color: #FDBB2D; }
.green { background-color: #28C740; }
#screen { background-color: var(--term-screen); border-radius: 0em 0em 1em 1em; padding:1em; text-align:center;}
#term code { font-size: 1.75em; #color: #000; color: var(--term); }

@media screen and (max-width:660px) {
  #hero { height:auto; }
  #hero img { display:none; }
  #hero video { position:relative; margin-top: 1em; }
}
@media screen and (max-width:480px) {
  h1 { display:none; }
  header img { height:4em; padding-bottom:1em; }
  nav li { display:block; }
  main.home p, #term code { font-size: 1em; }
}