:root {
  --mono: "Monaspace Neon", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;
}

html {
    display: flex;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-family: var(--mono);
    font-weight: 300;
    margin: 0;
    width: 100%;
    letter-spacing: -0.48px;
}

@font-face {
  font-family: "Monaspace Neon";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-300-normal.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-300-normal.woff") format("woff");
}

@font-face {
  font-family: "Monaspace Neon";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-400-normal.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-400-normal.woff") format("woff");
}

@font-face {
  font-family: "Monaspace Neon";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-600-normal.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-600-normal.woff") format("woff");
}

@font-face {
  font-family: "Monaspace Neon";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-700-normal.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-700-normal.woff") format("woff");
}

code, pre, kbd, samp {
  font-family: var(--mono);
  font-feature-settings: "calt" 1, "liga" 1; /* texture healing + ligatures */
}

.pageBlock {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    padding: 30px 30px 0 30px;
}

.unselectable {
    -webkit-user-select: none;    
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media screen and (max-width: 769px) {
    .pageBlock {
        padding: 10px 10px 0 10px;
    }
}