@layer base, page;

@import "../../css/main.css" layer(base);

@layer page {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    overflow: hidden;
    font-size: 16px;
  }

  body {
    background-size: 100%, 40px 40px, 40px 40px;
    background-image:
      radial-gradient(white 15%, rgba(255, 255, 255, 0.75)),
      linear-gradient(to right, grey 1px, transparent 1px),
      linear-gradient(to bottom, grey 1px, transparent 1px);
    background-position: center;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--code-font);
    margin: 0;
    padding: 0;
  }

  .tp-dfwv {
    width: 20rem !important;
    max-height: calc(100vh - 1rem) !important;
    overflow: auto !important;
    border-radius: 6px;
  }


  /* https://github.com/hail2u/color-blindness-emulation */

  .protanopia {
    filter: url(#protanopia);
    -webkit-filter: url(#protanopia);
  }

  .protanomaly {
    filter: url(#protanomaly);
    -webkit-filter: url(#protanomaly);
  }

  .deuteranopia {
    filter: url(#deuteranopia);
    -webkit-filter: url(#deuteranopia);
  }

  .deuteranomaly {
    filter: url(#deuteranomaly);
    -webkit-filter: url(#deuteranomaly);
  }

  .tritanopia {
    filter: url(#tritanopia);
    -webkit-filter: url(#tritanopia);
  }

  .tritanomaly {
    filter: url(#tritanomaly);
    -webkit-filter: url(#tritanomaly);
  }

  .achromatopsia {
    filter: url(#achromatopsia);
    -webkit-filter: url(#achromatopsia);
  }

  .achromatomaly {
    filter: url(#achromatomaly);
    -webkit-filter: url(#achromatomaly);
  }
}