:root {
	--radius-l: 0.5em;
	--radius-m: 0.25em;
	--radius-s: 0.12em;
	--pageMargin: 2.0em;
	--itemMargin: 2.0em;
	--titleMargin: 0.5em;

	--fontColor: hsl(0, 0%, 20%);
	--fontColorB: rgb(69, 69, 69);

	--titleColor: #ec68c2;
	/* --fontColor: rgb(246, 246, 246); */
	--bgValue: 255;

}

body {
	background-color: rgb(var(--bgValue), var(--bgValue), var(--bgValue));
	margin: 0;
	padding: 0;
	font-size: 16px;
	/* Override Browser default, needed for rescale operations to be correct below 670px */
}

@font-face {
	font-family: "OpenSans";
	src: url("../fonts/OpenSans-Variable.ttf") format("truetype");
	font-weight: 1 1000;
	font-stretch: 50% 200%;
	font-style: normal;
}


p {
	font-family: "OpenSans";
	color: var(--fontColor);
	background-color: rgba(var(--bgValue), var(--bgValue), var(--bgValue), 0.7);
	padding: 0.0em;
	margin: 0em;
	line-height: normal;
	font-weight: 400;
	font-size: 1.5em;
}

h1 {
	font-family: "OpenSans";
	font-size: 10.0em;
	text-align: center;
	color: var(--fontColor);
	padding: 0.2em;
	margin: 0em;
	line-height: normal;
	font-weight: 700;
}

h2 {
	font-family: "OpenSans";
	font-size: 3.0em;
	text-align: center;
	color: var(--titleColor);
	padding: 0.3em;
	margin: 0em;
	line-height: normal;
	font-weight: 600;
}

h3 {
	font-family: "OpenSans";
	font-size: 1.75em;
	text-align: left;
	color: var(--fontColorB);
	padding: 0.0em;
	margin: 0em;
	line-height: normal;
	font-weight: 600;
}

.main-group {
	padding-left: var(--pageMargin);
	padding-right: var(--pageMargin);
}

.location-group {
	display: flex;
	/* background-color: rgba(var(--bgValue), var(--bgValue), var(--bgValue), 0.9); */
	margin-bottom: 4em;
	gap: 1em;
	border: 2px solid #d2d2d2;
	/* 1px wide, solid, black border */
	border-radius: 0.6em;
}

.location-group-text {
	padding: 1.5em;
	background-color: rgba(var(--bgValue), var(--bgValue), var(--bgValue), 0.7);
	border-radius: var(--radius-l);
}

.location-group-img {
	width: 20em;
	height: auto;
	object-fit: cover;
	border-top-right-radius: var(--radius-l);
	border-bottom-right-radius: var(--radius-l);
	border-bottom-left-radius: 0;
}

@media (max-width: 900px) {
	.location-group {
		flex-direction: column;
	}

	.location-group-img {
		width: 100%;

		border-top-right-radius: 0;
		border-bottom-right-radius: var(--radius-l);
		border-bottom-left-radius: var(--radius-l);
	}
}

.location-link {
	font-family: "OpenSans";
	color: rgb(85, 131, 223);
	background-color: rgba(var(--bgValue), var(--bgValue), var(--bgValue), 0.7);
	line-height: normal;
	font-weight: 500;
	font-size: 1.5em;
}


.sample-group {
	/* background-color: rgba(var(--bgValue), var(--bgValue), var(--bgValue), 0.9); */
	/* background-color: blue; */
	padding: 1em;
	margin: 1em;
	margin-left: var(--pageMargin);
	margin-right: var(--pageMargin);
}

.sample {
	text-align: center;
	/* Centers content horizontally */
	display: flex;
	flex-direction: column;
	/* Stacks items vertically */
	align-items: center;
	/* Aligns items in the center of the container */
	/* background-color: red; */
}

.sample img {
	max-width: 20em;
	height: auto;
	/* Maintains aspect ratio */
	margin-bottom: 1em;
	/* Optional: Adds space between the image and the text */
}

.sample-text {
	display: flex;
	gap: 0.5em;
	align-items: baseline;
}


.store-group {
	width: 23em;
	margin: 0 auto;
	background-color: rgba(var(--bgValue), var(--bgValue), var(--bgValue), 0.9);
}

.store {
	text-align: center;
	padding: 0.5em;
}

.store img {
	width: 20em;
	height: auto;
}

.policy-link {
	font-family: "OpenSans";
	color: rgb(85, 131, 223);
	background-color: rgba(var(--bgValue), var(--bgValue), var(--bgValue), 0.7);
	line-height: normal;
	font-weight: 500;
	font-size: 1.5em;
}

.master {
	max-width: 80em;
	min-width: 40em;
	margin-left: auto;
	margin-right: auto;
}

#dotCanvas {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: -1;
}





@keyframes titleBlur {

	0%,
	100% {
		filter: blur(0.2em);
	}

	50% {
		filter: blur(0.6em);
	}
}

.title {
	z-index: 1;
	/* Above canvas */
	width: 30em;
	margin: auto;
	padding-top: 2em;
	/*filter: blur(0.2em);
	animation: titleBlur 8s infinite;*/
}

.master {
	/* This is the main div, all content is inside this */
	max-width: 80em;
	/* Max Width of the main element em * font-size (16) = widht in px */
	min-width: 40em;
	/* this has no effect, as it scale before it reaches this? 640 vs 670 */
	margin-left: auto;
	margin-right: auto;
}

/* master scaler */
@media(max-width:670px) {

	html,
	body {
		font-size: 2.4vw;
	}


}