@font-face {
  font-family: APL;
  src: url("../ass/APL387.ttf");
  font-feature-settings: "ss02";
}
@font-face {
  font-family: plexs;
  src: url("../ass/plexs.ttf");
}
@font-face {
  font-family: plexs;
  font-style: italic;
  src: url("../ass/plexsi.ttf");
}

i em {
  font-style: normal;
}

[accesskey]::first-letter{
  text-decoration: underline;
}

pre, code, .ngn_lb, #p_Input {
  font-family: APL;
  line-height: 1.1;
  white-space: pre;
}

head:has(link[rel="prev"]) ~ body :not(pre)>code{
  cursor: pointer;
}

:root {
  --md-primary-fg-color: #005832;
  --md-accent-fg-color:  #206d4c;
  --md-primary-fg-color--dark: #174225;
  --md-typeset-a-color:  #FF6A13;
  --lb-color: #8e8e8e;
  --lb-bg:    #212121;
  & > * {
    --md-text-font-family: plexs,sans;
  }
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0c170f;
  --md-hue: 154; 
  --md-typeset-a-color:  #FF6A13;
  --lb-color: #878b89;
  --lb-bg:    #151c19;
}

.md-header {
  border-top: 5px solid #FF6A13;
  & .md-logo img {
    scale: 1.25;
    padding-left: 2ch;
  }
  & .md-header__title {
    visibility: hidden;
  }
  & form {
    & a svg:hover {
        transition: opacity 0.25s;
        opacity: 0.7;
    }
    & label svg {
      height: 0.8rem;
      margin-top: 0.1rem;
    }
  }
}

.md-nav .md-nav__title{
  max-height: 9ex;
}

.md-copyright {
  width: 100%;
  & div {
    float: right;
  }
}

.md-nav__link[for]:focus, .md-nav__link[for]:hover,
.md-nav__link[href]:focus, .md-nav__link[href]:hover,
.md-typeset a:hover {
  color:#FF833B;
}

.md-typeset {
  & button, & .md-button {
    color: var(--md-primary-bg-color);
    font-weight: bold;
    padding: 0 0.2rem;
    border-radius: .1rem;
    background-color: var(--md-primary-fg-color);
  }
  & h1 img {
    height: 3ex;
    vertical-align: bottom;
  }
  & .n {
    list-style-type: none;
  }
  & .timestable {
    border-collapse: collapse;
    line-height: 1.25;
    & td, & th {
      padding: 0 0.5ex;
      text-align: center;
    }
    & tr:first-child th {
      border-bottom: 1px solid currentcolor;
    }
    & th:first-child {
      border-right: 1px solid currentcolor;
    }
  }
}

/* input */

.pdiv, .sdiv {
  display: grid;
  grid-template-columns: 6em auto 6em;
  box-shadow: var(--md-shadow-z1);
  & label {
      color: #eceff4;
      background: #424f49;
      text-align: center;
      padding: 1.3ex;
      &:first-of-type {border-top-left-radius: .1rem}
      &:last-of-type {border-bottom-left-radius: .1rem}
  }
  & input {
    background: var(--md-code-bg-color);
    padding: 1ex;
    border: 0.5ex solid transparent;
    &:invalid {border-color: #ff5252;}
    &:focus   {border-color: var(--md-accent-fg-color);}
  }
  & .md-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      z-index: 1;
  }
}
.pdiv {
  grid-template-rows: 3em 3em;
  & label {
      &:first-of-type {margin-bottom: 1px}
      &:last-of-type {margin-top: 1px}
  }
  & input {
    &:first-of-type {margin-bottom:1px;}
    &:last-of-type {margin-top:1px;}
  }
  & .md-button {
    grid-area: 1 / 3 / 3 / 4;
    font-size: large;
  }
}

/* lb */

.ngn_lb {
  background:var(--lb-bg);
  cursor:default;
  font-size:0.8rem;
  padding:1ex;
  justify-content:center;
  user-select:none;
  display:flex;
  flex-wrap:wrap;
  color: var(--lb-color);
  & * {
    cursor:pointer;
    padding:0.125rem;
    font-weight:normal;
    border-radius:0.125rem;
    &:hover {
      color:#fff;
      background:var(--md-primary-fg-color);
    }
    &::after{
      content:attr(data-t);
    }
  }
}

.ngn_bq .ngn_lb {
  transition:color 0.4s ease;
  animation: pulse 0.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {background-color:var(--lb-bg)}
    50%    {background-color: #174225}
}

/* lb height adjustments */

                                       .md-typeset :is(h1,h2,h3):target {--md-scroll-offset: -2rem;}
@media screen and (max-width:1700px) {.md-typeset :is(h1,h2,h3):target {--md-scroll-offset: -3rem;}}
@media screen and (max-width:800px ) {.md-typeset :is(h1,h2,h3):target {--md-scroll-offset: -4rem;}}
@media screen and (max-width:550px ) {.md-typeset :is(h1,h2,h3):target {--md-scroll-offset: -5rem;}}