/* ExtraLight */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-ExtraLight.woff2') format('woff2'),
         url('/assets/IBMPlexSans-ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-ExtraLightItalic.woff2') format('woff2'),
         url('/assets/IBMPlexSans-ExtraLightItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
}

/* Light */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-Light.woff2') format('woff2'),
         url('/assets/IBMPlexSans-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-LightItalic.woff2') format('woff2'),
         url('/assets/IBMPlexSans-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

/* Regular */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-Regular.woff2') format('woff2'),
         url('/assets/IBMPlexSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-Italic.woff2') format('woff2'),
         url('/assets/IBMPlexSans-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

/* Medium */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-Medium.woff2') format('woff2'),
         url('/assets/IBMPlexSans-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-MediumItalic.woff2') format('woff2'),
         url('/assets/IBMPlexSans-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

/* SemiBold */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-SemiBold.woff2') format('woff2'),
         url('/assets/IBMPlexSans-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
         url('/assets/IBMPlexSans-SemiBoldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-Bold.woff2') format('woff2'),
         url('/assets/IBMPlexSans-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-BoldItalic.woff2') format('woff2'),
         url('/assets/IBMPlexSans-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

/* Thin */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-Thin.woff2') format('woff2'),
         url('/assets/IBMPlexSans-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-ThinItalic.woff2') format('woff2'),
         url('/assets/IBMPlexSans-ThinItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}

/* Text */
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-Text.woff2') format('woff2'),
         url('/assets/IBMPlexSans-Text.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/assets/IBMPlexSans-TextItalic.woff2') format('woff2'),
         url('/assets/IBMPlexSans-TextItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}



/* ExtraLight */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-ExtraLight.woff2') format('woff2'),
         url('/assets/IBMPlexMono-ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono.woff2') format('woff2'),
         url('/assets/IBMPlexMono.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
}

/* Light */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono.woff2') format('woff2'),
         url('/assets/IBMPlexMono.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono.woff2') format('woff2'),
         url('/assets/IBMPlexMono.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

/* Regular */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-Regular.woff2') format('woff2'),
         url('/assets/IBMPlexMono-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-Italic.woff2') format('woff2'),
         url('/assets/IBMPlexMono-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

/* Medium */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-Medium.woff2') format('woff2'),
         url('/assets/IBMPlexMono-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-MediumItalic.woff2') format('woff2'),
         url('/assets/IBMPlexMono-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

/* SemiBold */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-SemiBold.woff2') format('woff2'),
         url('/assets/IBMPlexMono-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-SemiBoldItalic.woff2') format('woff2'),
         url('/assets/IBMPlexMono-SemiBoldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-Bold.woff2') format('woff2'),
         url('/assets/IBMPlexMono-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-BoldItalic.woff2') format('woff2'),
         url('/assets/IBMPlexMono-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

/* Thin */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-Thin.woff2') format('woff2'),
         url('/assets/IBMPlexMono-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-ThinItalic.woff2') format('woff2'),
         url('/assets/IBMPlexMono-ThinItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}

/* Text */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-Text.woff2') format('woff2'),
         url('/assets/IBMPlexMono-Text.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/IBMPlexMono-TextItalic.woff2') format('woff2'),
         url('/assets/IBMPlexMono-TextItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}


body {
    font-family: "IBM Plex Sans";
    margin: 0;
    padding-bottom: 25em;
}

code {
    font-family: "IBM Plex Mono";
}

#disclaimer {
  text-align: center;
  background: #f2f1ac;
  padding: 0;
  padding: 0.25em;
  font-style: italic;
}

#js-disclaimer {
  display: block;
  position: relative;
  width: 320px;
  height: 240px;
  border: 1px solid black;
  margin: 2em auto;
}

#js-disclaimer .logo {
  position: absolute;
  width: 6em;
  height: 3em;
  font-family: "IBM Plex Mono";
  font-weight: 900;
  font-style: italic;
  animation:
    js-disclaimer-x 3s linear infinite alternate,
    js-disclaimer-y 4s linear infinite alternate,
    js-disclaimer-color-x 15s step-start infinite,
    js-disclaimer-color-y 20s step-start infinite;
  color:
    hsl(calc(
      360 / 25 * (var(--color-y) * 5 + var(--color-x)) * 1deg
    ) 100% 50%);
}

#js-disclaimer-text {
  text-align: center;
  font-style: italic;
  color: grey;
}

@keyframes js-disclaimer-x {
  from { left: 0; }
  to { left: calc(100% - 6em); }
}

@keyframes js-disclaimer-y {
  from { top: 0; }
  to { top: calc(100% - 3em); }
}

@keyframes js-disclaimer-color-x {
  from { --color--x: 0; }
  20% { --color-x: 2; }
  40% { --color-x: 4; }
  60% { --color-x: 1; }
  80% { --color-x: 3; }
  to { --color-x: 0; }
}

@keyframes js-disclaimer-color-y {
  from { --color-y: 0; }
  20% { --color-y: 2; }
  40% { --color-y: 4; }
  60% { --color-y: 1; }
  80% { --color-y: 3; }
  to { --color-y: 0; }
}

.page-width {
  max-width: 55rem;
  margin: auto;
  padding: 1rem 0;
}

input#ap-input {
  width: 100%;
  min-width: 100%;
  font-size: 1.5rem;
  border-radius: 1rem;
  border-width: 4px;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow: hidden;
}

#searchresult {
  background: lightgrey;
}

#searchresult summary::marker {
  content: "";
}

#searchresult code {
  white-space: pre-wrap;
}

.unselectable {
  user-select: none;
}

details summary {
  cursor: pointer;
}

details summary:hover {
  background: #c7d0d7;
}

details[open] summary {
  background: #bbc2c8;
}

details .annotation {
  background: white;
  box-shadow: inset 0px 10px 10px -6px lightgrey;
  transition: padding-top 150ms ease-out;
}

details[open] .annotation {
  padding-top: 0.2em;
}

details.Violation .annotation {
  color: red;
}

details.Warning .annotation {
  color: yellow;
}

details.Note .annotation {
  color: grey;
}

details.Correct .annotation {
  color: green;
}

/* Desktop */
@media (min-width: 50em) {
}

/* Smartphone */
@media (max-width: 50em) {
  h1 {
    font-size: 2rem;
  }
}