@font-face {
  font-family: "Peaches-Pixel5";
  src:
    url("/assets/fonts/Peaches-Pixel-5.otf") format("opentype");
}

@font-face {
  font-family: "Peaches-Pixel5";
  src:
    url("/assets/fonts/Peaches-PixelBold.otf") format("opentype");
    font-weight: bold;
}

@font-face {
  font-family: "Peaches-Pixel5";
  src:
    url("/assets/fonts/Peaches-PixelCursive.otf") format("opentype");
  font-style: italic;
}

@font-face {
    font-family: "Peaches-PixelWide";
    src:
    url("/assets/fonts/Peaches-PixelWide.otf") format("opentype");
}

:root {
  --ochre: rgb(242, 203, 198);
  --ochre-text: rgb(155, 86, 77);
}

body {
  font-size: 20px;
  font-smooth: never;
  -webkit-font-smoothing: none;
  font-family: 'Peaches-Pixel5';
  font-weight: normal;
  background: rgb(255, 248, 243);
  margin: 0;
}

header {
  padding: 1ch;
  
  hgroup {
    h1, p {
      margin: 0;
    }
    
    h1 img {
      width: 64px;
    }
    
    display: flex;
    align-items: center;
    gap: 1ch;
  }
}

nav {
  position: sticky;
  top: 0;
  background: rgb(255, 248, 243);
  box-shadow: 4px 4px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

nav ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  padding: 0;
  margin: 0;
  border-width: 2px 0;
  border-style: solid;
  border-color: var(--ochre);    
  
  li {
    flex: 1;
    padding: 1ch;
    display: flex;
    align-items: center;
    
     a {
      display: flex;
      align-items: center;
      gap: 1ch;  
      text-decoration-thickness: 2px;
      color: var(--ochre-text);
    }
    
    img {
      width: 32px;
    }
  }
  

  
   li:nth-child(even) {
    
    border-width: 0 2px;
    border-style: solid;
    border-color: var(--ochre);
  } 
}

ul#features {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8ch;
  padding: 0;
  margin: 4ch 0;
  
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2ch;
  }
  
  p {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
  }
}



.download-window {
  font-family: "Peaches-Pixel5";
  font-size: 20px;
  font-smooth: never;
  -webkit-font-smoothing: none;
  background: rgb(251, 250, 253);
  border: 2px solid var(--ochre);
  border-style: outset;
  display: inline-flex;
  flex-direction: column;
  gap: 3ch;
  padding: 4ch 2.5ch;
  align-items: center;
  position: relative;
  box-shadow: 4px 4px rgba(0, 0, 0, 0.1);
  
  .icon {
    width: 64px;
  }
  
  .notification {
    display: flex;
    gap: 2ch;
    align-items: center;
  }
  
 
  
  img.panel {
    width: 128px;
    position: absolute;
  }
  
  img.panel.interrupted-a {
    left: -106px;
    top: 0;
  }
  img.panel.interrupted-b {
    right: -110px;
    bottom: 14px;
    z-index: -1;
  }
  
  img.panel.prevented-a {
    left: -120px;
    bottom: 10px;
    z-index: -1
  }
  img.panel.prevented-b {
    right: -110px;
    top: 10px;
    z-index: 2
  }
  
  img.panel.concurrent-a {
    left: -110px;
    top: 10px;
  }
  img.panel.concurrent-b {
    right: -105px;
    bottom: 20px;
  }
}

.progress-bar {
  height: 24px;
  width: 220px;
  box-shadow: inset 2px 2px rgb(194, 194, 194);
  background: gainsboro;
  display: flex;
  
}

.progress-bar-fill {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.progress-bar-fill.green {
  border: 2px outset rgb(66, 188, 100);
  background: rgb(59, 221, 110); 
  color: rgb(144, 255, 0)
}

.progress-bar-fill.red {
  border: 2px outset rgb(175, 74, 74);
  background: rgb(244, 112, 112); 
  color: rgb(255, 220, 239)
}

.progress-bar-fill.blue {
  border: 2px outset rgb(74, 123, 175);
  background: rgb(112, 156, 244); 
  color: rgb(104, 227, 255); 
}

#willow-shoutout {
  background: rgb(248, 234, 224);
  text-align: center;
  font-style: italic;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  
  img {
    width: 64px;
  }
  
  a {
    display: flex;
    justify-items: center;
    padding: 1ch;
    gap: 1ch;
    align-items: center;
    color: var(--ochre-text);
    text-decoration-thickness: 2px;
  }
}

a {
  color: var(--ochre-text);
  text-decoration-thickness: 2px;
}



section#bao {
  margin: 2ch auto;
  max-width: 32em;
  padding: 2ch 2ch;
  border: 2px solid var(--ochre);
  
  p {
    font-style: italic;
    margin: 0;
  }
  
  ul {
    list-style-type: none;
    padding: 0 0 0 1ch;
  }

  li::before {
    content: '• '
  }
}


footer {
 max-width: 32em;
  
  margin: 6ch auto 1ch auto;
}

footer .credit {
  display: flex;
  gap: 1ch;
  align-items: center;
  
  img {
    width: 64px;
  }
}

footer a {
  font-style: italic;
}

h2, h3 {
  font-size: 20px;
  margin: 1em 0;
}


#tutorial {
  max-width: 32em;
  margin: auto;
  
  p > code, li > code {
    padding: 0 4px;
    font-family: 'Peaches-Pixel5';
    display: inline-block;
    background: var(--ochre);
  }
}

pre.shiki {
  padding: 2ch;
  border: 2px inset var(--ochre);
  overflow: auto;
  
  code {
    font-size: 14px;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    font-weight: normal;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
  }
  
  ul {
    list-style-type: none;
    padding: 0 0 0 1ch;
  }
  
  li::before {
    content: '• '
  }

} 

.shiki:has(.line.addition) .line:not(.line.addition)>span {
    opacity: 0.4;
}

.shiki .line.addition {
  position: relative;
}

.shiki .line.addition::before {
    content: '+';
    position: absolute;
    color: lime;
    left: -2ch;
    top: 0px;
    font-weight: bold;
}

.shiki:has(.line.addition) .line:not(.line.addition)>span.addition {
    opacity: 1;
}