:root{
    /* Header variables */
    --main-fgc: #484848d6;
    --main-bgc: #f8f8f8cc;
    --main-blur: 5px;
    --main-ddt: #000000;
    --mobile-ddt: #000000;
    --main-ddhb: #bfbfbf55;
    --mobile-ddhb: #7d7d7d55;
    --main-dropmenu-text: #7b7b7b;
    --main-dropmenu-hovertext: #000000;
    --main-topmenu-hilightfg: #000000;
    --main-topmenu-hilightbg: #e7e7e7a6;
    --mobile-logo:#ffffffaa;
    --mobile-logo-hover:#4c4c4c;
    --mobile-exit:#4c4c4c;

    /*page variables */
    --page-header-bgc: #dbd9d9;

}
*, ::after, ::before {
    box-sizing: inherit;
}
html {
    height: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-x: hidden
}

* body {
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    width: 100vw;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-display: swap;
}
.tspacer {
    height: 70px;
    width: 100%;
}
.tspacer:has(+ .blog-post-wrapper) {
    height: 1vh;
}
/* scrollbar css */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
  }
  ::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-image:  -webkit-gradient(linear,
                          left bottom,
                          left top,
                          color-stop(0.44, rgb(22, 131, 181)),
                          color-stop(0.72, rgb(29, 163, 226)),
                          color-stop(0.86, rgb(22, 121, 167)));
  }
  @media screen and (max-width: 960px) {
  /* custom scroll bar */
  ::-webkit-scrollbar {
      width: 10px;
  }
  ::-webkit-scrollbar-track {
      background: #242526;
  }
  ::-webkit-scrollbar-thumb {
      background: #3A3B3C;
  }
  }
@font-face {
    font-family: 'Roboto';
    font-display: swap;
    font-size: 24px;
    font-weight: 100;
    src: url("/fonts/woff2/roboto-regular-webfont.woff2") format("woff2");
}
@font-face {
    font-family: 'Roboto';
    font-display: swap;
    font-size: 24px;
    font-weight: 400;
    src: url("/fonts/woff2/roboto-regular-webfont.woff2") format("woff2");
}
@font-face {
    font-family: 'Roboto';
    font-display: swap;
    font-size: 24px;
    font-weight: 600;
    src: url("/fonts/woff2/roboto-regular-webfont.woff2") format("woff2");
}

ul.check-list {
    list-style: none;
    line-height: 2em;
}
ul.check-list li:before {
    content: '✓ ';
    color: green;
    font-weight: 800;
}

.faq > p {
    margin-left: 25px;
}