body{
            font-family: "Red Hat Text", serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: normal;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
        }

        h1{
            font-family: "Red Hat Display", serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-style: normal; 
            font-size: calc(1.5rem + .3vw) !important;;
        }

        h2{
            font-family: "Red Hat Text", serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-style: normal; 
            font-size: calc(1.3rem + .3vw) !important;
        }

        img.h2{ height: calc(1.0rem + .3vw); margin-right:1vw; }
        img.h3{ height: calc(0.7rem + .3vw); margin-right:1vw; }

        h3{
            font-family: "Red Hat Text", serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: normal; 
            font-size: calc(1.1rem + .3vw) !important;
        }

        h3 img{ display:flex; width: auto; height: calc(1.0rem + .3vw) !important; }
        h3 span{
            font-size: calc(1.0rem + .3vw) !important; 
            margin-right:.7vw
        }

        h4{
            font-family: "Red Hat Text", serif;
            font-optical-sizing: auto;
            font-weight: 550;
            font-style: normal; 
            font-size: calc(0.9rem + .3vw) !important;
        }

        header nav{
            background: white;
        }

        footer{
            width:100vw;
            min-height: 7vh;
            display: flex;
        }

        section.insider{
            padding: 12vh 10vw 5vh 10vw;
            margin-top: 7vh;
            min-height: 86vh;
            overflow: auto;
            display: block;
        }

        .gray{
            background: rgba(0,0,0,0.05);
            padding:2rem 1rem 2rem 1rem;
        }

        .pr3{
            padding-right:10vw;
            font-family: "Red Hat Text", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal; 
            font-size: calc(0.8rem + .3vw) !important;
        }

        .ico{
            width:10%;
        }

        [data-bs-theme="dark"] .invert {
           filter: invert(1) brightness(2);
        }

        [data-bs-theme="dark"] .ico {
           filter: invert(1) brightness(2);
        }

        [data-bs-theme="dark"] h3 img {
           filter: invert(1) brightness(2);
        }

        .mono{
            font-family: "Red Hat Mono", serif;
            font-optical-sizing: auto;
            font-weight: 300;
            font-style: normal;
            font-size: small;
        }

        .black{
            background: black;
        }

        .white{
            color: white;
        }

        .f1{ font-size: small !important; }
        .f2{ font-size: x-small !important; }

        .login-checkboxes{ max-width:25vw; }

        .error__content .mono{
            font-size: calc(.5rem + .25vw) !important;
        }

        .mono b{
            font-weight: 600;
        }

        .w100{
            width: 100%;
        }

        .card-body{
            min-width: 30vw;
            max-width: 75vw;
        }

        .visible{
            display: block;
            margin: 0.5em 0px 0px 0px;
        }

        .fingerprint{
            max-width: 15vw;
        }

        .container{
            max-width: 50vw;
        }

        .logo{
            max-height: 8vh;
            width: 15vw;    
            margin-bottom:3vh;        
        }

        .navbar .logo{
            max-height: 1.5vh;
            width: 12vw;
            margin-bottom: auto;
        }

        .forbidden img{
            max-height: 3vh;
        }

        .forbidden div div{
            min-height: 3vh;
        }


@property --t {
  syntax: "<number>";
  initial-value: 180;
  inherits: true;
}
/* won't be needed once Chrome supports round() */
@property --s {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
.countdown {
  /* when Chrome supports round(), this can be simplified */
  /* more on this rounding trick
   * https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/ */
  --s: calc(var(--t)/1);
  display: grid;
  margin: 1em auto;
  width: 15em;
  height: 15em;
  animation: t 180s linear infinite;
}
.countdown::after {
  grid-column: 1;
  grid-row: 1;
  place-self: center;
  font: 3em/2 "Red Hat Text", serif, ubuntu mono, consolas, monaco, monospace;
  counter-reset: s var(--s);
  content: "" counter(s, decimal-leading-zero);
}

@keyframes t {
  to {
    --t: 0 ;
  }
}
svg {
  grid-column: 1;
  grid-row: 1;
}

[r] {
  fill: none;
  stroke: silver;
}
[r] + [r] {
  --k: calc(var(--t)/180);
  transform: rotate(-90deg);
  stroke-linecap: round;
  stroke: color-mix(in hsl shorter hue, #69ff47 calc(var(--k)*100%), #7ec56e);
  stroke-dasharray: var(--k) 1;
}