body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 14pt;
    margin: auto;
    padding: 20px;
    max-width: 720px;
    text-align: left;
    background-color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: #444;
  }

  a.title > h2 {
    font-size: 24pt;
    text-align:center;
  }

  nav {
    text-align: center;
    font-family: sans-serif;
  }

  h1, h2, h3, h4, h5, h6, strong, b {
    color: #222;
    font-family: sans-serif;
  }

  a {
    color: #3273dc;
    /*color: #ff5e6c;*/
  }

  a:hover {
    color:#8cc2dd;
  }

  .title {
    text-decoration: none;
    border: 0;
  }

  .title span {
    font-weight: 400;
  }

  nav a {
    margin-right: 10px;
  }

  textarea {
    width: 100%;
    font-size: 16px;
  }

  input {
    font-size: 16px;
  }

  content {
    line-height: 1.6;
  }

  table {
    width: 100%;
  }

  img {
    max-width: 100%;
  }

  code {
    padding: 2px 5px;
    background-color: #f2f2f2;
  }

  pre code {
    color: #222;
    display: block;
    padding: 20px;
    white-space: pre-wrap;
    font-size: 14px;
    overflow-x: auto;
  }

  div.highlight pre {
    background-color: initial;
    color: initial;
  }

  div.highlight code {
    background-color: unset;
    color: unset;
  }

  blockquote {
    border-left: 1px solid #999;
    color: #222;
    padding-left: 20px;
    /* font-style: italic; */
  }

  footer {
    padding: 25px;
    text-align: center;
  }

  .helptext {
    color: #777;
    font-size: small;
  }

  .errorlist {
    color: #eba613;
    font-size: small;
  }

  /* blog posts */
  ul.blog-posts {
    list-style-type: none;
    padding: unset;
  }

  ul.blog-posts li {
    display: flex;
  }

  ul.blog-posts li span {
    flex: 0 0 130px;
  }

  /* ul.blog-posts li a:visited {
    color: #8b6fcb;
  }*/

  @media (prefers-color-scheme: dark) {
    body {
      background-color: #333;
      color: #ddd;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong,
    b {
      color: #eee;
    }

    a {
      color: #8cc2dd;
    }

    a:link {
      color: #8cc2dd;
    }
    
    a:visited {
      color: #8cc2dd;
    }

    a:hover {
      color: #fff;
    }

    code {
      background-color: #777;
    }

    pre code {
      color: #ddd;
    }

    blockquote {
      color: #ccc;
    }

    textarea,
    input {
      background-color: #252525;
      color: #ddd;
    }

    .helptext {
      color: #aaa;
    }

    img.arrows-footer {
      filter: invert(1);
    }

    div.home_idcard {
      background-color: #202020;
      color: #f0f0f0;
      filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.45));
    }

    div.home_idcard::before {
      opacity: 0.35;
    }

    .home_idcard_details_heading,
    .home_idcard_details_value {
      color: inherit;
    }
  }

  /* customised styles */
  
  @media screen and (min-width: 479px) {
    div#home-list > ul {
      /* make the link menu on home page two column when wide enough */
      columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
      
    }
    
  }

  div#home-list > ul {
    /* remove left-padding from list and remove bullet point */
    list-style-type: none;
    padding-left: 0;
    font-family: sans-serif;
  }

  div#home-list > ul > a > li {
    /* turn list items on home listto be more button-like */
    text-align: center;
    padding: 10px;
    background-color: slategray;
    border: #000 1px solid

  }

  div#home-list > ul > a > li, div#home-list > ul > a:link > li {
    color: #fff !important;
  }

  div#home-list > ul > a > li:hover {
    color: lightgray !important;
    background-color: gray;
    font-weight: bold;
  }


  /* Style for alert box*/ 
  div.alert-notice {
    background-color: slategray;
    color: #fff !important;
    padding: 25px;
    margin: 15px;
    font-family: sans-serif;
  }

  div.alert-notice > a:link, div.alert-notice > a:visited {
    color: #fff !important;
  }

  div.alert-notice > a:hover {
    color: lightgray !important;
  }

  a#italic {
    font-style: italic;
  }


  /* Home page ID card */

  div.home_idcard {
    background-color: #efefef;
    /* padding: 20px; */
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
    position: relative;
    background-color: #f5f5f2;
  }

  div.home_idcard::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      repeating-radial-gradient(circle at 20% 20%, rgba(0, 48, 135, 0.04) 0 2px, transparent 2px 14px),
      repeating-radial-gradient(circle at 80% 60%, rgba(255, 205, 0, 0.06) 0 2px, transparent 2px 16px),
      radial-gradient(circle at center, rgba(0, 0, 0, 0.02) 0 1px, transparent 1px 100%);
    background-size: 220px 220px, 260px 260px, 40px 40px;
    mix-blend-mode: multiply;
    opacity: 0.7;
    pointer-events: none;
  }

  @media (prefers-color-scheme: dark) {
    div.home_idcard {
      background-color: #12151d;
      background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 0, 140, 0.30) 0 12px, transparent 12px 100%),
        radial-gradient(circle at 85% 70%, rgba(0, 255, 180, 0.28) 0 14px, transparent 14px 100%),
        linear-gradient(135deg, rgba(0, 255, 220, 0.08), rgba(255, 0, 150, 0.05));
      background-size: 240px 240px, 280px 280px, 100% 100%;
      background-repeat: repeat;
      color: #f0f0f0;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 28px rgba(0, 255, 180, 0.16),
        0 0 70px rgba(255, 0, 140, 0.11);
    }

    div.home_idcard::before {
      opacity: 0.9;
      background-image:
        repeating-radial-gradient(circle at 20% 20%, rgba(0, 255, 180, 0.28) 0 2px, transparent 2px 18px),
        repeating-radial-gradient(circle at 80% 60%, rgba(255, 0, 140, 0.24) 0 2px, transparent 2px 20px),
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 15px);
      background-size: 220px 220px, 260px 260px, 220px 220px;
      mix-blend-mode: screen;
      filter: blur(0.35px) saturate(1.4);
    }
  }

  div.home_idcard_head {
    font-family: 'Arial', sans-serif;
    font-size: 18pt;
    font-weight: bold;
    font-variant: small-caps;
    margin: 0;
    background: linear-gradient(to right, #003087, #ffcd00);
    color: #fff;
    padding: 10px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    flex-wrap: wrap;
  }

  .home_idcard_head_prefix {
    display: inline;
  }

  @media (max-width: 520px) {
    .home_idcard_head_prefix {
      display: none;
    }
  }

  img.home_idcard_photo {
    float: left;
    margin-right: 20px;
    max-height: 225px;
  }

  img#biometric {
    position: absolute;
    right: 12px;
    bottom: 12px;
    height: 1.2em;
    width: auto;
    opacity: 0.55;
    z-index: 1;
  }

  ul.home_idcard_details {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    list-style-type: none;
    margin: 0;
    padding: 16px 20px 20px 20px;
    background-color: inherit;
  }

  ul.home_idcard_details li {
    margin-bottom: 0;
  }

  @media (max-width: 640px) {
    img.home_idcard_photo {
      float: none;
      display: block;
      margin: 0 0 16px 0;
      max-width: 100%;
      max-height: none;
    }

    ul.home_idcard_details {
      clear: both;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 12px 16px 16px 16px;
    }
  }

  p.home_idcard_details_heading {
    font-weight: bold;
    margin: 0;
    font-size: smaller;
    line-height: 1.2;
  }

  p.home_idcard_details_value {
    margin: 2px 0 0 0;
    font-size: inherit;
  }