/* This CSS is the result of different sessions over five or six years. With adding and deleting stuff all the time. It is very unorganized. Ignore it! */

:root {
  --textcolor: #353849;
  --textcolor: #272822;

  --dblue-light: #CCEDF9;
  --dblue: #009CDE;
  --dblue-dark: #006AA9;

  --okblue-light: oklch(0.90 0.144 237);
  --okblue: oklch(0.66 0.144 237);
  --okblue-dark: oklch(0.51 0.144 237);

  --chapter: #90d2fb;

  font-size: 62.5%;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Droid Serif", "Times New Roman", Times, serif; }

html, body { wwidth: 100%; background: #222; height: 100%; overflow: hidden; font-size: 3rem; line-height: 1.4; }
html { overflow: hidden; }
img { display: block; max-width: 100%; max-height: 100%; }
p, ul { margin-bottom: 4rem; }
p.centered { text-align: center; }
p.small { font-size: 2rem; }
a { color: Crimson; text-decoration: underline; }
a:hover, a:focus { text-decoration: none; }

#line { position: fixed; top: 0; left: 50%; opacity: 1; z-index: 100; transition: opacity 0.3 linear; background: #CCC; width: 1px; height: 100vh; }
#line.hidden { opacity: 0; }

ul { list-style-position: inside; }
ul li { position: relative; background-size: 2rem 2rem; list-style: none; }
ul li::before { position: absolute; top: 5px; left: -40px; content: url(../media/embed-right.svg); }

article { position: fixed; top: 0; left: 0; background: transparent url('../media/open-laptop-freepik.jpg') center center; background-size: cover; width: 100%; height: 100vh; }

.slide { display: flex; position: absolute; top: 0; left: 0; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; background: #EEE; padding: 3vw; width: 50%; height: 100vh; overflow: hidden; }
.slide * { opacity: 1; transition: opacity 1s linear; }
.slide *.hidden { opacity: 0; }
.slide.active.left { left: 0%; }
.slide.active.right { left: 50%; }
.slide.left { left: -50%; }
.slide.right { left: 100%; }

.slide.image { padding: 1vw; }
.slide.image p { position: absolute; bottom: 2vw; background-color: #EEE; padding: 20px; }

.slide.code p,
.slide.code pre { width: 100%; }

.slide.transparent { background-color: transparent; }
.slide.transparent p { display: flex; gap: 20px; border-radius: 50px; background: #EEE; padding: 20px; }

.slide.warning { background: Crimson; color: white; }
.slide.warning img {  margin-bottom: 4rem; width: 10%; height: auto; }
.slide.warning p { max-width: 50%; }
.slide.warning a { color: inherit; }

html.animated .slide { transition: left 0.3s linear; }

.slide > *:last-child { margin-bottom: 0; }
.slide p:last-child { margin-bottom: 0; }
.slide h1 { margin-bottom: 1rem; width: 90%; font-weight: normal; font-size: 8rem; line-height: 1; font-family: ChangaOne; }

.slide.start { justify-content: flex-start; align-items: start; background: #EEE; }
.slide.start.right { background: transparent url(../media/title_astronaut.svg) center center no-repeat; background-size: cover; }

.about { align-items: start; }
.about p {
  background-color: #FFF;
  padding: 5rem;
  font-size: 3rem;
  line-height: 1.6;
}

.icon img { width: 50%; }

.slide.title h2, .slide.title h2 span,
.slide.title h3, .slide.title h3 span { display: flex; flex-direction: column; gap: 1rem; font-weight: normal; font-size: 6rem; line-height: 1.4; font-family: ChangaOne; text-align: center; }
.slide.title p { line-height: 1.6; text-align: center; }
.slide.desc { align-items: start; padding: 4rem 12rem; }
.slide.desc p { text-align: left; }

.slide.chapter { background: var(--chapter); color: white; }
.slide.chapter h2 { display: flex; flex-direction: column; gap: 1rem; font-weight: normal; font-size: 8rem; line-height: 1; line-height: 1.4; font-family: ChangaOne; text-align: center; }

.slide.text p, .slide.text.warning p, .slide.text ul { margin: 0 auto 2rem; width: 70%; max-width: unset; }

.slide.imgfull { padding: 0; }
.slide.imgfull img { width: 100%; height: 100%; object-fit: cover; }

.iframe { padding: 0; }
.iframe iframe { border: none; width: 100%; height: 100vh; }

.slide.support ul { margin: 0 auto 4rem; width: fit-content; }
.slide.support ul li { display: flex; align-items: center; gap: 4rem; margin-bottom: 2rem; background: transparent url(../media/chrome.svg) center left no-repeat; background-size: 6rem 6rem; padding-left: 8rem; height: 8rem; list-style: none; }
.slide.support ul li::before { display: none; }
.slide.support li.chrome { background-image: url(../standard/chrome.svg); }
.slide.support ul .edge { background-image: url(../standard/edge.svg); }
.slide.support ul .opera { background-image: url(../standard/opera.svg); }
.slide.support ul .firefox { background-image: url(../standard/firefox.svg); }
.slide.support ul .safari { background-image: url(../standard/safari.svg); }

.code { gap: 0; }
.code pre, .code p { width: 90%; }
.codeinfo { margin-bottom: 0; background: #272822; padding: 1rem 2rem; width: 90%; color: white; text-align: left; }
.codetext { width: 90%; text-align: left; }
.code .codeinfo + pre { margin-top: 1px; border-radius: 0 0 .3em .3em; }
.code .show { width: 100%; }
.code .show .codeinfo, .code .show pre { width: 100%; }

.last.left { background: transparent url('../standard/thatsallfolks-left.jpg') right center; background-size: cover; }
.last.right { background: transparent url('../standard/thatsallfolks-right.jpg') left center; background-size: cover; }


/* Counter */
body {
  counter-reset: count 0;
}

.counted {
  counter-increment: count 1;
}
.counted.freeze {
  counter-increment: count 0;
}
.counted-added {
  counter-reset: count 18;
}

.counted::before {
  display: block;
  border-radius: 200px;
  background: Crimson;
  padding: 10px;
  aspect-ratio: 1;
  width: 50px;
  height: 50px;
  content: "";
  content: counter(count, decimal);
  color: white;
  font-weight: normal;
  line-height: 1.7;
  font-family: 'ChangaOne';
  text-align: center;
}

baseline-status { zoom: 1.4; margin-block-start: 4rem; margin-block-end: 1rem; padding: 2rem; }
.baseline-info baseline-status { margin-block-start: 0rem; width: 100%; }

ul.upfront { display: flex; flex-direction: column; gap: 5rem; list-style-position: inside; }
ul.upfront li { text-align: center; }
ul.upfront span { display: inline-block; position: relative; background: #555; background-size: 2rem 2rem; padding: 8px 20px; color: white; list-style: none; }
ul.upfront li::before { display: none; }

ul.upfront li:nth-child(1) { transform: rotate(2deg); }
ul.upfront li:nth-child(2) { transform: rotate(-3deg); }
ul.upfront li:nth-child(3) { transform: rotate(1deg); }
ul.upfront li:nth-child(4) { transform: rotate(-2deg); }
ul.upfront li:nth-child(5) { transform: rotate(0deg); }
ul.upfront li:nth-child(5) span { background: Crimson; }