/* Variables */

:root {

	/* Sizes */

	--size-1: 16px;
	--size-2: 24px;
	--size-3: 32px;
	--size-4: 48px;
	--size-5: 64px;
	--size-6: 80px;
	--size-7: 96px;
	--size-8: 112px;
	--size-9: 144px;
	--size-10: 160px;

	/* Font */

	--font-family-1: "aktiv-grotesk", sans-serif;
	--font-family-3: "hwt-mardell", sans-serif; 
	--font-family-4: "mono45-headline", monospace;
	--font-family-5: "nitti-typewriter-cameo", sans-serif;
	--font-family-6: "nitti-typewriter-normal", sans-serif;
	--font-weight-regular: 400;
	--font-weight-bold: 700;


	/* Color */

	--dark-pink: #D86D79;
	--light-pink: #ED9BA4;
	--dark-orange: #D15116;
	--light-orange: #F2925C;
	--dark-blue: #5BA5DF;
	--light-blue: #9CCFF8;
	--light-green: #72BE60;
	--dark-green: #56A643;
	--light-cobalt: #5288EC;
	--dark-cobalt: #3166CA;
	--light-yellow: #FAC546;
	--dark-yellow: #EFA901;
	--light-red: #ED605C;
	--dark-red: #DB302A;
	--light-grey: #e3e3e3;
	--dark-grey: #ADADAC;
	--black: #262426;
	--white: #fafafa;

	/* Expired Colors */
	
}

	/* Font Settings */

h1{
	font-family: var(--font-family-3);
	font-weight: var(--font-weight-bold);
	color: var(--black);
	font-size: var(--size-5);
	text-transform: uppercase;
	text-align: center;
}

h2{
	font-family: var(--font-family-4);
	font-weight: var(--font-weight-regular);
	color: var(--black);
	font-size: var(--size-2);
	text-transform: uppercase;
	display: flex;
	background-color: var(--light-pink);
	padding: var(--size-1);
	border: 1px var(--black) solid;
	display: inline-block;
}


h3{
	font-family: var(--font-family-5);
	font-weight: var(--font-weight-bold);
	color: var(--black);
	font-size: calc(var(--size-1)*1.3);
	line-height: 2.2ch;
	text-wrap: pretty;
}

p{
	font-family: var(--font-family-1);
	color: var(--black);
	line-height: var(--size-2);
	text-wrap: pretty;
}

.p-highlight{
	font-weight: 600;
	font-style: italic;
}

blockquote{
	font-family: var(--font-family-6);
	font-size: calc(var(--size-1)*1.2);
	font-weight: 100;
	color: var(--black);
	line-height: var(--size-2);
	text-wrap: pretty;
}

.blockquote{
	font-family: var(--font-family-6);
	font-size: calc(var(--size-1)*1.5);
	font-weight: 100;
	color: var(--black);
	line-height: var(--size-2);
	text-wrap: pretty;
}

#quotation{
	display: flex;
	flex-direction: column; 
	justify-content: space-between; 
	gap: var(--size-1);
	min-width: 300px;
	max-width: 400px;
	align-self: end;
}

cite{
	font-family: var(--font-family-1);
	font-size: var(--size-1);
	font-weight: 400;
	color: var(--black);
	display: flex;
	justify-content: bottom;
}

#quote{
	font-family: "eb garamond" serif;
	font-size: var(--size-6);	
	font-weight: 200;
	text-align: center;
	line-height: var(--size-6);
}

/* Grid Settings */

body{
	font-size: calc(var(--size-1)*1.1);
}

.header-container {
	padding: var(--size-2);
	justify-content: center;
}

/* Grid Styles */

article{
	background-color: var(--light-grey);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--size-4);
	padding: var(--size-1);
	overflow-x: hidden;
	opacity: 0;
	transform: translateY(20px); 
	animation: fade 1.0s ease-out forwards; 
}

@keyframes fade {
	to {
		opacity: 1;
		transform: translateY(0); 
  }
}

.basic{
	border: 1px var(--black) solid;
	text-align: left;
	padding: var(--size-2);
}

/* Nav Settings */

nav{
	background-color: var(--white);
	display: flex;
	justify-content: space-between;
	border-bottom: 1px var(--black) solid;
	position: sticky;
	top: 0;
	z-index: 1000;
}

.nav-content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.nav-text{
	font-family: var(--font-family-4);
	font-weight: 100;
	text-transform: uppercase;
}

.nav-items {
	padding: var(--size-1);
	font-size: var(--size-1);
	text-align: center;
	color: var(--black);
	display: grid;
	grid-template-columns: 1fr;
	place-items: center;
	position: relative;
	overflow: hidden;
	transition: opacity 0.5s ease, background-color 0.5s ease; 
}

.nav-items:hover{
	background-color: var(--light-grey);
}

/* Nav Visuals */

	/* Square General */

.square-container{
	width: var(--size-5);
	height: var(--size-4);
}

.square {
	width: var(--size-3);
	height: var(--size-3);
}

	/* Overall Squares */

#square-1 {
	border: 1px var(--black) solid;
	background-color: var(--white);
	position: relative;
	top: 12px;
	left: 20px;
	z-index: 1;
}

#square-2 {
	background-color: var(--white);
	border: 1px var(--black) solid;
	position: relative;
	bottom: 26px;
	left: 14px;
	z-index: 2;
}

#square-3 {
	border: 1px var(--black) solid;
	background-color: var(--white);
	text-align: center;
	line-height: var(--size-3);
	position: relative;
	bottom: 64px;
	left: 8px;
	z-index: 3;
}

	/* Design Squares */

#square-4 {
	border: 1px var(--black) solid;
	background-color: var(--white);
	position: relative;
	bottom: 32px;
	left: 8px;
	z-index: 3;
}

#square-7 {
	border: 1px var(--black) solid;
	background-color: var(--white);
	position: relative;
	top: 12px;
	left: 20px;
	z-index: 1;
}

	/* Color Squares */

#square-5 {
	border: 1px var(--black) solid;
	background-color: var(--light-grey);
	z-index: 2;
	position: relative;
	bottom: 32px;
	z-index: 3;
}

#square-8 {
	border: 1px var(--black) solid;
	background-color: var(--light-white);
	position: relative;
	top: 12px;
	left: 12px;
	z-index: 1;
}

	/* Type Squares */

#square-6 {
	border: 1px var(--black) solid;
	background-color: var(--white);
	text-align: center;
	line-height: var(--size-3);
	position: relative;
	bottom: 32px;
	z-index: 3;
}

#square-9 {
	border: 1px var(--black) solid;
	background-color: var(--white);
	position: relative;
	top: 12px;
	left: 12px;
	z-index: 1;
}

#square-text {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight: bold;
}

/* Info Settings (Below Header) */

#info ul {
	display: flex;
	justify-content: flex-start;
	gap: var(--size-1);
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
	font-family: var(--font-family-4);
	font-weight: 100;
	font-size: var(--size-1);
	color: var(--black);
	max-width: none;
  }
  
.line {
	border: 1px var(--black) solid;
	flex-grow: 1;
}

/* typing text animation */

.typing-text{
	font-family: var(--font-family-6);
	line-height: 2ch;
}

			/* 1 */

.typing-text-1{
	font-family: var(--font-family-6);
	letter-spacing: -1px;
	overflow: hidden; 
	white-space: nowrap; 
	width: 0;
	animation: typing-text-1 6s steps(40) 1s forwards;
}
  
@keyframes typing-text-1 {
	from { 
		width: 0 
	}
	to { 
		width: 100% 
	}
}

			/* 2 */

.typing-text-2{
	font-family: var(--font-family-6);
	letter-spacing: -1px;
	overflow: hidden; 
	white-space: nowrap; 
	width: 0;
	animation: typing-text-2 6s steps(40) 3s forwards;
}

@keyframes typing-text-2 {
	from { 
		width: 0 
	}
	to { 
		width: 100% 
	}
}

			/* 3 */

.typing-text-3{
	font-family: var(--font-family-6);
	letter-spacing: -1px;
	overflow: hidden; 
	white-space: nowrap; 
	width: 0;
	animation: typing-text-3 6s steps(40) 5s forwards;
  }
  
@keyframes typing-text-3 {
	from { 
		width: 0 
	}
	to { 
		width: 100% 
	}
}

			/* 4 */

.typing-text-4{
	font-family: var(--font-family-6);
	letter-spacing: -1px;
	overflow: hidden; 
	white-space: nowrap; 
	width: 0;
	animation: typing-text-4 6s steps(40) 7s forwards;
}
  
@keyframes typing-text-4 {
	from { 
		width: 0 
	}
	to { 
		width: 100% 
	}
}

			/* 5 */

.typing-text-5{
	font-family: var(--font-family-6);
	letter-spacing: -1px;
	overflow: hidden; 
	white-space: nowrap; 
	width: 0;
	animation: typing-text-5 6s steps(40) 9s forwards;
}

@keyframes typing-text-5 {
	from { 
		width: 0 
	}
	to { 
		width: 100% 
	}
}

			/* 6 */

.typing-text-6{
	font-family: var(--font-family-6);
	letter-spacing: -1px;
	overflow: hidden; 
	white-space: nowrap; 
	width: 0;
	animation: typing-text-6 6s steps(40) 13s forwards;
}

@keyframes typing-text-6 {
	from { 
		width: 0 
	}
	to { 
		width: 100% 
	}
}

	/* Media Queries */

@media (min-width: 768px) {

	h1{
		font-size: var(--size-7);
	}

	/* Nav Visuals */

		/* Square General */

	.square-container{
		width: var(--size-5);
		height: var(--size-6);
	}

	.square {
		width: var(--size-4);
		height: var(--size-4);
	}

		/* Overall Squares */

	#square-1 {
		position: relative;
		top: 16px;
		left: 16px;
		z-index: 1;
	}

	#square-2 {
		position: relative;
		bottom: 40px;
		left: 8px;
		z-index: 2;
	}

	#square-3 {
		line-height: var(--size-4);
		position: relative;
		bottom: 96px;
		left: 0px;
		z-index: 3;
	}

		/* Design Squares */

	#square-4 {
		position: relative;
		bottom: 48px;
		left: 0px;
		z-index: 3;
	}

	#square-7 {
		position: relative;
		top: 16px;
		left: 16px;
		z-index: 1;
	}

		/* Color Squares */

	#square-5 {
		position: relative;
		bottom: 48px;
		z-index: 3;
}

	#square-8 {
		position: relative;
		left: 16px;
		top: 16px;
		z-index: 1;
	}

	/* Type Squares */

	#square-6 {
		position: relative;
		line-height: var(--size-4);
		bottom: 48px;
		z-index: 3;
	}

	#square-9 {
		position: relative;
		top: 16px;
		left: 16px;
		z-index: 1;
	}
}

@media (min-width: 1080px) {

	/* Font Setting*/
	
	h1{
		font-size: var(--size-8);
	}

	h3{
		font-size: calc(var(--size-1)*1.5);
	}

	/* Body Grid Setting*/

	body {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
	}

	article {
		grid-column: span 10;
	}

	/* Nav Settings */

	nav{
		grid-column: span 2;
		border-right: 1px var(--black) solid;
		border-bottom: none;
		display: flex;
		justify-content: flex-start;
		flex-direction: column; 
	}

	.nav-items {
		font-size: var(--size-2);
		border-bottom: 1px var(--black) solid;
		height: 100%;
	}

	.nav-text{
		padding-top: var(--size-1);
	}

	/* Info Settings */

	#info {
		grid-column: span 12;
	}

	#info ul {
		font-size: var(--size-2);
	  }

	/* Article Grid Styles */
	
	article {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--size-2);
		row-gap: var(--size-6);
		padding: var(--size-4);
		justify-content: center;
	}

	.basic{
		padding: var(--size-3);
		grid-column: span 6;
	}

	.body-text{
		grid-column: span 8;
		border: 1px var(--black) solid; 
		padding: var(--size-3); 
		max-width: 1000px;
		/* max-width: 800px; */
	}

	/* Heading Grid Setting*/

	.header-container{
		padding: var(--size-3);
	}

	.heading{
		grid-column: span 12;
	}

	blockquote{
		font-size: calc(var(--size-1)*1.5);
	}

}

@media (min-width: 1500px) {

	h1{
		font-size: var(--size-10);
	}

}