:root {
	/* ------------------
		spacing
	------------------ */
	--centered_container_max_width: 90rem;
	
	--spacing_600: calc(var(--spacing_400) * 2);
	--spacing_500: calc(var(--spacing_400) * 1.5);
	--spacing_400: 2rem;
	--spacing_300: calc(var(--spacing_400) / 1.5);
	--spacing_200: calc(var(--spacing_400) / 2);
	
	--maincontent_top_start: calc(var(--primaryHeaderHeight) + var(--spacing_400));
	
	/* ------------------
		color
	------------------ */
	--clr_accent: #AD8B50;
	--clr_bg_main: SeaShell;
	--clr_bg_item: hsl(211, 100%, 88%);
	--clr_text: #4D6A8A;
	
	--clr_border: var(--clr_text);
	
	/* ------------------
		style
	------------------ */
	--border_radius: .5rem;
	
	/* ------------------
		typo
	------------------ */
	--step_0: clamp(0.75rem, calc(0.65rem + 0.51vw), 1.00rem);
	--step_1: clamp(0.90rem, calc(0.76rem + 0.71vw), 1.25rem);
	--step_2: clamp(1.08rem, calc(0.88rem + 0.98vw), 1.56rem);
	--step_3: clamp(1.30rem, calc(1.03rem + 1.33vw), 1.95rem);
	
	--fs_700: var(--step_3, 2rem);
	--fs_600: var(--step_2, 1.55rem);
	--fs_500: var(--step_1, 1.25rem);
	--fs_400: var(--step_0, 1rem);
	
	--lh_700: calc(var(--fs_700) * 1.618);
	--lh_600: calc(var(--fs_600) * 1.618);
	--lh_500: calc(var(--fs_500) * 1.618);
	--lh_400: calc(var(--fs_400) * 1.618);
	
	--fw_700: 700;
	--fw_600: 600;
	--fw_500: 500;
	--fw_400: 400;
}



/* -------------
	General 
------------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--maincontent_top_start); /* für anker auf der Seite - geht auch ohne smooth scroll */
	
	font-size: var(--fs_400);
	line-height: var(--lh_400);
	font-weight: var(--fw_400);
	
	background-color: var(--clr_bg_main);
	color: var(--clr_text);
}
nav ul {list-style: none;}


.flex {
	display: flex;
	gap: var(--spacing_400, 1rem); /* erster Wert = Variable, zweiter Wert fallback wenn 1 nicht definiert */
}
.grid {
	display: grid;
	gap: var(--spacing_400, 1rem); 
	grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr));
}

/* -------------
	Typo 
------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	color: var(--clr_accent);
	margin-bottom: 1em;
}

h1, .h1 {
	font-size: var(--fs_700);
	line-height: var(--lh_700);
	font-weight: var(--fw_700);
}
h2, .h2 {
	font-size: var(--fs_700);
	line-height: var(--lh_700);
	font-weight: var(--fw_700);
}
h3, .h3 {
	font-size: var(--fs_600);
	line-height: var(--lh_600);
	font-weight: var(--fw_600);
}
h4, .h4 {
	font-size: var(--fs_500);
	line-height: var(--lh_500);
	font-weight: var(--fw_500);
}

a {
	text-decoration: underline;
	color: initial;
}

pre {
	font-size: calc(var(--fs_400) - 0.2rem);
}




/* -------------
	Structure 
------------- */

.maincontent {
	margin: var(--maincontent_top_start) auto var(--primaryHeaderHeight);
	width: max(var(--centered_container_max_width), 100% - (var(--spacing_400) * 2)); /* mindestens wert a oder(,) b - reihenfolge egal */
	
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 3rem;
	align-items: start;
}

.sidebar {
	position: sticky;
	top: calc(var(--maincontent_top_start) + (var(--lh_700) + var(--fs_700)));
}

.subnav li {	
	margin-bottom: var(--spacing_200);
}
.subnav a {	
	color: var(--clr_text);
	font-size: var(--fs_500);
	font-weight: var(--fw_500);
	text-decoration: none;
}
.subnav a:hover {
	text-decoration: underline;
}

section {
	margin-bottom: calc(var(--fs_700) + 2rem);
}

.card {
	border: 2px solid var(--clr_border);
	border-radius: var(--border_radius);
	
	padding: var(--spacing_400);
}
.card h3 {
	text-align: center;
}

.card-item {
	border: 1px solid var(--clr_border);
	border-radius: var(--border_radius);
	margin-bottom: 1em;
}

code {
	background-color: var(--clr_bg_item);
	color: var(--clr_text);
	font-size: var(--fs_500);
	padding: var(--spacing_300);
	border-radius: var(--border_radius) var(--border_radius) 0 0;
	display: block;
}
code span.red {
	color: red;
}
code span.zoom {
	color: initial;
	font-size: var(--fs_700); 
	position: relative;
	top: .4rem;
}
.description {
	padding: var(--spacing_300);
}

/* ---------------------
	Typography Tricks
--------------------- */
.multiple-textshadow { 
	text-shadow: 
		0.025em 0.025em 0 yellow,
		0.05em 0.05em 0 blue, 
		0.075em 0.075em 0 red;
		
	font-size: var(--fs_600);
}
.gradient-text { 
	width: fit-content;
	background-image: linear-gradient(90deg, limegreen, black);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	
	font-size: var(--fs_600);
	font-weight: var(--fw_700);
}
.text-outline {
	-webkit-text-stroke: 1px blue; 
	
	font-size: var(--fs_600);
	font-weight: var(--fw_700);

	color: #fff;
}
.text-cut {
	border: 1px solid #ccc;
	
	display: -webkit-box;
	-webkit-line-clamp: 2; /* Anzahl der Zeilen */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.text-count {
	max-width: 35ch;
}

.v-alignment {
	font-weight: bold;
	writing-mode: vertical-lr;
}

.underline-styles {
	text-decoration-thickness: 0.2rem;
	text-decoration-color: red;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-line: underline overline;

	text-decoration: underline overline solid red 0.2rem;  /* shorthand */

	text-underline-offset: 0.05rem;

	transition: color 500ms, text-decoration-color 1500ms;
}
.underline-styles:hover,
.underline-styles:focus {
	color: red;
	text-decoration-color: lime;
}

.gradient-styles {
	color: red;
	text-decoration: none;
	background-image: linear-gradient(90deg, limegreen, orange);
	background-size: 0% 3px;
	background-repeat: no-repeat;
	background-position: left 1.5em;
	padding-block: .25em;

	transition: background-size 500ms;
}
.gradient-styles:hover,
.gradient-styles:focus {
	background-size: 100% 3px;
}

.imgbg-text {
	font-size: 5rem;
	font-weight: 900;
	
	background-image: url(https://cdn.biexcellence.com/openbi/img/header_img/funktionen_daten_datenmodellierung.jpg);
	background-size: cover;
	-webkit-background-clip: text;
	background-clip: text;
	color: rgb(0 0 0 / .2);
}

/* ---------------------
	Form Styles
--------------------- */
#forms input {
	accent-color: #1d6d1d;
}

#forms select {
	width: 100%;
	padding: 1em 1rem;
	background-color: #4d5061;
	color: #fff;
	border: none;
	appearance: none; /* eine Möglichkeit den button verschwinden zu lassen */
	-webkit-appearance:none;
}
#forms .custom-select {
	position: relative;
	width: 10rem;
}
#forms .custom-arrow {
	display: block;
	position: absolute;
	top: 0;
	right: 0;	
	background: red;
	height: 100%;
	width: 2rem;
	pointer-events: none;
}

#forms .bi-checkbox {
	--checkbox_fontsize: 1rem;
	--checkbox_lineheightFactor: 1.2;
	--checkbox_spacer: 0.5rem;
	--checkbox_lineheight: calc(var(--checkbox_fontsize) * var(--checkbox_lineheightFactor));
	--checkbox_size: calc(var(--checkbox_lineheight) - var(--checkbox_borderWidth) * 2);
   	--checkbox_bgColor: transparent;
	--checkbox_accentColor: green;
	--checkbox_checkColor: #fff;
	--checkbox_borderWidth: 1px;
	--checkbox_borderRadius: 0.25rem;
	
	display: grid;
   	grid-template-columns: calc(var(--checkbox_size) + var(--checkbox_spacer)) 1fr;
   	align-items: start;
	font-size: var(--checkbox_fontsize);
	line-height: var(--checkbox_lineheight);
}
#forms .bi-checkbox-container {
	display: inline-block;
	position: relative;
	width: calc(var(--checkbox_lineheight) - var(--checkbox_borderWidth) * 2);
	height: calc(var(--checkbox_lineheight) - var(--checkbox_borderWidth) * 2);
	font-size: var(--checkbox_fontsize);
}
#forms .bi-checkbox-container > input {
	display: block;
	position: absolute;
	top: 0;
    right: 0;	
	width: 100%;
	height: 100%;
	opacity: 0;
}
#forms .bi-checkbox-container > span {
	display: block;
	position: absolute;
	top: 0;
    right: 0;
    bottom: 0;
    left: 0;	
	width: calc(var(--checkbox_lineheight) - var(--checkbox_borderWidth)* 2);
	border: var(--checkbox_borderWidth) solid var(--checkbox_accentColor);
	border-radius: var(--checkbox_borderRadius);
	background-color: var(--checkbox_bgColor);
	pointer-events: none;
}
#forms .bi-checkbox-container > span::after {
	content: '\2714';
	display: flex;
    align-items: center;
    justify-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: calc(var(--checkbox_fontsize) * 0.8);
	background-color: var(--checkbox_accentColor);
	color: var(--checkbox_checkColor);
	opacity: 0;
	transition: all 0.3s ease-in;
}
#forms .bi-checkbox-container input:checked ~ span::after {
	width: 100%;
	height: 100%;
	opacity: 1;
}
#forms .bi-checkbox > label,
#forms .bi-checkbox-container > span,
#forms .bi-checkbox-container > input {
	cursor: pointer;
}
#forms label ~ .bi-checkbox-container,
#forms .bi-checkbox-container ~ label {
	margin-left: var(--checkbox_spacer);
}

/* ---------------------
	Section Shapes
--------------------- */
.shapes {
	padding-block: 5rem;
	margin-bottom: 5rem;
	
	/* --background: linear-gradient(45deg, var(--clr_bg_item), #fff, var(--clr_border)); */
	--background: var(--clr_bg_item);
}

.shape-wrapper {
	width: 80%;
	margin-inline: auto;
	display: flex;
}
.shape-column {
	border-left: 1px solid var(--clr_text);
	padding-inline: 2rem;
}
.shape-column:first-child {
	border-left: none;
}


.diagonal {
	--skew_angle: -2deg;
	
	position: relative;
	isolation: isolate;
}
.diagonal::after {
	content: '';
	background: var(--background);
	position: absolute;
	z-index: -1;
	inset: 0;
	transform: skewY(var(--skew_angle));	
}


.spikes { /* https://yqnn.github.io/svg-path-editor/ */	
	--clr_spike: var(--clr_bg_main);
	--spike_width: 50px;
	--spike_height: 10px;
	
	position: relative;
	background: var(--background);
}
.spikes::before,
.spikes::after {
	content: '';
	position: absolute;
	width: 100%;
	height: var(--spike_height);
	-webkit-mask-image: url('../img/triangle.svg');
	-webkit-mask-size: var(--spike_width) var(--spike_height);
	mask-image: url('../img/triangle.svg');
	mask-size: var(--spike_width) var(--spike_height);
	background-color: var(--clr_spike);
}
.spikes::before{
	top: 0;
}
.spikes::after {
	bottom: 0;
	transform: rotate(.5turn);	
}


.waves { /* https://css-generators.com/wavy-shapes/ */	
	--mask:
		radial-gradient(43.01px at 50% 60.00px,#000 99%,#0000 101%) calc(50% - 50px) 0/100px 51% repeat-x,
		radial-gradient(43.01px at 50% -35px,#0000 99%,#000 101%) 50% 25px/100px calc(51% - 25px) repeat-x,
		radial-gradient(43.01px at 50% calc(100% - 60.00px),#000 99%,#0000 101%) calc(50% - 50px) 100%/100px 51% repeat-x,
		radial-gradient(43.01px at 50% calc(100% + 35.00px),#0000 99%,#000 101%) 50% calc(100% - 25px)/100px calc(51% - 25px) repeat-x;
	
	-webkit-mask: var(--mask);
    mask: var(--mask);
	
	background: var(--background);
}

/* ---------------------
	Button Styles
--------------------- */

.button {
	--btn_border_radius: 1rem;
	--btn_invisible_offset: 25px;
	
	--glow_blur_color: #fff;
	--glow_blur_size: 5px;
	--glow_line_color: #fff;
	--glow_line_thickness: 2px;
	--glow_line_lenght: 20px;
	
	--animation_lenght: 1200ms;
	
	cursor: pointer;
	font-size: 1.5rem;
	font-family: inherit;
	font-weight: 600;
	color: var(--clr_text);
	background-color: var(--clr_bg_item);
	padding: .75rem 1.25rem;
	border: 0;
	border-radius: var(--btn_border_radius);
	margin-bottom: 1rem;
}

.glow-effect {
	position: relative;	
}
.glow-container {
	pointer-events: none; /* verhindert klick auf offset */
	position: absolute;
	max-width: initial; /* mw 100% aus dem reset muss hier überschrieben werden */
	inset: calc(var(--btn_invisible_offset) / -2); /* alternative Schreibweise: calc((xy / 2) * -1) */
	width: calc(100% + var(--btn_invisible_offset));
	height: calc(100% + var(--btn_invisible_offset));
	opacity: 0;
}
.glow-blur,
.glow-line {
	width: calc(100% - var(--btn_invisible_offset));
	height: calc(100% - var(--btn_invisible_offset));
	x: calc(var(--btn_invisible_offset) / 2);
	y: calc(var(--btn_invisible_offset) / 2);
	rx: var(--btn_border_radius); /* außer in Safari in jedem Browser unterstützt - für Safari muss rx in <rect> im Markup notiert werden - keine Variable möglich */
	fill: transparent;
	stroke: #000;
	stroke-width: 5px;
	stroke-dasharray: var(--glow_line_lenght) calc(50px - var(--glow_line_lenght));	
}
.glow-blur {
	filter: blur(var(--glow_blur_size));
	stroke: var(--glow_blur_color);
	stroke-width: var(--glow_blur_size);
}
.glow-line {
	stroke: var(--glow_line_color);
	stroke-width: var(--glow_line_thickness);
}

.glow-effect:hover .glow-blur, /* alt: ".glow-effect:is(:hover, :focus) :is(.glow-blur, glow-line)" */
.glow-effect:hover .glow-line {
	stroke-dashoffset: -80px;
	transition: stroke-dashoffset var(--animation_lenght) ease-in;
}
.glow-effect:is(:hover, :focus) .glow-container {
	animation: glow-visibility var(--animation_lenght);
}

@keyframes glow-visibility {
	0% { opacity: 0 }
	25% { opacity: 1 }
	75% { opacity: 1 }
	100% { opacity: 0 }
}

.glow-effect[data-glow-animation="false"] { /* data-glow-animation ist ein fiktiver tag - name/value sind egal */
	--glow_line_lenght: 0px;
}

.btn-cut-corners {
	--background-color: var(--clr_bg_item);
	--border-color: linear-gradient(to bottom right, red, blue);
	--border-width: 0.25em; /* em damit sich alles im button an die font-size anpasst */
	--edge-size: 0.5em;
	
	font-size: clamp(0.75rem, 0.25rem + 5vw, 1.5rem);
	
	display: inline-grid;
	position: relative;
	isolation: isolate; /* erstellt eine art z-ebene und alle child z-indexe beziehen sich nur darauf (nicht global) */
	padding: 0.5em 1.5em;
	border: 0;
	background: var(--background-color);
	clip-path: 
		polygon(
			/* top left 1 */
			0% var(--edge-size),
			/* top left 2 */
			var(--edge-size) 0%, 
			/* top right */
			100% 0, 
			/* bottom right 1 */
			100% calc(100% - var(--edge-size)), 
			/* bottom right 2 */
			calc(100% - var(--edge-size)) 100%, 
			/* bottom left */
			0 100%			
		); /* https://bennettfeely.com/clippy/ */
	
	transition: color 250ms;
}
.btn-cut-corners::before,
.btn-cut-corners::after {
	content: '';
	position: absolute;
	inset: 0;
}
.btn-cut-corners::before {
	background: var(--border-color);
	z-index: -2;
}
.btn-cut-corners::after {
	background: var(--background-color);
	z-index: -1;
	
	clip-path:  /* erstellt einen fake border */
		polygon(
			/* top left 1 */
			var(--border-width) 
			calc(var(--edge-size) + (var(--border-width) * 0.5)),
			/* top left 2 */
			calc(var(--edge-size) + (var(--border-width) * 0.5)) 
			var(--border-width), 
			/* top right */
			calc(100% - var(--border-width)) 
			var(--border-width), 
			/* bottom right 1 */
			calc(100% - var(--border-width)) 
			calc(100% - calc(var(--edge-size) + (var(--border-width) * 0.5))), 
			/* bottom right 2 */
			calc(100% - calc(var(--edge-size) + (var(--border-width) * 0.5))) 
			calc(100% - var(--border-width)), 
			/* bottom left */
			var(--border-width)
			calc(100% - var(--border-width))			
		);
		
	transition: clip-path 500ms;
}
.btn-cut-corners:where(:hover, :focus) {
	color: #fff;
}
.btn-cut-corners:where(:hover, :focus)::after {
	clip-path:
		polygon(
			/* top left 1 */
			calc(100% - var(--border-width)) 
			calc(100% - calc(var(--edge-size) + (var(--border-width) * 0.5))),
			/* top left 2 */
			calc(100% - var(--border-width))
			var(--border-width), 
			/* top right */
			calc(100% - var(--border-width)) 
			var(--border-width), 
			/* bottom right 1 */
			calc(100% - var(--border-width)) 
			calc(100% - calc(var(--edge-size) + (var(--border-width) * 0.5))), 
			/* bottom right 2 */
			calc(100% - calc(var(--edge-size) + (var(--border-width) * 0.5))) 
			calc(100% - var(--border-width)), 
			/* bottom left */
			calc(100% - calc(var(--edge-size) + (var(--border-width) * 0.5))) 
			calc(100% - var(--border-width))		
		);
}

/* ---------------------
	Responsive Tables
--------------------- */

table {
	border-collapse: collapse;	
	background-color: var(--clr_bg_item);
	border-radius: var(--border_radius);
	width: 100%;
}
caption, th, td {
	padding: 1rem;
}
caption, th {
	text-align: left;
}
th {
	background-color: hsl(211, 100%, 70%);
	color: #fff;	
}
tr > th:first-child {
	border-top-left-radius: var(--border_radius);
}
tr > th:last-child {
	border-top-right-radius: var(--border_radius);
}
tr:nth-of-type(2n) {
	background-color: hsl(211, 100%, 91%);
}

@media (max-width: 650px) {
	th {
		display: none;
	}
	td {
		display: grid;
		grid-template-columns: 20ch auto; /* 20ch = 20 Characters (20 Zeichen) */
		gap: 0.5rem;
		padding: 0.5rem 1rem;
	}
	td::before {
		content: attr(data-cell) ": ";
		font-weight: semi-bold;
		text-transform: capitalize;
	}
	/* wenn data-cell nicht möglich:
	td:nth-of-type(1)::before {
		content: "name: ";
	}
	td:nth-of-type(2)::before {
		content: "poles: ";
	}
	td:nth-of-type(3)::before {
		content: "podiums: ";
	}
	td:nth-of-type(3)::before {
		content: "wins: ";
	}
	usw... */
}

#patterns .description {
	width: auto;
	height: 20rem;
}
.pattern-one {
	background-image:  /* Wichtig! Der erste gradient ist immer die oberste Ebene im Browser und der letzte gradient ist immer die unterste Ebene (Hierarchie) */
	linear-gradient(
		transparent 50%,
		hsl(321, 53%, 75%, .5) 50%
	),
	linear-gradient(
		90deg,
		hsl(226, 39%, 32%) 50%,
		hsl(226, 39%, 10%) 50%
	);
	background-size: 3rem 3rem;
}
.pattern-two {
	background-color: #4D6A8A;
	background-image: 
		linear-gradient(
			-45deg,
			transparent 75%,
			hsl(0, 39%, 70%) 75%
		),
		linear-gradient(
			45deg,
			transparent 75%,
			hsl(0, 39%, 70%) 75%
		),
		linear-gradient(
			-135deg,
			transparent 75%,
			hsl(0, 39%, 70%) 75%
		),
		linear-gradient(
			135deg,
			transparent 75%,
			hsl(0, 39%, 70%) 75%
		)
	;
	background-size: 4rem 4rem;
}
.pattern-three {
	background-color: rgb(77, 106, 138);
	background-image: 
		linear-gradient(
			-45deg,
			transparent 75%,
			hsl(0, 39%, 70%) 75%
		),
		linear-gradient(
			45deg,
			transparent 75%,
			hsl(0, 39%, 70%) 75%
		),
		linear-gradient(
			-135deg,
			transparent 75%,
			hsl(0, 39%, 70%) 75%
		),
		linear-gradient(
			135deg,
			transparent 75%,
			hsl(0, 39%, 70%) 75%
		)
	;
	background-size: 4rem 4rem; /* für ZigZag Muster muss der Wert der BG-Position die Hälft der BG-Size haben */
	background-position: 2rem 0, 2rem 0, 0 0, 0 0; /* a, b, c, d - bezieht sich auf die gradients; 2rem bei b verändern und die Formen verändern sich */
	/* a1 = x-Achse; a2 = y-Achse */
}
.pattern-four {
	background-color: #fff;
	background-image: 
		linear-gradient(
			teal 0.3rem,
			transparent 0.3rem
		),
		linear-gradient(
			90deg,
			teal 0.3rem,
			transparent 0.3rem
		)
	;
	background-size: 3rem 3rem;
}
.pattern-five {
	background-color: #212223;
	background-image: 
		radial-gradient(
			circle,
			transparent 1rem,
			#212223 1rem /* gleich BG Color */
		),
		linear-gradient(
			teal 0.5rem,
			transparent 0.5rem
		),
		linear-gradient(
			90deg,
			teal 0.5rem,
			transparent 0.5rem
		)
	;
	background-size: 5rem 5rem;
	background-position: 2.75rem 2.75rem, 0 0, 0 0; /* a, b, c - bezieht sich auf die gradients; 2.75rem bei a ergibt sich aus: BG-Size/2 + linear-transparent/2  */
}
.pattern-six {
	background-color: #212223;
	background-image: 
		radial-gradient(
			circle,
			transparent 0.5rem,
			teal 0.5rem
		),
		linear-gradient(
			teal 0.5rem,
			transparent 0.5rem
		),
		linear-gradient(
			90deg,
			teal 0.5rem,
			transparent 0.5rem
		)
	;
	background-size: 5rem 5rem;
	background-position: 2.75rem 2.75rem, 0 0, 0 0;
}
.pattern-seven {
	background-color: #212223;
	background-image: radial-gradient(
		circle,
		transparent 1rem,
		#a1b1c1 1rem,
		#a1b1c1 3rem,
		steelblue 3rem,
		steelblue 5rem,
		transparent 5rem
	);
	background-size: 3rem 3rem; /* BG-Size verändert die Formen */
}
.pattern-eight {
	background-color: #212223;
	background-image: radial-gradient(
		circle,
		transparent 1rem,
		#a1b1c1 1rem,
		#a1b1c1 3rem,
		steelblue 3rem,
		steelblue 5rem,
		transparent 5rem
	);
	background-size: 15rem 15rem; /* BG-Size verändert die Formen */
}
.pattern-nine {
	background-color: #212223;
	background-image: 
	radial-gradient(
		circle at 100% 50%,
		transparent 1rem,
		#a1b1c1 1rem,
		#a1b1c1 1.5rem,
		transparent 1.5rem
	),
	radial-gradient(
		circle at 0% 50%,
		transparent 1rem,
		#a1b1c1 1rem,
		#a1b1c1 1.5rem,
		transparent 1.5rem
	);
	background-size: 5rem 5rem;
	background-position: 0 0, 0 2.5rem;
}
.pattern-ten {
	background-color: #313466;
	background-image: 
		conic-gradient(
			from 330deg at 50% 60%,
			#11ffbb 60deg,
			transparent 60deg
		),
		conic-gradient(
			from 150deg at 50% 30%,
			#5255bb 60deg,
			transparent 60deg
		)
	;
	background-size: 3rem 3rem;
	background-position: 0 0, 1.5rem -0.5rem;
}
.pattern-eleven {
	background-color: #313466;
	background-image: 
		conic-gradient(
			from 330deg at 50% 70%,
			#11ffbb 60deg,
			transparent 60deg
		),
		conic-gradient(
			from 150deg at 50% 30%,
			#5255bb 60deg,
			transparent 60deg
		)
	;
	background-size: 3rem 3rem;
}

/* ---------------------
	Burger Menus
--------------------- */

.burger-menu {
	--burger_menu_width: 2.5rem;
	--burger_menu_color: teal;
	--burger_menu_borderWith: 0.125rem;
	--burger_menu_borderColor: var(--burger_menu_color);
	--burger_menu_borderRadius: 0.25rem;
	--burger_menu_lines_width: 75%; /* percent from menu-width */
	--burger_menu_lines_height: 8%; /* percent from menu-height */
	--burger_menu_lines_spacerMultiplier: 1.5; /* line-spacer = x-factor of line-height */
	--burger_menu_transitionTime: 150ms;

	--burger_menu_lines_radius: calc(var(--burger_menu_lines_height) / 2);
	--burger_menu_lines_spacer: calc(var(--burger_menu_lines_height) * var(--burger_menu_lines_spacerMultiplier));
	--burger_menu_lines_posLeft: calc((100% - var(--burger_menu_lines_width)) / 2);
	--burger_menu_lines_posTop: calc((100% - ((var(--burger_menu_lines_height) * 3) + (var(--burger_menu_lines_spacer) * 2))) / 2);
	--burger_menu_lines_posMiddle: calc(var(--burger_menu_lines_posTop) + var(--burger_menu_lines_height) + var(--burger_menu_lines_spacer));
	--burger_menu_lines_posBottom: calc(var(--burger_menu_lines_posMiddle)  + var(--burger_menu_lines_height) + var(--burger_menu_lines_spacer));
	
	background: transparent;
	border: var(--burger_menu_borderWith) solid var(--burger_menu_color, lime);
	border-radius: var(--burger_menu_borderRadius);
	cursor: pointer;
}
.burger-menu svg {
	width: var(--burger_menu_width);
	fill: var(--burger_menu_color, lime);
}
.burger-menu rect {
	width: var(--burger_menu_lines_width);
	height: var(--burger_menu_lines_height);
	rx: var(--burger_menu_lines_radius);
	x: var(--burger_menu_lines_posLeft);
}
.burger-menu rect.top-line {
	y: var(--burger_menu_lines_posTop);
}
.burger-menu rect.middle-line {
	y: var(--burger_menu_lines_posMiddle);
}
.burger-menu rect.bottom-line {
	y: var(--burger_menu_lines_posBottom);
}
.button-one rect {
	transition: y var(--burger_menu_transitionTime) ease-in var(--burger_menu_transitionTime), rotate var(--burger_menu_transitionTime) ease-in, opacity 0ms var(--burger_menu_transitionTime);
	transform-origin: center;
}
.button-one[aria-expanded="true"] rect {
	transition: y var(--burger_menu_transitionTime) ease-in, rotate var(--burger_menu_transitionTime) ease-in var(--burger_menu_transitionTime), opacity 0ms var(--burger_menu_transitionTime);
}
.button-one[aria-expanded="true"] {
	--burger_menu_color: teal;
}
.button-one[aria-expanded="true"] :is(rect.top-line, rect.bottom-line) {
	y: var(--burger_menu_lines_posMiddle);
}
.button-one[aria-expanded="true"] rect.top-line {
	rotate: 45deg;
}
.button-one[aria-expanded="true"] rect.middle-line {
	opacity: 0;
}
.button-one[aria-expanded="true"] rect.bottom-line {
	rotate: -45deg;
}
.menu-content.is-closed {
	display: none;
}
.menu-content.is-opened {
	display: block;
}

/* ---------------------
	Misc Tricks
--------------------- */

#misc .count h3 {
	font-size: var(--fs_400);
    line-height: var(--lh_400);
    font-weight: var(--fw_400);
	text-align: left;
	margin-bottom: 0;
}
#misc .count section {
	counter-reset: myName;
}
#misc .count section h3 {
	counter-increment: myName;
}
#misc .count section h3::before {
	content: counter(myName) ': Section';
}

.hr-styles {
	--size: 1rem;
	
	border: 0;
	border-radius: 100vh;
	height: var(--size);
	background: lime;
	box-shadow: 
	0 calc(var(--size) * 2) 0 red,
	0 calc(var(--size) * 4) 0 blue,
	0 calc(var(--size) * 6) 0 green
	;
}