/* Font Settings */

h2{
	background-color: var(--light-yellow);
}

.h2-background-blue{
	background-color: var(--light-cobalt);
}

#p-highlight-blue{
	color: var(--dark-cobalt)

}

#p-highlight-red{
	color: var(--dark-red)
}

#p-highlight-yellow{
	color: var(--dark-yellow)
}

	/* 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 2s;
}

.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-cobalt); 
}

@keyframes rotate-and-change-2 {
	0% {
		transform: rotate(0deg); 
		color: var(--black); 
	}
	50% {
		transform: rotate(-5deg); 
		color: var(--dark-cobalt); 
	}
	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 6s;
}

.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 Design Squares */

#square-4 {
	background-color: var(--dark-red);
	transform: rotate(-5deg);
}

#square-7 {
	background-color: var(--dark-cobalt);
	transform: rotate(5deg);
}

	/* Grid Styles Heading */

@keyframes rotate-left{
	0% {
	transform: rotate(-2deg);
	}
	50% {
	transform: rotate(-5deg);
	}
	100% {
	transform: rotate(-2deg);
	}
}

@keyframes rotate-right {
	0% {
	transform: rotate(2deg);
	}
	50% {
	transform: rotate(5deg);
	}
	100% {
	transform: rotate(2deg);
	}
}
	
#header-1{
	background-color: var(--dark-red);
	transform: rotate(5deg);
	font-size: 200px;
	border: 1px var(--black) solid;
	animation: rotate-right 4s ease-in-out infinite;
	font-family: var(--font-family-2);
}
	
#header-2{
	background-color: var(--dark-cobalt);
	transform: rotate(-5deg);
	border: 1px var(--black) solid;
	animation: rotate-left 4s ease-in-out infinite;
}
	
#header-3{
	background-color: var(--dark-yellow);
	transform: rotate(5deg);
	border: 1px var(--black) solid;
	animation: rotate-right 4s ease-in-out infinite;
}

	/* Grid Styles Body */
	
#quotation:nth-child(4){
	background-color: var(--light-yellow);
	transform: rotate(-10deg);
	transform-origin: center;
	top: 10px;
	max-height: fit-content;
	transition: transform 0.5s ease;
}

#quotation:nth-child(6){
	background-color: var(--light-red);
	transform: rotate(-8deg);
	transform-origin: center;
	transition: transform 0.5s ease;
}

#quotation:hover{
	transform: rotate(20deg);
}
	
	/* Media Queries */
	
@media (min-width: 1080px) {

		/* Grid Styles Heading */


		/* Grid Styles Body */

	#quotation{
		grid-column: span 4;
	}

	.basic:nth-child(12){
		grid-column: span 8;
	}

	.body-text{
		justify-self: end;
		grid-column: span 7;
	}

	.horizontal{
		grid-column: span 4;
	}

	#colophon{
		grid-column: span 5;
		max-height: fit-content;
	}

	#colophon:nth-child(8){
		align-self: end;
	}

	#quotation:nth-child(6){
		position: relative;
		left: 120px;
		top: 20px;
	}

	#quotation:nth-child(4){
		grid-column: 1/6;
	}

	#last-item{
		grid-column: 4/10;
	}

	#anyone{
		grid-column: 6/14;
	}
}