@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Thin.woff2') format('woff2'),
		url('fonts/Raleway-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-ThinItalic.woff2') format('woff2'),
		url('fonts/Raleway-ThinItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-ExtraLight.woff2') format('woff2'),
		url('fonts/Raleway-ExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-ExtraLightItalic.woff2') format('woff2'),
		url('fonts/Raleway-ExtraLightItalic.woff') format('woff');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Light.woff2') format('woff2'),
		url('fonts/Raleway-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-LightItalic.woff2') format('woff2'),
		url('fonts/Raleway-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Regular.woff2') format('woff2'),
		url('fonts/Raleway-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Italic.woff2') format('woff2'),
		url('fonts/Raleway-Italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Medium.woff2') format('woff2'),
		url('fonts/Raleway-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-MediumItalic.woff2') format('woff2'),
		url('fonts/Raleway-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-SemiBold.woff2') format('woff2'),
		url('fonts/Raleway-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-SemiBoldItalic.woff2') format('woff2'),
		url('fonts/Raleway-SemiBoldItalic.woff') format('woff');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Bold.woff2') format('woff2'),
		url('fonts/Raleway-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-BoldItalic.woff2') format('woff2'),
		url('fonts/Raleway-BoldItalic.woff') format('woff');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-ExtraBold.woff2') format('woff2'),
		url('fonts/Raleway-ExtraBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-ExtraBoldItalic.woff2') format('woff2'),
		url('fonts/Raleway-ExtraBoldItalic.woff') format('woff');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-Black.woff2') format('woff2'),
		url('fonts/Raleway-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Raleway';
	src: url('fonts/Raleway-BlackItalic.woff2') format('woff2'),
		url('fonts/Raleway-BlackItalic.woff') format('woff');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--ff-primary: 'Raleway', sans-serif;
	--fs-primary: var(--fs-medium);
	--lh-primary: 1.4;
	--lh-secondary: 1.1;

	--color-primary: #000;
	--color-accent: #dd4897;
	--color-background: #fff;

	--color-brand: var(--color-accent);
	--color-brand-dark: var(--color-accent);
	--color-brand-alt: #116dda;

	--color-brand-primary: var(--color-primary);
	--color-brand-accent: var(--color-accent);

	--color-warnings: tomato;

	--header-height: 4.5lh;
	--header-logo-width: 140px;

	--thumbnail-ratio: 16 / 9;
	--mosaic-min-width: 40ch;
}

@media (width < 120ch){
	html {
		font-size: var(--fs-smaller);
	}
}
/* dark background */
:root {
	--main-background: #ededed;
	--blocks-background: var(--clr-100);
	--footer-background: var(--main-background);
	--color-items-background: var(--blocks-background);
	--item-document-background: #fafafa;
	--block-title-color: var(--clr-400);

	--histo-background: var(--main-background);
}


/* dark background */
input, textarea, select {
	background: var(--blocks-background);
}
.ql-container, .ql-toolbar {
	background: var(--blocks-background);
}

legend {
	border-top-left-radius: var(--ui-border-radius);
	border-top-right-radius: var(--ui-border-radius);
	border-top: var(--ui-border);
	position: relative;

	color: var(--color-brand-dark);
	font-size: var(--fs-smaller);
}
fieldset:has(legend) {
	margin-block-start: .5em;
}
legend::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -1px;
	border: var(--ui-border);
	border-radius: var(--ui-border-radius);
}

#courses-details-front .course-details-front:not(.article),
#curriculum .single .course-details-front {
	padding: 1em;
}

.item-title {
	font-size: var(--fs-larger);
}
.document .item-title {
	box-shadow: 0 0 5px hsla(0, 0%, 50%, .1);
}

.banner.item-main-info {
	border: var(--ui-border);
	border-radius: var(--ui-border-radius);
}
.banner .item-duration-status {
	padding-inline: .5em;
}

.item-histo-container {
	background: var(--color-items-background);
}
.item.course:is(:hover, :focus-within) .item-histo-container {
	color: var(--color-primary);
}
.item-desc-long {
	background: var(--color-items-background);
}

/* jsu thumbnails */
.jsu-thumbnail-placeholder {
	--jsu-placeholder-background: #ffffff;
}