@charset "UTF-8";


@-ms-viewport {width: device-width;}
@viewport {width: device-width;}

::selection {background-color: rgba(255, 244, 147, 0.8); color: #2c3338;}

a, *:focus {color: inherit; outline: 0 none; text-decoration: none;}
a:has(> img) {display: block;}
img {border: 0 none;}

.invisible {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}



/* **************************************************************
* sanitize.css/assets.css
*/

/**
 * Restrict sizing to the page width in all browsers (opinionated).
 */

:where(iframe, img, input, video, select, textarea) {
  height: auto;
  max-width: 100%;
}


/* **************************************************************
* sanitize.css/forms.css
*/

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Add typography inheritance in all browsers (opinionated).
 */

:where(button, input, select, textarea) {
  background-color: transparent; /* 1 */
  border: 1px solid WindowFrame; /* 1 */
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  letter-spacing: inherit; /* 2 */
  padding: 0.25em 0.375em; /* 1 */
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */

:where(select) {
  -webkit-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
  border-radius: 0;
  padding-right: 1em;
}

/**
 * Don't show the arrow for multiple choice selects
 */

:where(select[multiple]) {
  background-image: none;
}

/**
 * Remove the border and padding in all browsers (opinionated).
 */

:where([type="color" i], [type="range" i]) {
  border-width: 0;
  padding: 0;
}


/* **************************************************************
* sanitize.css/typography.css
*/

/**
 * Use the default user interface font in all browsers (opinionated).
 */

html {
  font-family:
  "Inter", 
    system-ui,
    /* macOS 10.11-10.12 */ -apple-system,
    /* Windows 6+ */ "Segoe UI",
    /* Android 4+ */ "Roboto",
    /* Ubuntu 10.10+ */ "Ubuntu",
    /* Gnome 3+ */ "Cantarell",
    /* KDE Plasma 5+ */ "Noto Sans",
    /* fallback */ sans-serif,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}

/**
 * Use the default monospace user interface font in all browsers (opinionated).
 */

code,
kbd,
samp,
pre {
  font-family:
    ui-monospace,
    /* macOS 10.10+ */ "Menlo",
    /* Windows 6+ */ "Consolas",
    /* Android 4+ */ "Roboto Mono",
    /* Ubuntu 10.10+ */ "Ubuntu Monospace",
    /* KDE Plasma 5+ */ "Noto Mono",
    /* KDE Plasma 4+ */ "Oxygen Mono",
    /* Linux/OpenOffice fallback */ "Liberation Mono",
    /* fallback */ monospace,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}




:root {
	--hjo-blue: #135e96; /* Blue 60 */
	--hjo-red: #b32d2e; /* Red 60 */
	--hjo-gray: #f6f7f7; /* Gray 0 */
	--hjo-gray2: #f0f0f1; /* Gray 2 */
	--hjo-gray5: #dcdcde; /* Gray 5 */
	--hjo-gray10: #c3c4c7; /* Gray 10 */
	--hjo-gray20: #a7aaad; /* Gray 20 */
	--hjo-gray80: #2c3338; /* Gray 80 */
}


/* EOF */