* {
	box-sizing: border-box;
}

body {
	font-family: 'Courier New', Courier, monospace;
	line-height: 1.25;
}

kbd {
	background: rgb(30, 30, 30);
	border-radius: 2px;
	color: white;
	font-weight: bold;
	padding-inline: 1ch;
}


#index {
	--list-item-clr: hsl(130 60% 34%);
	p {
		max-width: 60ch;
	}

	h1 {
		color: red;
		border-left: red solid 4px;
		padding-left: 0.75ch;
		background: linear-gradient(270deg, transparent 50%, hsl(0 100% 70% / 0.5) );
	}

	body {
		background: linear-gradient(180deg, white, hsl(200 50% 60%) ) fixed;
	}

	dt {
		margin-top: 0.5rem;
		font-weight: bold;
		color: var(--list-item-clr);
		border-bottom: solid 4px;
		width: 30ch;
	}

	dd {
		background: color(from var(--list-item-clr) srgb r g b / 0.4);
		margin: 0;
		padding-left: 4ch;
		width: 30ch;
		padding-block: 0.5em;

		a {
			text-decoration: none;
			display: inline-block;
			color: hsl(from var(--list-item-clr) h s 5%)
		}

		a:hover {
			transform-origin: top;
			transform: translateX(0.5rem);
		}
	}
}

#times-timing {

	body {
		background: black;
		margin: 0;
		color: goldenrod;
	}
	h1 {
		text-align: right;
		padding-right: 1em;
		color: black;
		background: goldenrod;
		margin-top: 0;
	}

	.index-anchor {
		position: fixed;
		height: 2.5rem;
		background: goldenrod;
		padding-inline: 1rem 1.5rem;
		border-radius: 0 0 2rem 0;
		align-content: center;

		a {
			color: black;
			text-decoration: none;
		}
	}

	p {
		text-align: center;
	}

	.img-wrapper {
		padding-block: 10rem;
		background-image: linear-gradient(0deg, hsl(from goldenrod h s 30%), hsl(from goldenrod h s 18%), hsl(from goldenrod h s 3%), black 15%);
		border-bottom: 3rem solid hsl(from goldenrod h s 30%);
		text-align: center;

		img {
			width: 13rem;
		}
	}

	pre {
		margin-inline: auto;
		font-size: 1.1rem;
		background: black;
		color: goldenrod;
		border: solid;
		width: fit-content;
		border-radius: 100%;
		padding: 2rem 3rem;
	}

	pre details {
		display: inline;
		background: navy;
		white-space: pre;

		summary {
			display: inline;
			white-space: pre;
		}
	}
}

#she-walks {
	body {
		background-image: linear-gradient(100deg, hsl(265 70% 15%) 30%, goldenrod);
		background-attachment: fixed;
		background-size: 16px 100vh;
		animation: linear 1.5s slide infinite;
	}

	main {
		background: hsl(265 70% 15% / 0.3);
		padding: 1rem;
		color: white;
		width: fit-content;
		margin-inline: auto;
	}

	.index-anchor {
		text-align: center;
		a {
			color: goldenrod;
		}
	}
}

@keyframes slide {
	to {
		background-position-x: 16px;
	}
}

#never-push-through {
	font-size: 1.25rem;
	body {
		background-color: hsl(40 80% 70%);
		margin: 0;
	}
	.wrapper {
		min-height: 100vh;
		align-content: center;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.index-anchor {
		position: fixed;
		margin: auto;
		display: block;
		top: 0;
		left: 0;
		right: 0;
		text-align: center;
		padding-top: 4rem;
		a {
			text-decoration: none;
		}
	}

	h1 {
		color: hsl(0 100% 60%);
	}

	main {
		border: hsl(0 100% 60%) 4px solid;
		margin: auto;
		border-radius: 16px;
		padding: 1rem;
		max-width: fit-content;
		background-color: hsl(40 80% 70%);
		box-shadow: 8px 8px 0 hsl(30 60% 40%);
	}
}

#box-in-a {
	.index-anchor {
		background-image: linear-gradient(rgb(255 255 255 /0.7),rgb(255 255 255 /0.7)), linear-gradient(
			90deg,
			rgba(255, 0, 0, 1) 0%,
			rgba(255, 154, 0, 1) 10%,
			rgba(208, 222, 33, 1) 20%,
			rgba(79, 220, 74, 1) 30%,
			rgba(63, 218, 216, 1) 40%,
			rgba(47, 201, 226, 1) 50%,
			rgba(28, 127, 238, 1) 60%,
			rgba(95, 21, 242, 1) 70%,
			rgba(186, 12, 248, 1) 80%,
			rgba(251, 7, 217, 1) 90%,
			rgba(255, 0, 0, 1) 100%
		);
		height: 2rem;
		align-content: center;
		text-align: center;
		margin: 1rem;
		margin-bottom: 0;
		border-radius: 1rem;

		a {
			color: black;
			font-weight: bold;
			text-decoration: none;
		}
	}

	.wrapper {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 1rem;
	}

	body {
		margin: 0;
		background: #BFC6C4;
	}

	main, .fake-main {

		background-image: linear-gradient(rgb(255 255 255 /0.7),rgb(255 255 255 /0.7)), linear-gradient(
			180deg,
			rgba(255, 0, 0, 1) 0%,
			rgba(255, 154, 0, 1) 10%,
			rgba(208, 222, 33, 1) 20%,
			rgba(79, 220, 74, 1) 30%,
			rgba(63, 218, 216, 1) 40%,
			rgba(47, 201, 226, 1) 50%,
			rgba(28, 127, 238, 1) 60%,
			rgba(95, 21, 242, 1) 70%,
			rgba(186, 12, 248, 1) 80%,
			rgba(251, 7, 217, 1) 90%,
			rgba(255, 0, 0, 1) 100%
		);
		width: 65ch;
		border-radius: 1em;
		min-height: 67rem;
		padding: 1rem;
	}
}

#vapid {
	body {
		margin: 0;
		background: hsl(40 0% 20%);
	}

	.index-anchor {
		border-bottom: 1px solid grey;
		background: hsl(40 0% 20%);
		height: 2.5rem;
		align-content: center;
		padding-inline: 1rem;

		a {
			background: cornflowerblue;
			height: 1.5rem;
			padding-inline: 1rem;
			text-decoration: none;
			color: white;
			border-radius: 2rem;
			display: inline-flex;
			align-items: center;
		}
	}

	main {
		padding: 1rem;
		color: white;
	}
	
	.advert {
		position: fixed;
		top: 3.5rem;
		bottom: 1rem;
		right: 1rem;
		width: 30ch;
		background: lightgray;
		padding: 0.5rem;
		cursor: pointer;

		div {
			position: absolute;
			top: 0;
			right: 0.25ch;
		}

		p {
			font-size: 1.75rem;
		}
	}
}

#to-commune {
	--pinko: hsl(330 70% 70%);

	* {
		box-sizing: border-box;
		margin: 0;
	}
	
	body {
		--s: 100px; /* control the size*/
		--c1: #000000;
		--c2: var(--pinko);
		--c3: var(--c2);

		--_g: 50%,#0000 37%,var(--c1) 39% 70%,#0000 72%;
		--_t: 50%,var(--c2) 40deg,var(--c3) 0 140deg,var(--c2) 0 180deg,#0000 0; 
		--_s: 47% 50% at;
		background: 
			radial-gradient(var(--_s) -10% var(--_g)) 0 calc(var(--s)/2),
			radial-gradient(var(--_s) -10% var(--_g)) calc(var(--s)/2) 0,
			radial-gradient(var(--_s) 110% var(--_g)),
			radial-gradient(var(--_s) 110% var(--_g)) calc(var(--s)/2) calc(var(--s)/2),
			conic-gradient(from   0deg at 55% var(--_t)) calc(var(--s)/4) 0,
			conic-gradient(from 180deg at 45% var(--_t)) calc(var(--s)/4) 0,
		var(--c2);
		background-size: var(--s) var(--s);
	}

	main {
		margin-top: 1rem;
		color: white;
		background-color: black;
		border: var(--pinko) solid 4px;
		width: fit-content;
		text-align: center;
		padding: 1rem;
		margin-inline: auto;

		.girlypop {
			object-fit: cover;
			width: 12rem;
		}
	}

	.index-anchor {
		background: black;
		width: fit-content;
		height: 2.5rem;
		align-content: center;
		color: var(--pinko);
		border: var(--pinko) solid 4px;
		margin: 1rem auto;
		padding-inline: 2rem;
		a {
			color: var(--pinko);
			text-decoration: none;
		}
	}
}

#arrfff-woof {
	body { 
		background-image: url("assets/paws.png");
		background-size: 128px;
	}

	.index-anchor {
		backdrop-filter: grayscale(1) brightness(0.4) sepia(1) hue-rotate(-30deg);
		box-shadow: inset 0 0 10px black;
		width: fit-content;
		padding: 1rem;
		display: grid;
		justify-items: center;
		a {
			display: block;
			min-width: 20ch;
			text-align: center;
			color: white;
			font-weight: bold;
			text-decoration: none;

			&:hover {
				color: cyan;
			}
		}
	}

	main {
		backdrop-filter: grayscale(1) brightness(0.4) sepia(1) hue-rotate(-30deg);
		margin-left: auto;
		padding: 1rem;
		width: fit-content;
		color: white;
		box-shadow: inset 0 0 10px black;
	}
}