@charset "utf-8";

/* At Rules */
  /* Font Face */
  @font-face /* CITE (Lapys) -> CSTM Fonts (Christian Schwartz, Ilya Ruderman) @ `https://type.today/en/Graphik`, `https://type.today/en/journal/graphikcondensed` */ {
    font-family: Graphik;
    font-weight: 400;
    src        : local("Graphik Comp Regular Trial"), url(../fonts/graphik.otf) format("opentype")
  }
    @font-face {
      font-family: Graphik;
      font-weight: 100;
      src        : local("Graphik Comp Thin Trial"), url(../fonts/graphik-thin.otf) format("opentype")
    }

    @font-face {
      font-display: fallback;
      font-family : Graphik;
      font-style  : italic;
      font-weight : 100;
      src         : local("Graphik Comp Thin Trial"), url(../fonts/graphik-thin-italic.otf) format("opentype")
    }

    @font-face {
      font-family: Graphik;
      font-weight: 200;
      src        : local("Graphik Comp Exlight Trial"), url(../fonts/graphik-extralight.otf) format("opentype")
    }

    @font-face {
      font-display: fallback;
      font-family : Graphik;
      font-style  : italic;
      font-weight : 200;
      src         : local("Graphik Comp Exlight Trial"), url(../fonts/graphik-extralight-italic.otf) format("opentype")
    }

    @font-face {
      font-family: Graphik;
      font-weight: 300;
      src        : local("Graphik Comp Light Trial"), url(../fonts/graphik-light.otf) format("opentype")
    }

    @font-face {
      font-display: fallback;
      font-family : Graphik;
      font-style  : italic;
      font-weight : 300;
      src         : local("Graphik Comp Light Trial"), url(../fonts/graphik-light-italic.otf) format("opentype")
    }

    @font-face {
      font-display: fallback;
      font-family : Graphik;
      font-style  : italic;
      font-weight : 400;
      src         : local("Graphik Comp Regular Trial"), url(../fonts/graphik-italic.otf) format("opentype")
    }

    @font-face {
      font-family: Graphik;
      font-weight: 500;
      src        : local("Graphik Comp Medium Trial"), url(../fonts/graphik-medium.otf) format("opentype")
    }

    @font-face {
      font-display: fallback;
      font-family : Graphik;
      font-style  : italic;
      font-weight : 500;
      src         : local("Graphik Comp Medium Trial"), url(../fonts/graphik-medium-italic.otf) format("opentype")
    }

    @font-face {
      font-family: Graphik;
      font-weight: 600;
      src        : local("Graphik Comp Semibold Trial"), url(../fonts/graphik-semibold.otf) format("opentype")
    }

    @font-face {
      font-display: fallback;
      font-family : Graphik;
      font-style  : italic;
      font-weight : 600;
      src         : local("Graphik Comp Semibold Trial"), url(../fonts/graphik-semibold-italic.otf) format("opentype")
    }

    @font-face {
      font-family: Graphik;
      font-weight: 700;
      src        : local("Graphik Comp Bold Trial"), url(../fonts/graphik-bold.otf) format("opentype")
    }

    @font-face {
      font-display: fallback;
      font-family : Graphik;
      font-weight : 700;
      font-style  : italic;
      src         : local("Graphik Comp Bold Trial"), url(../fonts/graphik-bold-italic.otf) format("opentype")
    }

    @font-face {
      font-family: Graphik;
      font-weight: 800;
      src        : local("Graphik Comp Black Trial"), url(../fonts/graphik-black.otf) format("opentype")
    }

    @font-face {
      font-display: fallback;
      font-family : Graphik;
      font-style  : italic;
      font-weight : 800;
      src         : local("Graphik Comp Black Trial"), url(../fonts/graphik-black-italic.otf) format("opentype")
    }

    @font-face {
      font-family: Graphik;
      font-weight: 900;
      src        : local("Graphik Comp Super Trial"), url(../fonts/graphik-super.otf) format("opentype")
    }

    @font-face {
      font-display: fallback;
      font-family : Graphik;
      font-style  : italic;
      font-weight : 900;
      src         : local("Graphik Comp Super Trial"), url(../fonts/graphik-super-italic.otf) format("opentype")
    }

  @font-face /* CITE (Lapys) -> Belleve Invis (@be5invis) @ `https://typeof.net/Iosevka`, `https://github.com/be5invis` */ {
    font-family: Iosevka;
    font-weight: 400;
    src        : local(Iosevka), url(../fonts/iosevka.ttf) format("truetype")
  }
    @font-face {
      font-display: swap;
      font-family : Iosevka;
      font-weight : 100;
      src         : local("Iosevka Thin"), url(../fonts/iosevka-thin.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : italic;
      font-weight : 100;
      src         : local("Iosevka Thin"), url(../fonts/iosevka-thin-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : oblique;
      font-weight : 100;
      src         : local("Iosevka Thin Oblique"), url(../fonts/iosevka-thin-oblique.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : Iosevka;
      font-weight : 200;
      src         : local("Iosevka Extralight"), url(../fonts/iosevka-extralight.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : italic;
      font-weight : 200;
      src         : local("Iosevka Extralight"), url(../fonts/iosevka-extralight-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : oblique;
      font-weight : 200;
      src         : local("Iosevka Extralight Oblique"), url(../fonts/iosevka-extralight-oblique.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : Iosevka;
      font-weight : 300;
      src         : local("Iosevka Light"), url(../fonts/iosevka-light.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : italic;
      font-weight : 300;
      src         : local("Iosevka Light"), url(../fonts/iosevka-light-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : oblique;
      font-weight : 300;
      src         : local("Iosevka Light Oblique"), url(../fonts/iosevka-light-oblique.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : italic;
      font-weight : 400;
      src         : local(Iosevka), url(../fonts/iosevka.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : oblique;
      font-weight : 400;
      src         : local(Iosevka), url(../fonts/iosevka.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : Iosevka;
      font-weight : 500;
      src         : local("Iosevka Medium"), url(../fonts/iosevka-medium.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : italic;
      font-weight : 500;
      src         : local("Iosevka Medium"), url(../fonts/iosevka-medium-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : oblique;
      font-weight : 500;
      src         : local("Iosevka Medium Oblique"), url(../fonts/iosevka-medium-oblique.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : Iosevka;
      font-weight : 600;
      src         : local("Iosevka Semibold"), url(../fonts/iosevka-semibold.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : italic;
      font-weight : 600;
      src         : local("Iosevka Semibold"), url(../fonts/iosevka-semibold-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : oblique;
      font-weight : 600;
      src         : local("Iosevka Semibold Oblique"), url(../fonts/iosevka-semibold-oblique.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : Iosevka;
      font-weight : 700;
      src         : local(Iosevka), url(../fonts/iosevka-bold.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : italic;
      font-weight : 700;
      src         : local(Iosevka), url(../fonts/iosevka-bold-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : oblique;
      font-weight : 700;
      src         : local("Iosevka Oblique"), url(../fonts/iosevka-bold-oblique.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : Iosevka;
      font-weight : 800;
      src         : local("Iosevka Extrabold"), url(../fonts/iosevka-extrabold.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : italic;
      font-weight : 800;
      src         : local("Iosevka Extrabold"), url(../fonts/iosevka-extrabold-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : oblique;
      font-weight : 800;
      src         : local("Iosevka Extrabold Oblique"), url(../fonts/iosevka-extrabold-oblique.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : Iosevka;
      font-weight : 900;
      src         : local("Iosevka Heavy"), url(../fonts/iosevka-heavy.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : italic;
      font-weight : 900;
      src         : local("Iosevka Heavy"), url(../fonts/iosevka-heavy-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : Iosevka;
      font-style  : oblique;
      font-weight : 900;
      src         : local("Iosevka Heavy Oblique"), url(../fonts/iosevka-heavy-oblique.ttf) format("truetype")
    }

  @font-face /* CITE (Lapys) -> Underforest Design (Coji Morishita (@coz-m)) @ `https://mplusfonts.github.io` */ {
    font-family: "M PLUS 1 Code";
    font-weight: 400;
    src        : local("M PLUS 1 Code"), url(../fonts/m_plus_1_code.ttf) format("truetype")
  }
    @font-face {
      font-display: swap;
      font-family : "M PLUS 1 Code";
      font-weight : 100;
      src         : local("M PLUS 1 Code Thin"), url(../fonts/m_plus_1_code-thin.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : "M PLUS 1 Code";
      font-weight : 200;
      src         : local("M PLUS 1 Code ExtraLight"), url(../fonts/m_plus_1_code-extralight.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : "M PLUS 1 Code";
      font-weight : 300;
      src         : local("M PLUS 1 Code Light"), url(../fonts/m_plus_1_code-light.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : "M PLUS 1 Code";
      font-weight : 500;
      src         : local("M PLUS 1 Code Medium"), url(../fonts/m_plus_1_code-medium.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : "M PLUS 1 Code";
      font-weight : 600;
      src         : local("M PLUS 1 Code SemiBold"), url(../fonts/m_plus_1_code-semibold.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : "M PLUS 1 Code";
      font-weight : 700 900;
      src         : local("M PLUS 1 Code"), url(../fonts/m_plus_1_code-bold.ttf) format("truetype")
    }

  @font-face /* CITE (Lapys) -> Ascender Corporation (Steve Matteson) @ `https://mattesontypographics.com` */ {
    font-family: "Open Sans";
    font-weight: 400;
    src        : local("Open Sans"), url(../fonts/open_sans.ttf) format("truetype")
  }
    @font-face {
      font-display: swap;
      font-family : "Open Sans";
      font-weight : 100 300;
      src         : local("Open Sans Light"), url(../fonts/open_sans-light.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : "Open Sans";
      font-style  : italic;
      font-weight : 100 300;
      src         : local("Open Sans Light"), url(../fonts/open_sans-light-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : "Open Sans";
      font-style  : italic;
      font-weight : 400;
      src         : local("Open Sans"), url(../fonts/open_sans-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : "Open Sans";
      font-weight : 500 600;
      src         : local("Open Sans Semibold"), url(../fonts/open_sans-semibold.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : "Open Sans";
      font-style  : italic;
      font-weight : 500 600;
      src         : local("Open Sans Semibold"), url(../fonts/open_sans-semibold-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : "Open Sans";
      font-weight : 700;
      src         : local("Open Sans"), url(../fonts/open_sans-bold.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : "Open Sans";
      font-style  : italic;
      font-weight : 700;
      src         : local("Open Sans"), url(../fonts/open_sans-bold-italic.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : "Open Sans";
      font-weight : 800 900;
      src         : local("Open Sans Extrabold"), url(../fonts/open_sans-extrabold.ttf) format("truetype")
    }

    @font-face {
      font-display: fallback;
      font-family : "Open Sans";
      font-style  : italic;
      font-weight : 800 900;
      src         : local("Open Sans Extrabold"), url(../fonts/open_sans-extrabold-italic.ttf) format("truetype")
    }

  @font-face /* CITE (Lapys) -> Indian Type Foundry (Devanagari: Satya Rajpurohit, Jyotish Sonowal, Shiva Nalleperumal) */ {
    font-family: Rajdhani;
    font-weight: 400;
    src        : local(Rajdhani), url(../fonts/rajdhani.ttf) format("truetype")
  }
    @font-face {
      font-display: swap;
      font-family : Rajdhani;
      font-weight : 100 300;
      src         : local("Rajdhani Light"), url(../fonts/rajdhani-light.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : Rajdhani;
      font-weight : 500;
      src         : local("Rajdhani Medium"), url(../fonts/rajdhani-medium.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : Rajdhani;
      font-weight : 600;
      src         : local("Rajdhani Semibold"), url(../fonts/rajdhani-semibold.ttf) format("truetype")
    }

    @font-face {
      font-display: swap;
      font-family : Rajdhani;
      font-weight : 700 900;
      src         : local("Rajdhani Bold"), url(../fonts/rajdhani-bold.ttf) format("truetype")
    }

  /* Keyframes */
  @keyframes click {
    50% {
      border-width: 3px;
      filter      : brightness(0.8);
      transform   : translate(-2px, -2px)
    }
  }

/* DOM Elements */
  /* <body> */
  body { font-family: Graphik, "Open Sans", "Calibri Light", Calibri, sans-serif }

  /* <code>, <kbd>, <pre>, <samp> */
  code, kbd, pre, samp { font-family: "M PLUS 1 Code", Iosevka, monospace }

  /* <h1>, <h2>, <h3>, <h4>, <h5>, <h6> */
  h1, h2, h3, h4, h5, h6 {
    font-family: Rajdhani, Graphik, "Open Sans", "Calibri Light", Calibri, sans-serif;
    font-weight: 500
  }

/* Components */
  /* Button */
  .button {
    border        : 1px solid rgba(127, 127, 127, 0.5);
    filter        : brightness(1.0);
    outline       : none;
    text-transform: uppercase;
    transform     : translate(-0px, -0px)
  }
    /* Pseudo */
      /* Active */
      .button:active { animation: click 150ms ease-out }

      /* Focus */
      .button:focus { border-color: red }