.fable p,
.fable h2,
.fable h1 {
    color: var(--color-black);
}

.fable h1 {
    margin-bottom: 25px;
}

.fable .page1 .page-column:first-child {
    background: #fcfaf3;
    padding: 50px;
}

.fable .page1 .page-column:first-child div {
	background-image: url(../images/graphic-design/fable/fable.webp);
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
}


.fable .illustrator svg {
	fill: #5f375d;
}
.fable .software > .illustrator:hover::before {
	color: #5f375d;
}

.fable .photoshop svg {
	fill: #b9cce6;
}
.fable .software > .photoshop:hover::before {
	color: #b9cce6;
}



.fable .chameleon h2 {
    color: #5f375d;
}

.fable .chameleon .page-column:nth-child(2) {
    background: #5f375d;
}

.fable .chameleon .image {
	background-image: url(../images/graphic-design/fable/fable-chameleon-mockup.webp);
}

.fable .coyote .image {
	background-image: url(../images/graphic-design/fable/fable-coyote-mockup.webp);
}

.fable .groundhog .image {
	background-image: url(../images/graphic-design/fable/fable-groundhog-mockup.webp);
}

.fable .ocelot .image {
	background-image: url(../images/graphic-design/fable/fable-ocelot-mockup.webp);
}

.fable .peregrine .image {
	background-image: url(../images/graphic-design/fable/fable-peregrine-mockup.webp);
}


.fable .coyote h2 {
    color: #b9cce6;
}

.fable .logo-f {
    fill: #63914d;
}

.fable .logo-h {
    fill: #5f375d;
}

.fable .logo-f,
.fable .burger span:first-child {
	animation: color-swap 10s 1.8s linear infinite;
}

.fable .logo-h,
.fable .burger span:last-child {
	animation: color-swap 10s linear infinite;
}

.fable .coyote .page-column:nth-child(1) {
    background: #b9cce6;
}

.fable .groundhog h2 {
    color: #63914d;
}

.fable .groundhog .page-column:nth-child(2) {
    background: #63914d;
}

.fable .ocelot h2 {
    color: #d7760b;
}

.fable .ocelot .page-column:nth-child(1) {
    background: #d7760b;
}

.fable .peregrine h2 {
    color: #c8504b;
}

.fable .peregrine .page-column:nth-child(2) {
    background: #c8504b;
}

.fable .page:nth-child(2n+1) .page-column:first-child {
	order: 2;
}

@media (max-width: 799px) {
	.fable .page:nth-child(2n+1) .page-column:last-child .image,
	.fable .page:nth-child(2n) .page-column:first-child .image {
		margin-top: 0;
		height: calc(100% - var(--container-border-size) /2);
	}

	.fable .page1 .page-column:first-child div {
		background-position: center;
	}
}




@-webkit-keyframes color-swap {
	0% {
		background-color: #5f375d;
		fill: #5f375d;
	}

	19% {
		background-color: #5f375d;
		fill: #5f375d;
	}

	20% {
		background-color: #b9cce6;
		fill: #b9cce6;
	}

	39% {
		background-color: #b9cce6;
		fill: #b9cce6;
	}

	40% {
		background-color: #63914d;
		fill: #63914d;
	}

	59% {
		background-color: #63914d;
		fill: #63914d;
	}

	60% {
		background-color: #d7760b;
		fill: #d7760b;
	}

	79% {
		background-color: #d7760b;
		fill: #d7760b;
	}

	80% {
		background-color: #c8504b;
		fill: #c8504b;
	}

	100% {
		background-color: #c8504b;
		fill: #c8504b;
	}
}