* {
	margin:0px;
}

body {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: var(--white);
	text-align: left;
	font-family: "PT Serif", serif;
	font-weight: 400;
	font-style: normal;
	line-height: 140%;
}

nav {
	background-color: var(--neon-yellow);
	margin: 0px;
	position: sticky;
	top: 0px;
	text-align: center;
	z-index: 500;
}

p { 
	padding: 25px;
	font-family: var(--font-family-6); 
	max-width: 90vw;
	margin: auto;
}

section {
	background-color: var(--white);
	color: var(--black);
	padding-bottom: 2rem;
}

header {
    position: relative;
	height: 30rem;
	margin-top: 0px;
	background-color: var(--neon-yellow);
}

div {
	font-family: "Dela Gothic One", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 10px;
		text-align: left;
		padding: 5px;
		top: 0px;
		
}

.box {
	padding: 0px;
}

body > article > div, body > article > section:nth-child(6) > div > blockquote, body > article > section:nth-child(7) > div > p {
	position: static;
}

body > article > div > blockquote:nth-child(1), body > article > div > blockquote:nth-child(2), body > article > div > blockquote:nth-child(3) {
font-size: var(--size-1);
position: static;
}

/* footer section */
footer{
	background-color: var(--neon-yellow);
	color: var(--black);
	padding-left: 18px;
	padding-right: 18px;
	padding-bottom: 18px;
	padding-top: 10px;
	font-family: var(--font-family-1);
	text-transform: uppercase;
	border-top: solid 1px var(--black);
}
.footer-left {
	font-size: var(--size-0);
	text-align: left;
}

.footer-right {
	font-size: var(--size-0);
	float: right;
	padding-right: 0.5rem;
}
/* footer section */

.mainh1 {
    color: #000000;
    font-family: "Rubik Spray Paint", system-ui;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin: 0;
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
	text-shadow:
	  3px 3px 2px #D7FF00,
	  -3px 3px 2px #D7FF00,
	  -3px -3px 0 #D7FF00,
	  3px -3px 0 #D7FF00;

}

#ugly {
    font-family: "Imperial Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 14rem;
    transform: rotate(90deg);
    position: absolute;
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%) rotate(90deg); 
}

.external-link {
	padding-bottom: 64px;
}

h1 {
	text-align: center;
	font-size: var(--size-5);
	line-height: calc(90%);
	left: 50%; 
}

h3 {
	font-size: var(--size-3);
	font-family: var(--font-family-2);
	text-transform: uppercase;
	padding: 12px;
	border-top: solid 1px var(--black);
	position: sticky;
	top: 40px;
	background-color: var(--white);
	}
	

#criticism {
	color: transparent;
	text-shadow: 0 0 5px rgba(0,0,0,0.9);
	text-shadow: 2px 2px 5px black;
	font-family: var(--font-family-6);
	text-transform: uppercase;
	-moz-transform: scale(1, 3);
	 -ms-transform: scale(1, 3);
	  -o-transform: scale(1, 3);
		 transform: scale(1, 3);
	padding-top: 4rem;;
}

#equal {
	padding-top: 5rem;
	font-family: var(--font-family-5);
}

#love {
	font-family: var(--font-family-7);
	font-weight: 100;
	font-size: var(--size-6);
}

.author {
	padding-top: 6rem;
}

.blind {
	color: transparent;
	text-shadow: 0 0 5px rgba(0,0,0,0.9);
	text-shadow: 2px 2px 5px black;
}

	.introductionparagraph {
		padding-top: 0rem;
		padding-bottom: 2rem;
	}

.colophon {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.header-colophon {
	background-color: var(--black);
	color: var(--white);
	}

blockquote {
	font-family: var(--font-family-6);
		font-weight: 900;
		font-style: normal;
		text-align: center;
		font-size: var(--size-3);
		line-height: calc(100% + 8px);
		/* text-transform: uppercase; */
		padding: 10px;
		padding-top: 50px;
		padding-bottom: 50px;
		background-color: #D7FF00;
		color: black;
}

.box {
	display: flex;
		flex-direction: column;
}


a {
	font-family: "Rubik Spray Paint", system-ui;
	text-shadow:
	  3px 3px 2px #D7FF00,
	  -3px 3px 2px #D7FF00,
	  -3px -3px 0 #D7FF00,
	  3px -3px 0 #D7FF00;
	  color:#000000;
}

li:nth-child(2) {
    border-top: 5px solid black;}


	@media (min-width: 600px) {
		body > article > div > blockquote:nth-child(1), body > article > div > blockquote:nth-child(2), body > article > div > blockquote:nth-child(3) {
			font-size: var(--size-1);
			padding-left: 70px;
			padding-right: 70px;
			position: static;
			
			}
	}

	@media (min-width: 920px) {

		body {
		   align-content: center;
		   /* margin-left: 50%;
		   margin-right: 50%; */
	   }
   
	   p {
		   max-width: 70%;
		   text-align: left;
	   }
   
	   h3 {
		   padding-top: 20px;
		   padding-bottom: 20px;
		   text-align: left;
		   border-top: none;
		   border-right: 2px solid black;
		  
	   }
   
	   blockquote {
		   padding-left: 15%;
		   padding-right: 15%;
	   }

	   div {
		padding: 0px;
		border-top: 2px solid black;
		border-bottom: 2px solid black;
		position: static;
	   }

	   .box {
		/* margin-left: 50%; */
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 400px;
	   }

	   .box-three {
		width: 100vw;
		display: flex;
		flex-direction: row;
		height: fit-content;
	   }

	   body > article > div > blockquote:nth-child(1), body > article > div > blockquote:nth-child(2), body > article > div > blockquote:nth-child(3) {
		font-size: 18px;
		padding: 20px;
		padding-top: 50px;
		padding-bottom: 50px;
	   }

	   body > article > div > blockquote:nth-child(1), body > article > div > blockquote:nth-child(2) {
		border-right: 2px solid black;
	   }

	   body > article > section:nth-child(8) > div > blockquote, body > article > section:nth-child(6) > div > blockquote {
		padding-bottom: 0px;
		padding-top: 100px;
	   }

	   body > article > section:nth-child(5) > p {
		padding-top: 70px;
	   }

	   body > article > section:nth-child(7) > blockquote:nth-child(2) {
		border-bottom: 2px solid black;
	   }

	   body > article > section:nth-child(7) {
		padding-bottom: 0px;
	   }

	   body > article > section:nth-child(7) > blockquote:nth-child(5) {
		font-size: 50px;
	   }

	   h1 {
		font-size: calc(100% + 60px);
	   }

	  header {
		height: 30rem;
	  }

	  .author {
		font-size: calc(100% + 1px);
		padding-top: 70px;
	  }
	}