/* Font Settings */

h1{
	transform: rotate(-90deg);
}

.design-link{
	font-family: var(--font-family-4);
	color: var(--dark-red);
	text-decoration: underline;
}

.color-link{
	font-family: var(--font-family-4);
	color: var(--dark-blue);
	text-decoration: underline;
}

.type-link{
	font-family: var(--font-family-4);
	color: var(--dark-yellow);
	text-decoration: underline;
}

.author-notes{
	font-style: italic;
}

.Book-title{
	font-weight: 600;
}

	/* h3 animation */

.rotating-text-1 {
	transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; 
	animation: rotate-and-change-1 4s ease 1 3s;
}

.rotating-text-1:hover {
	transform: rotate(5deg);
	color: var(--dark-red); 
}

@keyframes rotate-and-change-1 {
	0% {
		transform: rotate(0deg);
		color: var(--black);
	}
	50% {
		transform: rotate(5deg); 
		color: var(--dark-red); 
	}
	100% {
		transform: rotate(0deg); 
	  	color: var(--black);
	}
}

.rotating-text-2 {
	transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; 
	animation: rotate-and-change-2 4s ease 1 4s;
}

.rotating-text-2:hover {
	transform: rotate(-5deg);
	color: var(--dark-blue); 
}

@keyframes rotate-and-change-2 {
	0% {
		transform: rotate(0deg); 
		color: var(--black); 
	}
	50% {
		transform: rotate(-5deg); 
		color: var(--dark-blue); 
	}
	100% {
		transform: rotate(0deg); 
	  	color: var(--black);
	}
}

.rotating-text-3 {
	transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; 
	animation: rotate-and-change-3 4s ease 1 5s;
}

.rotating-text-3:hover {
	transform: rotate(5deg);
	color: var(--dark-yellow); 
}

@keyframes rotate-and-change-3 {
	0% {
		transform: rotate(0deg);
		color: var(--black); 
	}
	50% {
		transform: rotate(5deg);
		color: var(--dark-yellow); 
	}
	100% {
		transform: rotate(0deg); 
	  	color: var(--black);
	}
}

	/* Nav Overall Squares */

#square-1 {
	background-color: var(--dark-red);
	transform: rotate(-5deg);
}
	
#square-2 {
	background-color: var(--dark-blue);
	transform: rotate(5deg);
}
	
#square-3 {
	border: 1px var(--black) solid;
	background-color: var(--dark-yellow);
	transform: rotate(-5deg);
	z-index: 3;
}
	
	/* Grid Styles Heading */
	
.heading{
	display: flex;
	justify-items: center;
	grid-row: span 11;
	margin: 0 auto;
}

#header-1{
	background-color: var(--dark-red);
	transform: rotate(5deg);
	border: 1px var(--black) solid;
	display: flex; 
	justify-content: center;
	align-items: center;
	width: 100px;
	transition: transform 0.3s ease;
}

#header-1:hover{
	transform: rotate(-5deg);
}


#header-2{
	background-color: var(--dark-blue);
	transform: rotate(-5deg);
	border: 1px var(--black) solid;
	display: flex; 
	justify-content: center;
	align-items: center;
	width: 100px;
	transition: transform 0.3s ease;
}

#header-2:hover{
	transform: rotate(5deg);
}

#header-3{
	background-color: var(--dark-yellow);
	transform: rotate(5deg);
	border: 1px var(--black) solid;
	display: flex; 
	justify-content: center;
	align-items: center;
	width: 100px;
	transition: transform 0.3s ease;
}

#header-3:hover{
	transform: rotate(-5deg);
}

	/* Media Queries */

@media (min-width: 768px) {

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

}
	
@media (min-width: 1080px) {

/* Heading Settings */

	#header-1{
		width: 300px;
	}
	
	#header-2{
		width: 300px;
	}
	
	#header-3{
		width: 300px;
	}

	.heading{
		display: flex;
		grid-row: span 2;
		height: 800px;
	}

/* Font Settings */

	h1{
		font-size: var(--size-8);
	}
	
	#landing-h3{
		font-size: var(--size-3);
	}

	#landing-body{
		font-size: calc(var(--size-1)*1.3);
		line-height: var(--size-3);
	}

/* Grid Settings */

	article {
		grid-column: span 10;
		margin: none;
	}

	#colophon{
		grid-column: span 4;
	}

	#separate-text{
		display: flex;
		flex-direction: column; 
		justify-content: space-between; 
	}
}