/* Font Settings */

h1{
	font-size: calc(var(--size-3)*1.4);
}

.small-h1 {
	font-size: calc(var(--size-3)*1.1);
}

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

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

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

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

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

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

.small-info{
	font-size: 15px;
}

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

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

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

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

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

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

	/* Nav Type Squares */

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

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

#heading-line-2{
	padding-top: 0px;
}

/* Grid Styles Body */

#quotation:nth-child(4){
	background-color: var(--light-green);
	transform: rotate(-10deg);
	transform-origin: center;
	top: 10px;
	transition: transform 0.3s ease;
}

#quotation:nth-child(8){
	background-color: var(--light-pink);
	transform: rotate(15deg);
	transform-origin: center;
	transition: transform 0.3s ease;
}
	
#quotation:nth-child(9){
	background-color: var(--light-yellow);
	transform: rotate(-10deg);
	transform-origin: center;
	transition: transform 0.3s ease;
}

#quotation:hover{
	transform: scale(1.3);
}
	
	/* Media Queries */

@media (min-width: 768px) {

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

	.small-h1 {
		font-size: var(--size-6);
	}

	.small-info{
		font-size: var(--size-2);
	}

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

		/* Font Styles  */

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

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

		/* Grid Styles Heading */

	section.heading{
		height: 100%;
	}

	#header-1{
		transform: rotate(3deg);
		}
		
	#header-2{
		transform: rotate(-3deg);
	}
			
	#header-3{
		transform: rotate(3deg);
		}

		/* Grid Styles Body */

	#quotation{
		grid-column: span 4;
	}

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

	#quotation:nth-child(8){
		grid-column: 8/14;
	}
	
	.basic:nth-child(12){
		grid-column: span 8;
	}
	
	.horizontal{
		grid-column: span 4;
	}

	#desktop-only{
		display: block;
	}

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

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

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

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

	#last-item{
		grid-column: 6/14;
	}
	
}

@media (min-width: 1500px) {

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

}

@media (min-width: 1600px) {

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

}