/* Fonts */
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inkfree';
  src: url('/fonts/Inkfree.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bs-body-font-weight: 500;
}

html {
  font-size: 14px;
}

/* Anchor tag scrolling buffer */
:target {
    scroll-margin-top: calc(28.08vw);
}

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

    .div-max1280 {
        max-width: 100%;
        padding-left: calc((100% - 1280px) / 2);
        padding-right: calc((100% - 1280px) / 2);
    }

    /* Anchor tag scrolling buffer */
    :target {
        scroll-margin-top: calc(8.82vw);
    }
}

@media (min-width: 1280px) {
    /* Anchor tag scrolling buffer */
    :target {
        scroll-margin-top: calc(8.82 / 100 * 1280px);
    }
}

.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;
  font-family: 'Open Sans', sans-serif;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.off-white-background {
    background-color: rgb(246, 248, 243);
}

img, svg {
    max-width: 100%;
}

/* Override Bootstrap xl breakpoint from 1200px to 1280px */
@media (min-width: 1200px) and (max-width: 1279px) {
    .d-xl-none {
        display: block !important;
    }
    .d-xl-block {
        display: none !important;
    }
    .d-xl-inline {
        display: none !important;
    }
    .d-xl-inline-block {
        display: none !important;
    }
    .d-xl-flex {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .d-xl-none {
        display: none !important;
    }
    .d-xl-block {
        display: block !important;
    }
    .d-xl-inline {
        display: inline !important;
    }
    .d-xl-inline-block {
        display: inline-block !important;
    }
    .d-xl-flex {
        display: flex !important;
    }
}