/* Font Settings */
h1 {
	font-size: var(--size-4);
}

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

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

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

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

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

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

	/* 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-orange); 
}

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

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

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

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

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

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


	/* Nav Color Squares */

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

#square-8 {
	background-color: var(--light-pink);
	transform: rotate(5deg);
}

	/* Grid Settings */

	
	/* 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-blue);
	transform: rotate(5deg);
	border: 1px var(--black) solid;
	animation: rotate-right 3s ease-in-out infinite;
}
	
#header-2{
	background-color: var(--dark-orange);
	transform: rotate(-5deg);
	border: 1px var(--black) solid;
	animation: rotate-left 3s ease-in-out infinite;
}
	
#header-3{
	background-color: var(--dark-pink);
	transform: rotate(5deg);
	border: 1px var(--black) solid;
	animation: rotate-right 3s ease-in-out infinite;
}

	/* Grid Styles Body */
	
#quotation:nth-child(4){
	background-color: var(--light-blue);
	transform: rotate(5deg);
	transform-origin: center;
	top: 10px;
	transition: background-color 0.5s ease;
}
	
#quotation:nth-child(7){
	background-color: var(--light-pink);
	transform: rotate(-15deg);
	transform-origin: center;
	transition: background-color 0.5s ease;
}

#quotation:hover{
	background-color: var(--light-yellow);
}

	/* Example Cards */

.IOC-example{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.IOC{
	text-align: center;
	color: white;
	font-size: var(--size-2);
}

#IOC-text-style-1{
	font-family: "EB Garamond", serif;
}

#IOC-text-style-2{
	font-family: var(--font-family-1)
}

#IOC-1{
	background-color: var(--black);
	border-radius: 100px;
	transform: rotate(5deg);
	transform-origin: center;
	transition: transform 0.3s ease;
}

#IOC-1:hover{
	background: linear-gradient(
		90deg, 
		var(--dark-blue), var(--dark-yellow));
	transform: scale(1.05);
}

#IOC-2{
	background-color: var(--black);
	border-radius: 100px;
	transform: rotate(-5deg);
	transform-origin: center;
	transition: transform 0.3s ease;
}

#IOC-2:hover{
	background: linear-gradient(
		90deg, 
		var(--light-red), var(--dark-cobalt));
	transform: scale(1.05);
}

#IOC-3{
	background-color: var(--black);
	border-radius: 100px;
	transform: rotate(5deg);
	transform-origin: center;
	transition: transform 0.3s ease;
}

#IOC-3:hover{
	background: linear-gradient(
		90deg, 
		var(--dark-green), var(--dark-pink));
	transform: scale(1.05);
}

#IOC-4{
	background-color: var(--black);
	border-radius: 100px;
	transform: rotate(-5deg);
	transform-origin: center;
	transition: transform 0.3s ease;
}

#IOC-4:hover{
	background: linear-gradient(
		45deg, 
		var(--light-orange), var(--dark-blue));
	transform: scale(1.05);
}

	/* Media Queries */

@media (min-width: 768px) {

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

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

	h1 {
		font-size: calc(var(--size-8)*1.1);
	}

		/* Grid Styles Heading */

	#header-1{
		transform: rotate(3deg);
	}
		
	#header-2{
		transform: rotate(-3deg);
	}
		
	#header-3{
		transform: rotate(3deg);
	}
		
	/* 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;
	}

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

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

	.horizontal{
		grid-column: span 4;
	}

	#serif-item{
		grid-column: 2/10;
	}

	#quotation:nth-child(4){
		grid-column: span 5;
	}

	.IOC-example{
		grid-column: span 3;
	}
}

@media (min-width: 1500px) {

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

}