html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}



/**
  * Checkerboard pattern
  * 
  * @see https://stackoverflow.com/questions/55455177/responsive-checkerboard-pattern-background
*/
div.checker {
    width: 100%;
    height: 30px;
    overflow: hidden;
    /* resize: auto; */
    position: relative;
    /* outline: 2px dashed salmon; */
}

div.checker::before {
    --pattern-repeated: 75; /* squares per-row */
    --pattern-color-1: transparent;
    --pattern-color-2: Black;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* a huge width is used to make sure the there's plenty of rows */
    width: 10000%;
    /* make the pattern way bigger than its container */
    aspect-ratio: 2/1;
    background: repeating-conic-gradient( var(--pattern-color-1) 0 90deg, var(--pattern-color-2) 0 180deg) 0 0 /
    /* for every 0 past the third from left devide by 100 by 10, so 10,000% has 3 extra zeros
    * 100 / 10 / 10 = 1 and since "conic-gradient" means 4 squares (2 up, 2 down) per repeated patten, 
    * need double the pattern's size should be doubled manually so the exact number of "--pattern-repeated"
    * columns would render, so 1% becomes 2%, which results in 10 columns in this demo.
    */
    calc(2%/var(--pattern-repeated)) calc(2%/var(--pattern-repeated)) round;
}