body {
	padding-bottom: 2.5rem;
	font-family: Inter;
}


@font-face {
    font-preload:true;font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/geistmono-variablefont.woff2') format('woff2');
}

@font-face {
    font-preload:true;font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/inter-v12-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/inter-v12-latin-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/inter-v12-latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/inter-v12-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/inter-v12-latin-700.woff2') format('woff2');
}

body,.font-inter {
	font-family: 'Inter',Arial;	
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,.font-geist-mono,.btn {
    font-family: 'Geist Mono',monospace,sans-serif;
}

img[src*="logo"] + span {
	position: absolute;
	color: #191e5f;
	top: 0;
	right: 0;
	margin: -6px 0 0 0;
	letter-spacing: -1px;	
}

.nav-underline input:checked + .nav-link {
	border-bottom-color: var(--bs-nav-tabs-link-active-border-color);
}
.nav-underline input:checked + .nav-link > * {
	color: var(--bs-dark)!important;
}
.nav-tabs input:checked + .nav-link {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-color: var(--bs-nav-tabs-link-active-border-color);
}

.c-snippet, .dark-mode {
	background: #191e5f !important;
    background-image: radial-gradient(circle, #021947 20%, #010520) !important;
    color: #829396;
}
.c-snippet, .dark-mode {
	&:focus {
		color: var(--bs-white);
	}
	&::placeholder {
		color: #829396;
		opacity: 0.85; /* Firefox */
	}
}

.form-check-input:not(:checked) {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;	
}

/* c-snippet code from Harry Roberts as used on https://csswizardry.com/Obs.js/demo/ */
.c-snippet {
    display: block;
    white-space: pre;
    border-radius: 4px;
    overflow: auto;
    text-transform: none;
    padding: 0 1.5rem 1.5em;
}
.c-snippet {
    font-family: "Operator Mono", ui-monospace, monospace;
}

  :root { --dd-gap: .25rem; }

  /* Bootstrap dropdown-menu has display:none; We have to overwrite that */
  .dropdown-menu[popover] { display: block; }
  .dropdown-menu[popover]:not(:popover-open) { display: none; }

  /* base dropdown menu */
  .dropdown-menu[popover] {
	inset: auto;

	/* constant air gap; also overrides popover's default margin:auto */
	margin: var(--dd-gap) 0;

	min-inline-size: 10rem;
	padding: .5rem 0;
	max-block-size: min(70vh, 30rem);
	overflow: auto;

	/* DEFAULT: down + start (Bootstrap default) */
	position-area: block-end span-inline-end;
  }

  .dropup > .dropdown-menu[popover] {
	/* Prefer up + start */
	position-area: block-start span-inline-end;
  }

  /* right alignment */
  .dropdown-menu.dropdown-menu-right[popover] {
	position-area: block-end span-inline-start;
  }

  /* right alignment for dropup */
  .dropup > .dropdown-menu.dropdown-menu-right[popover] {
	position-area: block-start span-inline-start;
  }

  /* animated open/close */
  .dropdown-menu[popover] {
	opacity: 0;
	transform: translateY(-16px) scale(.9);
	transition: opacity 160ms ease, transform 160ms ease;
  }

  .dropup .dropdown-menu[popover] {
	transform: translateY(16px) scale(.9);
  }

  .dropdown-menu[popover]:popover-open {
	opacity: 1;
	transform: translateY(0) scale(1);
  }

  @starting-style {
	.dropdown-menu[popover]:popover-open {
	  opacity: 0;
	  transform: translateY(-16px) scale(.9);
	}
	.dropup .dropdown-menu[popover]:popover-open {
	  transform: translateY(16px) scale(.9);
	}
  }
  
div.alert {
	border-radius: var(--bs-border-radius-sm);
	padding: .5rem 1rem!important;
    margin-bottom: .5rem!important;
	border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);	
    border-width: 0 0 0 2px;	
	border-color: currentColor!important;
}

.spinner {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    display: grid;
    place-items: center;
    margin-bottom: 12px;

    will-change: transform, opacity;
}

/* The spinner ring for gallery */
.spinner::before {
    opacity: 0.5;
    content: "";
    width: 72px;
    height: 72px;
    border-radius: 50%;

    /* simple ring with one highlight segment */
    border: 8px solid rgba(51, 51, 51, 0.18);
    border-top-color: rgba(51, 51, 51, 0.9);

    transform: translateZ(0);
    animation: spin 0.9s linear infinite;
}
.spinner.spinner-xs::before {
    width: 22px;
    height: 22px;
	border-width: 3px;	
}

@keyframes spin {
    from {
        transform: rotate(0deg) translateZ(0);
    }
    to {
        transform: rotate(360deg) translateZ(0);
    }
}