/* html elements */

html {
	background-color: color(display-p3 1 1 1);
	color: #000000;
	font-size: clamp(0.5rem, 1vw, 1rem);
}

p {
	font-family: 'Whyte';
	font-size: 2.5rem;
	margin-left: 4vw;
	margin-right: 20vw;
	margin-top: 0;
	font-variation-settings:
	'wght' 400,
	"INKT" 1;	

}

a {
	font-size: 2.5rem;

}

i {
	font-family: 'Whyte';
	font-variation-settings:
	"slnt" -12;
	font-style: normal;
}

a {
	color: color(display-p3 0.863 0.286 0.227);
	font-family: 'Whyte';
	font-variation-settings:
	"MONO" 0.89;
	text-decoration: none;
	cursor: grab;
}

h1 {
	margin-right: 5vw;
	margin-left: 5vw;
	font-family: 'Gravity';
	font-weight: bold;
	font-size: 4.4vw;
	text-align: center;
}

/* General classes */

.temp-hold {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.padding {
	height: 15rem;
	width: 100vw;
}

.small-padding {
	height: 5rem;
	/* width: 100vw; */
}

.small {
	font-size: 2rem;
}

.comment {
	color: #85776a;
	text-align: right;
	margin-left: 40vw;
	margin-right: 4vw;
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.fullscreen {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	text-align: left;
	justify-content: center;

}

.fake-art {
	color: #a49685;
}

.collection {
	display: flex;
	flex-direction: row;
	gap: 1vw;
	justify-content: center;
	align-items: center;
	margin-left: 2vw;
	margin-right: 2vw;
}

.big-image {
	width: 92vw;
	margin: 4vw;
	border-radius: 12px;
	image-rendering: pixelated;
}

.image {
	width: 23vw;
	height: 30vw;
	background-color: #a49685;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	text-align: left;
	font-family: 'Gravity', sans-serif;
	/* overflow-x: hidden; */
}

.image h1 {
	margin: 0;
	font-family: 'Gravity', sans-serif;
	font-variation-settings:
	'wdth' 53;
	font-size: 10vw;
	transform: translateY(27.7%);

}

.spaced {
	
	margin-top: 6rem;
	margin-bottom: 6rem;
	
}

.quote {
	text-align: right;
	margin-left: 40vw;
	margin-right: 4vw;
	font-family: "Whyte";
	font-variation-settings:
	"MONO" 0.89;
	/* font-size: 1.5rem; */
	color: #70A0AF;
	text-align: justify;
	
}

.caption {
	text-align: right;
	margin-left: 0;
	margin-right: 0;
	font-size: 1rem;
}

.poem {
	text-align: center;
	margin-left: 30vw;
	margin-right: 30vw;
}

.bg-1 {
	background-color: color(display-p3 0.802 0.791 0.674);
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.spread {
	font-family: "Gravity", sans-serif;
	font-variation-settings: 
	'wght' 150;
	margin-right: 4vw;
	text-align: justify;
	text-align-last: justify;
}

.object-split {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	width: 92vw;
	height: fit-content;
	gap: 4rem;
	margin-left: 0;
	margin-right: 0;
	margin-top: 10vw;
	margin-bottom: 10vw;
	padding: 4vw;
}

.split-text {
	width: 48vw;
}

.split-text p {
	margin: 0;
	text-align: justify;
	text-align-last: left;
	margin-bottom: 1rem;
}

.split-image {
	width: 45vw;
	border-radius: 12px;
	height: auto;
	object-fit: contain;
	image-rendering: pixelated;
}

.side-note {
	font-size: 1.2rem;
}

/* Specific IDs */

#toc-title {
	font-family: "Gravity", sans-serif;
	font-variation-settings:
	'wdth' 60;
	font-size: 10rem;
}

#toc-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

#main {
	width: 100vw;
}

#intro-div {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	position: relative;
	height: 100vh;
	background-color: #FFFFFF;
	/* background-image: url("./images/bw-skull.png");
	background-position: right center;
	background-size: cover; */
	
}

#auto-intentionalist-artistry {
	color: #DC493A;
	align-self: end;
	line-height: 0.8;
	width: 95vw;
	transform: translateY(7.25%);
	font-weight: 100;
	
}

#auto-intentionalist {
	font-family: 'Gravity', sans-serif;
	font-size: 10rem;
	font-variation-settings:
		'wdth' 55;
	margin: 0;
	width: fit-content;
	transform: translateX(0.5rem);
	text-align: left;
}

#artistry {
	font-family: 'Gravity', sans-serif;
	font-size: 10rem;
	font-variation-settings:
	'wdth' 150;
	margin: 0;
	text-align: left;
}

#gordon-ramsay {
	color: #DC493A;
	
}

#wallofshame {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
}

#the-wall-of {
	font-family: 'Gravity', sans-serif;
	font-size: 15rem;
	font-variation-settings:
		'wdth' 100;
	margin: 0;
	width: fit-content;
}

#shame {
	font-family: 'Gravity', sans-serif;
	font-size: 15rem;
	font-variation-settings:
	'wdth' 150;
	margin: 0;
}