:root {
	--stripes: url(stripes.svg);
	--stars: url(stars.svg);
	--background: hsla(0, 0%, 100%, 50%);
	--blur: blur(1em);
	--border: 3px solid hsla(0, 0%, 0%, 50%);
	--smooth-time: 200ms;
	--baseblue: #bee6ff;
	--stripeblue: #4084e2;
	--baseorange: #fbdbb6;
	--stripeorange: #f1945e;
	--yellow: #fefeae;
}

body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: "Short Stack", cursive;
	font-weight: 400;
	font-style: normal;
}

img {
	width: 100%;
}

h1, h2, p {
	margin-top: 0;
}

h1 {
	font-size: clamp(1em, 2em, 6vw);
}

h2 {
	font-size: clamp(1em, 1.5em, 4vw);
}

.button:hover:nth-child(odd),
.button:visited:hover:nth-child(odd) {
	background: var(--stripeorange);
	color: white !important;
	transition-duration: var(--smooth-time);
}

.button:hover:nth-child(even),
.button:visited:hover:nth-child(even) {
	background: var(--stripeblue);
	color: white !important;
	transition-duration: var(--smooth-time);
}

.button,
.button:visited {
	background: var(--yellow);
	border: var(--border);
	border-radius: 0.5em !important;
	padding: 0.5em;
	margin: 0 0.2em 1em 0.2em;
	display: inline-block;
	color: black !important;
	transition-duration: var(--smooth-time);
}

a:visited {
	color: var(--stripeorange);
	transition-duration: var(--smooth-time);
}

a:visited:hover {
	color: var(--baseorange);
	background: hsla(0, 0%, 0%, 50%);
	border-radius: 0.4em;
	transition-duration: var(--smooth-time);
}

a:hover {
	color: var(--baseblue);
	background: hsla(0, 0%, 0%, 50%);
	border-radius: 0.4em;
	transition-duration: var(--smooth-time);
}

a {
	text-decoration: none;
	color: var(--stripeblue);
	padding: 0 0.2em 0 0.2em;
	transition-duration: var(--smooth-time);
}

.blue {
	background: var(--stripeblue);
	mask-image: var(--stars);
	mask-size: 45em;
}

.orange {
	background: var(--stripeorange);
}

.blue::after {
	content: "";
	background: var(--baseblue);
	mask-image: var(--stripes);
	mask-size: 20em;
}

.orange::after {
	content: "";
	background: var(--baseorange);
	mask-image: var(--stripes);
	mask-size: 20em;
}

.stripes, .stripes::after {
	position: fixed;
	width: 100%;
	height: 100%;
}

#leftstitch {
	grid-column: 1 / 1;
	margin: 0 -1.5em 0 -0.5em;
	background-position-y: 4em;
}

#rightstitch {
	grid-column: 3 / 3;
	margin: 0 -0.5em 0 -1.5em;
	background-position-y: 18em;
}

#topstitch {
	grid-row: 1 / 1;
	margin: -0.5em 0 -1.5em 0;
	background-position-x: 0em;
}

#bottomstitch {
	grid-row: 3 / 3;
	margin: -1.5em 0 -0.5em 0;
	background-position-x: 4em;
}

.stitching_vertical {
	grid-row: 2 / 2;
	padding: 2em 0 2em 0;
	background: url(stitching_vertical.svg);
	background-size: 2em auto;
	background-clip: content-box;
	z-index: 2;
	opacity: 0.5;
}

.stitching_horizontal {
	background: url(stitching_horizontal.svg);
	background-size: auto 2em;
	background-clip: content-box;
	padding: 0 2em 0 2em;
	grid-column: 2 / 2;
	z-index: 2;
	opacity: 0.5;
}

#center {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100vw;
	height: 100vh;
	position: absolute;
}

#window {
	display: grid;
	grid-template-columns: 0 auto 0;
	grid-template-rows: 0 auto 0;
}

#content {
	grid-column: 2 / 2;
	grid-row: 2 / 2;
	background: var(--background);
	backdrop-filter: var(--blur);
	border: var(--border);
	border-radius: 1em;
	padding: 1em;
	margin: 0.5em;
	max-width: 40em;
	max-height: calc(100vh - 3em);
	overflow-y: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

#content::-webkit-scrollbar { 
	display: none;
}