* {
	margin: 0;
	padding: 0;
	position: relative;
	box-sizing: border-box;
}

/* Hide only visually, but have it available for screen readers */

.hidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

.hidden.focusable:active,
.hidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

:root {
	--illustration: #0f106c;
	--animation: #d03350;
	--pixelart: #f9dd58;
}


.no-animation * {
	animation: none !important;
	transition: none !important;
}

body {
	overflow: hidden;
	font-family: 'Barlow', sans-serif;
	font-weight: 300;
	touch-action: none;
}

p {
	text-align: left;
	margin-bottom: 1em;
	line-height: 1.5em;
}

a {
	font-weight: 700;
	color: #000;
}

strong {
	font-weight: 700;
}

.browserupgrade {
	background: #fcc;
	padding: 20px;
	border-bottom: 4px solid #000;
	text-align: center;
	
}

.logo {
	clip-path: url('#b-logo');
	position: absolute;
	width: 47.7%;
	right: 2%;
	top: -1%;
	height: 12%;
}

.rotate-me {
	display: flex;
	align-items: baseline;
	transform: rotate(-10deg);
	transform-origin: 0% 100%;
	position: absolute;
	bottom: 10px;
	left: 30px;
	z-index: 999;
}

.logo svg {
	height: 3em;
}

.animation-toggle {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.8em;
	z-index: 999;
	padding: 10px;
}

.animation-toggle label {
	left: 1em;
}

.animation-toggle input[type="checkbox"] {
	appearance: none;
	background: #000;
	width: 3.5em;
	height: 2em;
	top: 0.5em;
	left: 2em;
	border-radius: 0;l74
	
}

.animation-toggle input[type="checkbox"]::before {
	content: "Off";
	text-transform: uppercase;
	background: #fff;
	display: inline-block;
	padding: 0 2px;
	top: 0;
	left: 0;
	position: absolute;
	height: 100%;
	border: 4px solid #000;
	box-sizing: border-box;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
}
.animation-toggle input[type="checkbox"]:checked::before {
	content: "On";
	left: auto;
	right: 0;
}


.home-wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	padding: 30px;
	height: 100dvh;
	width: 100dvw;
	transition: 1s;
	transform: scale(1) rotate(0deg) translate(0%, 0%);
	transition-delay: 0.25s;
	overflow: hidden;
}

.cat {
	width: 100%;
	height: 100%;
	display: inline-block;
	perspective: 1000px;
	transition: 0.2s;
	z-index: -1;
}

.cat:hover {
	transform: scale(0.97);
	transition: 0.2s;
}

.background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden; /* For FF */
}
.background::before,
.logo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../img/nav-borders.svg#s-ill') no-repeat left top;
	z-index: 999;
	background-size: 100% 100%; /* for FF */
}
.logo::before {background-image: url('../img/nav-borders.svg#s-logo');}


.title {
	position: absolute;
	width: 100%;
	pointer-events: none;
}

.cat h2 {
	border: 4px solid #000;
	background: #fffec6;
	color: #000;
	box-shadow: -1em 0.5em 0px #000;
	padding: 0.5em 1em;
	display: inline-block;
	text-transform: uppercase;
	font-weight: 800;
}

.illustration {
	grid-column: span 2 / span 2;
	grid-row: span 2 / span 2;
	grid-column-start: 1;
	grid-row-start: 1;
	width: 110%;
	height: 118%;
}
/*.illustration .background {clip-path: polygon(0% 0%, 90% 3%, 100% 100%, 3% 83%);	}*/

.illustration .background {clip-path: url('#b-ill');	 background: var(--illustration);}
.illustration .background::before {background-image: url('../img/nav-borders.svg#s-ill');}

.illustration .title {
	top: 0;
	left: 0;
	transform: rotate3d(0.1, 1, -0.1, 50deg) translate(-5%, 20%);
	transform-origin: 0 0;
	transition: 2s;
}
.a-ill .illustration .title {
	transform: translate(-100%,0);
	transition: 1s;
}
.illustration.cat h2 {box-shadow: -1em 0.1em 0px #000;}

.animation {
	grid-column: span 2 / span 2;
	grid-row: span 2 / span 2;
	grid-column-start: 3;
	grid-row-start: 1;
	height: 110%;
	width: 98%;
	right: -2%;
	top: 2%;
}
/*.animation .background {clip-path: polygon(0% 2%, 100% 0%, 100% 100%, 8% 80%);}*/
.animation .background {clip-path: url('#b-ani'); background: var(--animation);}
.animation .background::before {background-image: url('../img/nav-borders.svg#s-ani');}
.animation .title {
	bottom: 0;
	right: 0;
	text-align: right;
	transform: rotate3d(-0.05, -1, -0.02, 50deg) translate(2%, -30%);
	transform-origin: 100% 100%;
	transition: 2s;
}
.a-ani .animation .title {
	transform: translate(100%,0);
	transition: 1s;
}
.animation.cat h2 {box-shadow: 1em 0.1em 0px #000;}

.pixelart {
	grid-row: span 2 / span 2;
	grid-row-start: 3;
	grid-column-start: 1;
	width: 110%;
}
/*.pixelart .background {clip-path: polygon(0% 0%, 100% 9%, 86% 97%, 3% 98%);}*/
.pixelart .background {clip-path: url('#b-pixel'); background: var(--pixelart);}
.pixelart .background::before {background-image: url('../img/nav-borders.svg#s-pixel');}
.pixelart .title {
	bottom: 25%;
	left: 0;
	transform: rotate3d(0, 1, -0.05, 50deg) translate(-6%, 0);
	transform-origin: 0 100%;
	transition: 2s;
}

.a-pixel .pixelart .title {
	transform: translate(-100%,0);
	transition: 1s;
}

.design {
	grid-row: span 2 / span 2;
	grid-row-start: 3;
	grid-column-start: 2;
	width: 135%;
}
/*.design .background {clip-path: polygon(10% 10%, 90% 20%, 100% 97%, 0% 97%);}*/
.design .background {clip-path: url('#b-design'); background: #fff;}
.design .background::before {background-image: url('../img/nav-borders.svg#s-design');}
.design .title {
	bottom: 0;
	left: 0;
	text-align: center;
	transform: rotate3d(1, 0, 0, 50deg) translate(0, 20%);
	transform-origin: 50% 100%;
	transition: 2s;
}
.a-design .design .title {
	transform: translate(0,100%);
	transition: 1s;
}
.design.cat h2 {box-shadow: 0em 1em 0px -0.3em #000;}


.about {
	grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 3;
	height: 125%;
	top: -15%;
	width: 90%;
	right: -10%;
}
/*.about .background {clip-path: polygon(11% 0%, 99% 36%, 98% 100%, 15% 80%);}*/
.about .background {clip-path: url('#b-about'); background: #000;}
.about .background::before {background-image: url('../img/nav-borders.svg#s-about');}
.about .title {
	top: 35%;
	right: 0;
	text-align: right;
	transform: rotate3d(0, -1, 0, 50deg) translate(0%, 0%);
	transform-origin: 100% 0;
	transition: 2s;
}
.a-about .about .title {
	transform: translate(100%,0);
	transition: 1s;
}
.about.cat h2 {box-shadow: 1em 0.3em 0px #000;}

.contact {
	grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 4;
	height: 105%;
	top: -5%;
	width: 85%;
	right: -15%;
	cursor: pointer;
}
.contact .background, .c-wrap {clip-path: polygon(0% 0%, 98% 17%, 97% 100%, 5% 95%);}
/*.contact .background {clip-path: url('#b-contact');}*/
.contact .background::before {background-image: none;}
.contact .background-border {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../img/nav-borders.svg#s-contact') no-repeat left top;
	z-index: 1;
	clip-path: polygon(0% 0%, 98% 17%, 97% 100%, 5% 95%);
	pointer-events: none;
	background-size: 100% 100%;
}
.contact .title {
	bottom: 0;
	right: 0;
	text-align: right;
	transform: rotate3d(0.2, -1, 0.2, 50deg) translate(0%, 40%);
	transform-origin: 100% 100%;
	z-index: 9;
}
.contact.cat h2 {box-shadow: 1em 0.6em 0px #000;}

.content {
	opacity: 0;
	pointer-events: none;
	position: fixed;
	z-index: -1;
}

.illustration .content {
	clip-path: polygon(0% 0%, 90% 3%, 100% 100%, 3% 83%);
	background: #f88;
}

.active .content {
	width: calc(100vw - 40px);
	height: calc(100vh - 40px);
	top: 0;
	left: 0;
	z-index: 999;
	pointer-events: unset;
	opacity: 1;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.active {
	z-index: 999;
}

.c-ill {
	/*opacity: 0;*/
	position: absolute;
	top: 0;
	left: 0;
	width: 55vh;
	height: 52vw;
	background: rgba(0,0,0,0.5);
	z-index: 999;
	clip-path: polygon(17% 3%, 100% 0%, 97% 89.5%, 0% 100%);
	transform: rotate(-90deg) translate(-18.5vw, 22.5vh);
	transform-origin: 15% 50%;
	transition: 1s;
}

.a-ill .home-wrap {
	/*animation: a-ill 10s linear forwards;*/
	
	/*animation-name: a-ill;
	animation-direction: forwards;
	animation-duration: 10s;
	animation-timing-function: cubic-bezier(0.1, -0.5, 1, 1.5);*/
	transition: 0.75s;
	transform: scale(6) rotate(90deg) translate(20%, 20%);
	transition-timing-function: cubic-bezier(.76,-0.01,1,1);
	
	

}

@keyframes a-ill {
	0% {
		transform: scale(1) rotate(0deg) translate(0, 0);
		transform-origin: 0% 0;
		/*animation-timing-function: linear;*/
	}
	
	20% {
		transform: scale(1.5) rotate(45deg) translate(26%, 10%);
		transform-origin: 40% 0;
		/*animation-timing-function: linear;*/
	}
	
	100% {
		transform: scale(4) rotate(90deg) translate(46%, -30%);
		transform-origin: 50% 0;
		/*animation-timing-function: linear;*/
	}
}

.a-ill .c-ill {
	transform: rotate(0) translate(0px, 0px);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	width: 100vw;
	height: 100vw;
	opacity: 1;
}



.a-pixel .home-wrap {
	transition: 0.75s;
	transform: scale(7) rotate(-90deg) translate(35%, -24%);
	transition-timing-function: cubic-bezier(.76,-0.01,1,1);
}
.a-design .home-wrap {
	transition: 0.75s;
	transform: scale(6) rotate(180deg) translate(8%, -25%);
	transition-timing-function: cubic-bezier(.76,-0.01,1,1);
}
.a-ani .home-wrap {
	transition: 0.75s;
	transform: scale(5) rotate(-90deg) translate(-24%, 22%);
	transition-timing-function: cubic-bezier(.76,-0.01,1,1);
}
.a-about .home-wrap {
	transition: 0.75s;
	transform: scale(12) rotate(-90deg) translate(-26%, -12%);
	transition-timing-function: cubic-bezier(.76,-0.01,1,1);
}
.a-contact .home-wrap {
	/*transition: 0.75s;
	transform: scale(7) rotate(90deg) translate(-25%, -88%);
	transform-origin: 50% 0;
	transition-timing-function: cubic-bezier(.76,-0.01,1,1);*/
}


.c-inner {
	transform: translate(100%,0);
	transition: 0.5s;
	transition-timing-function: cubic-bezier(.19,.45,.32,.98);
}
.a-contact .c-inner {
	transform: translate(0,0);
	transition: 0.5s;
	animation: contact 0.5s linear;
}

@keyframes contact {
	0% {transform: translate(100%,0); animation-timing-function: cubic-bezier(.2,.07,.9,.65);
	}
	75%, 90%, 100% {transform: translate(0,0);}
	83% {transform: translate(10%,0);}
	95% {transform: translate(2%,0);}
}


.c-wrap {
	height: 100%;
}

.c-wrap a, .c-wrap div {
	flex-grow: 1;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
}

.c-wrap .close {
	transform: skew(3deg);
	background: #000;
	z-index: 3;
	margin: 0 -20px 0 5px;
	min-width: 1em;
}
.c-wrap .close::before {
	content: "\2715";
	color: #fff;
	position: absolute;
	font-size: 1.5em;
	font-weight: 700;
	margin-left: 10%;
}

.c-wrap .c-email {
	flex-grow: 3;
	background: #d03350;
	border: 4px solid #000;
	transform: skew(-3deg);
	z-index: 2;
}

.c-wrap .c-bsky {
	background: #3c83f6;
	z-index: 1;
	margin-left: -10px;
}

.c-wrap span {
	border-bottom: 2px solid transparent;
}
.c-wrap span:hover {
	border-bottom: 2px solid #fff;
}


.big-close-wrap {
	perspective: 1000px;
	perspective-origin: 50% 50%;
	position: absolute;
	width: 100%;
	z-index: 999;
}

.big-close, .g-lightbox .close, .g-about h4 {
	position: absolute;
	top: 20px;
	left: 20px;
	background: #fffec6;
	color: #000;
	display: block;
	z-index: 999;
	border: 4px solid #000;
	padding: 1em;
	text-transform: uppercase;
	font-weight: 800;
	text-decoration: none;
	box-shadow: -10px 5px #000;
}

.big-close {transform: rotate3d(0.1, 1, -0.1, 70deg); border-radius: 0;}

.a-ill .big-close,
.a-ani .big-close,
.a-pixel .big-close,
.a-design .big-close,
.a-about .big-close {
	animation: slidein 2s ease-in-out forwards;
	transform: rotate3d(0.1, 1, -0.1, 70deg);
}

@keyframes slidein {
	0%, 50% {
		transform: translateY(-200px) rotate3d(0.1, 1, -0.1, 70deg);
		opacity: 0;
	}
	100% {
		transform: translateY(0px) rotate3d(0.1, 1, -0.1, 70deg);
		opacity: 1;
	}
}

.big-close.hide {opacity: 0 !important;}

.a-ill .homeanimation-wrap img,
.a-ani .homeanimation-wrap img,
.a-pixel .homeanimation-wrap img,
.a-design .homeanimation-wrap img,
.a-about .homeanimation-wrap img {
	animation: none !important;
	transition: none !important;
}


/* === Nav backgrounds === */

.background img {
	height: 100%;
	width: 110%;
	object-fit: cover;
	transform: translate(0,0);
	opacity: 1;
	transition: 1s;
	position: absolute;
	left: -5%;
	display: none;
}
.background img:nth-child(1) {
	display: block;
	transform: translate(5%,0);
}
.homeanimation-wrap {
	width: 100%;
	height: 100%;
	transition: 1s;
}
.background.homeanimate .homeanimation-wrap img {
	display: block;
}

.background.homeanimate img:nth-child(1) {
	z-index: 3;
	animation: gallery-prev-first 13s linear 0s forwards;
}
.background.homeanimate img:nth-child(2) {
	z-index: 2;
	animation: gallery-prev 5s linear 4s forwards;
}
.background.homeanimate img:nth-child(3) {
	z-index: 1;
	animation: gallery-prev 5s linear 8s forwards;
}

@keyframes gallery-prev-first {
	0% {
		transform: translate(5%,0);
	}
	33% {
		opacity: 100%;
	}
	36% {
		transform: translate(-5%,0);
		opacity: 0;
	}
	
	90% {
		transform: translate(5%,0);
		opacity: 0;
	}
	
	100% {
		transform: translate(5%,0);
		opacity: 1;
	}
	
}

@keyframes gallery-prev {
	0% {
		transform: translate(5%,0);
	}
	80% {
		opacity: 100%;
	}
	100% {
		transform: translate(-5%,0);
		opacity: 0;
	}
}


/* when active pause and remove images */
.a-ill .illustration .background .homeanimation-wrap,
.a-ani .animation .background .homeanimation-wrap,
.a-pixel .pixelart .background .homeanimation-wrap,
.a-design .design .background .homeanimation-wrap,
.a-about .about .background img {
	transform: translate(0,100%);
	animation: none;
	animation-play-state: paused;
}



/* === Gallery content === */

.gallery-wrap {
	perspective: 1000px;
	height: 100vh;
	width: 100vw;
	perspective-origin: 50% 0;
	width: 100vw;
	perspective-origin: 50% 0;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: 0.2s;
	transition-timing-function: cubic-bezier(.33,.01,.71,1);
	
	transform: rotate(-20deg) scale(0.6);
	/*display: none;*/
}
/*.ready .gallery-wrap {
	display: block;
}*/

.a-ill .g-ill,
.a-ani .g-ani,
.a-pixel .g-pixel,
.a-design .g-design,
.a-about .g-about {
	opacity: 1;
	pointer-events: unset;
	transform: rotate(0deg) scale(1);
	transition: 0.5s;
	transition-timing-function: cubic-bezier(0,0,.4,1);
	transition-delay: 0.75s;
}

.g-ill {background: var(--illustraion);}
.g-ani {background: var(--animation);}
.g-pixel {background: var(--pixelart);}
.g-design {background: #fff;}
.g-about {background: #000;}


.gallery {
	margin: 0 auto;
	height: 135%;
	overflow-y: scroll;
	text-align: center;
	padding: 2em 10% 20vw 10%;
	overflow-x: hidden; /*For the rotated divs*/
	
	display: none;
}

.a-ill .g-ill .gallery,
.a-ani .g-ani .gallery,
.a-pixel .g-pixel .gallery,
.a-design .g-design .gallery,
.a-about .g-about .gallery,
.closing .gallery {
	display: block;
}


.gallery h3 {
	font-size: 12vh;
	text-transform: uppercase;
	font-weight: 800;
}

.g-group {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 10px 20px;
}

.g-item a {
	width: 100%;
	height: 100%;
	display: block;
	border: 4px solid #000;
}
.g-ill .g-item a {border-color: #fff;}

.g-item a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	
}

/* lightbox */

.g-lightbox {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.75);
	opacity: 0;
	pointer-events: none;
	padding: 5%;
	transition: 0.5s;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.g-lightbox.active {
	opacity: 1;
	pointer-events: unset;
}

.g-lightbox .close {
	transform: translate(0,-100%);
	transition: 0.5s;
}
.g-lightbox.active .close {transform: translate(0,0);}

.g-lightbox.active .close::after {
	content: "";
	position: absolute;
	width: 100vw;
	height: 100vw;
	top: 0;
	left: 0;
}

.g-lightbox img {
	width: 100%;
	max-height: 95%;
	display: block;
	object-fit: contain;
	margin-bottom: 1em;
	filter: drop-shadow(0px 4px #000) drop-shadow(-4px -4px #000) drop-shadow(0px 4px #000) drop-shadow(8px 0px #000); /*Because border doesn't work on flexible images without a wrap*/
	transform: scale(0.9);
	transition: 0.5s;
	z-index: 1;
}
.g-lightbox.active img {transform: scale(1);}

.g-lightbox small {
	color: #fff;
	display: block;
	text-align: center;
}
.g-lightbox small em {font-style: normal;}
.g-lightbox.active small {
	z-index: 9999;
}

.loading-spinner {
	animation: loading 3s linear infinite;
	stroke-dasharray: 160, 850;
	position: absolute;
	width: 50px;
	left: calc(50% - 25px);
	z-index: -1;
}
@keyframes loading {
	from {
		stroke-dashoffset:  250;
	}
	to {
		stroke-dashoffset: 1250;
	}
}



/* Illustration gallery */

.g-ill .gallery {
	transform: translate3d(0px, -4%, 0px) rotate3d(-1, 0, 0.15, 13deg);
	background: var(--illustration);
	color: #fff;
	width: 120%;
    padding: 5em 20% 30em 20%;
    left: -10%;
}

.g-ill h3 {font-size: 11.75vw;}

.g-1 div {
	width: 33.3vw;
	height: 50vw;
}
.g-1 .g-item:nth-child(2) {margin-top: 5vw;}
.g-1 .g-item:nth-child(3) {margin-top: 10vw;}
	
.g-2 {
	transform: rotate(20deg);
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 94vw;
	left: -3.5vw;
	z-index: 1;
}

.g-2 div {
	height: 15vw;
	width: 36vw;
}
.g-2 .g-item:first-child {width: 70vw;}
.g-2 .g-item:nth-child(2) {margin-left: 11vw;}

.g-3 {
	filter: drop-shadow(-4px 0px #fff) drop-shadow(0px 4px #fff) drop-shadow(4px 0px #fff) drop-shadow(0px -4px #fff);
}
.g-3 div a {border: none;}

.g-3 div {
	width: 50vw;
	height: 40vw;
}
.g-3 .g-item:first-child {
	clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 0% 100%);
	margin-right: -13.5vw;
}
.g-3 .g-item:last-child {
	clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
}


.g-4 div {
	width: 100vw;
	height: 20vw;
}


.g-5 {
	justify-content: flex-end;
	filter: drop-shadow(-4px 0px #fff) drop-shadow(0px 4px #fff) drop-shadow(4px 0px #fff) drop-shadow(0px -4px #fff);
}
.g-5 .g-item:first-child {
	width: 40vw;
	height: 30vw;
	position: absolute;
	top: 10px;
	left: 20px;
	z-index: 1;
	clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
}

.g-5 .g-item:last-child {
	width: 90%;
	height: 50vw;
	padding-top: 5vw;
	clip-path: polygon(0% calc(30vw + 20px), calc(28vw + 20px) calc(30vw + 20px), calc(32vw + 20px) 0%, 100% 0%, 100% 100%, 0% 100%);
}

.g-5 div a {
	border: none;
}



/* animation gallery */

.g-ani .gallery {
	height: 100%;
	width: 100%;
	padding: 10%;
}

.g-ani .gallery h3 {
	color: #fff;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	max-width: 100%;
	margin-top: 2em;
	border: 4px solid #000;
	pointer-events: none;
	display: none;
}

.a-ani .embed-container {
	pointer-events: unset;
	display: block;
}

.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.g-ani .ga-2 {
	z-index: 2;
}
.g-ani .ga-2::before {border-left-color: var(--animation);}
.g-ani .ga-2::after {border-bottom-color: var(--animation);}
.embed-container::after {
	content: "";
	position: absolute;
	bottom: -60px;
	left: 50%;
	z-index: 3;
	width: 0;
	height: 0;
	border-bottom: 50px solid #fff;
	border-left: 5px solid transparent;
	border-right: 30px solid transparent;
}


/* pixel art gallery */

.g-pixel {perspective-origin: 50% 50%;}

.g-pixel .gallery {
	transform: translate3d(1%, -11%, 0px) rotate3d(0, 0.5, -0.05, 8deg);
}

.a-pixel .gallery {
	height: 150%;
	overflow-x: scroll;
	overflow-y: hidden;
	width: 120%;
	padding: 10vw 20vw 20vw 1vw;
}

.g-rotate {
	transform: rotate(-90deg);
	transform-origin: 50% 0;
	top: 50%;
	left: -50%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 0 35vw 0;
	width: 100%;
	height: 120vw;
}

.g-rotate .g-item {
	transform: rotate(90deg);
}

.g-pixel h3 {
	padding-top: 10vw;
	margin-top: -1em;
}

.g-pixel .g-item {
	height: 60vh;
	width: 60vh;
	margin: 0 auto 20px;
	image-rendering: pixelated;
}

.g-pixel .g-item a {
	transition: 0.2s;
	background: #fff;
}
.g-pixel .g-item a:hover {
	transform: scale(0.95);
	transition: 0.2s;
}
.g-pixel .g-item a img {
	transition: 0.2s;
}
.g-pixel .g-item a:hover img {
	opacity: 0.7;
	transition: 0.2s;
}

.g-pixel .g-group {
	height: 60vh;
	width: 60vh;
	flex-wrap: wrap;
	margin: 0 auto 20px;
	padding: 0;
}

.g-pixel .g-group .g-item {
	width: calc(30vh - 10px);
	height: calc(30vh - 10px);
	margin: 0;
}

.a-pixel .g-lightbox img {
	image-rendering: pixelated;
}


.p-ani::before {
	content: "\25BA  Animated";
	background: rgba(0,0,0,0.7);
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 6px;
	z-index: 1;
	font-size: 0.5em;
	text-transform: uppercase;
	color: #fff;
}




/* Design gallery */

.g-design .gallery {
	width: 100%;
	padding: 120px 5% 20vw 16vh;
	background: #fff;
	height: 100%;
}

.g-design .gallery h3 {
	transform: rotate(-90deg) translate(-120px,-91vh);
	font-size: 15vh;
	position: fixed;
	left: 0px;
	top: 0;
	transform-origin: 100% 0;
	text-align: right;
	display: block;
	width: 91vh;
}

.gd-1 {
	flex-wrap: wrap;
	gap: 15px;
}
.gd-1 div {
	width: calc(25% - 15px);
}

.g-design .g-group div a {
	border: none;
	transition: 0.2s;
}
.g-design .g-group div a:hover {
	transform: scale(0.95);
	transition: 0.2s;
	opacity: 0.7;
}

.g-design .g-group {
	padding-bottom: 100px;
}

.gd-2 {
	flex-direction: row-reverse;
}

/*.gd-2 > .g-item:nth-child(1) {
	height: 50vh;
	padding-top: 0;
}*/

.gd-2 .g-item {
	width: 50vw;
	height: auto;
}
/*.gd-2 > div {
	padding-top: 15vh;
}
.gd-2 div .g-item {
	height: calc(25vh - 15px);
	margin-bottom: 15px;
}*/

.gd-3 .g-item {
	height: 75vh;
	width: 33%;
}

.gd-4 {
	flex-wrap: wrap;
	width: 80%;
	margin: 0 auto;
}
.gd-4 .g-item {
	width: calc(50% - 15px);
}


/* About "gallery" */

.g-about .gallery {
	height: 100%;
}

.g-about .gallery h3 {
	color: #fff;
}

.ga-1 {
	justify-content: end;
	gap: 0;
	z-index: 1;
}

.ga-1 div {
	background: #fffec6;
	padding: 4em 4em 4em 3em;
	width: 50%;
	clip-path: polygon(0 7%, 100% 0%, 96% 95%, 0 100%);
}

.ga-1 div p:first-child {
	font-size: 1.5em;
}

.ga-1 .about-img::before,
.ga-1 .about-img::after {
	content: "";
	position: absolute;
	top: 60%;
	right: -4px;
	z-index: 2;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 70px solid #fffec6;
}

.ga-1 .about-img::after {
	border-top: 12px solid transparent;
	border-bottom: 24px solid transparent;
	border-right: 83px solid #000;
	z-index: 1;
	top: calc(60% - 3px);
}

.ga-1 .about-img {
	width: 50%;
	clip-path: polygon(0 0, 100% 10%, 100% 90%, 2% 100%);
	border-right: 4px solid #000;
	margin-bottom: -4%;
}

.ga-1 .about-img img {
	position: absolute;
	object-fit: cover;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ga-2, .ga-3, .ga-4 {
	background: #fff;
	width: 100%;
	padding: 4em 2em 2em 2em;
	margin: 1em 0;
	display: block;
	text-align: left;
}
.ga-2::before, .ga-2::after,
.ga-3::before, .ga-4::after,
.ga-4::before, .ga-3::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	border-left: 100vw solid #000;
	border-bottom: 30px solid transparent;
}

.ga-2 {
	clip-path: polygon(0% 0%, 99% 0%, 98% 100%, 0.5% 100%);
	width: 94%;
	padding: 10% 5em 5% 5em;
	left: 3%;
}
.ga-2::before {
	border-bottom: 50px solid transparent;
}
.ga-2::after {
	border-left: 100vw solid transparent;
	border-bottom: 30px solid #000;
	top: auto;
	bottom: 0;
}

.ga-2 ul {
	column-count: 2;
	list-style: square;
}

.ga-2 ul li {
	padding: 10px;
}

.ga-3 {
	clip-path: polygon(3.5% 5%, 97% 0%, 100% 92%, 2% 100%);
	clip-path: polygon(3.5% 0, 97% 0, 100% 100%, 2% 100%);
	padding: 8% 7em 5% 7em;
	width: 98%;
}

.ga-3::after {
	border-left: none;
	border-right: 100vw solid transparent;
	border-bottom: 30px solid #000;
	top: auto;
	bottom: 0;
}

.ga-3 ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0 -60px;
}
.ga-3 ul li img {
	width: 200px;
	height: 100px;
	margin: 20px;
}

.ga-4 {
	clip-path: polygon(0 10%, 100% 0%, 99% 94%, 1% 100%);
	clip-path: polygon(0 0, 100% 0%, 99% 100%, 1% 100%);
	left: 2%;
	width: 96%;
	padding: 7% 6em 5% 6em;
}
.ga-4::before {
	border-right: 100vw solid #000;
	border-left: none;
}
.ga-4::after {
	border-left: 100vw solid transparent;
	border-bottom: 30px solid #000;
	top: auto;
	bottom: 0;
}

.g-about h4 {
	top: -1em;
	padding: 0.5em;
	position: relative;
	display: inline-block;
	left: -2em;
}


/* === 404/error === */

.error {
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.error .wrap {
	perspective: 1000px;
}

.error .error-box {
	background: #fff;
	padding: 3em;
	clip-path: polygon(0% 8%, 100% 0%, 96% 100%, 2% 93%);
}

.error div p:first-child {
	font-size: 1.5em;
}

.error .big-close {
	transform: rotate3d(0, 0.1, 0, -40deg);
	top: auto;
	bottom: -30px;
	left: auto;
	right: 2em;
	box-shadow: 10px 5px #000;
}


/* === The very important Sonic cheat === */

.sonic .home-wrap {
	padding: 60px;
}
.sonic body::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../sonic/top-left.svg'), url('../sonic/top.svg'), url('../sonic/top-right.svg'), url('../sonic/bottom-left.svg'), url('../sonic/bottom.svg'), url('../sonic/bottom-right.svg');
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: 0 0, 50% -15%, 110% 0, -8% 100%, 50% 113%, 107% 100%;
	background-size: 30% 30%;
	z-index: -1;
	animation: sonikuu 0.5s forwards;
	pointer-events: none;
}

@keyframes sonikuu {
	0% {transform: scale(2); animation-timing-function: ease-in;}
	50% {transform: scale(1); animation-timing-function: ease-out;}
	85% {transform: scale(1.05); animation-timing-function: ease-in;}
	100% {transform: scale(1);}
}

.sonic .cat h2 {
	background: #000;
	color: #fff;
	box-shadow: none !important;
	padding: 0em 0.2em;
	font-size: 2em;
	transform: scale(1, 1.2);
}

.sonic .logo {
	background: #000;
	color: #fff;
	
}

.sonic .logo svg {
	fill: #fff;
}

.sonic .animation-toggle input[type="checkbox"] {
	background: #fff;
}
.sonic .animation-toggle input[type="checkbox"]::before {
	background: #000;
	color: #fff;
	border-color: #fff;
}


/* === Blog ===*/

.blog-wrap {
	padding: 2em 10% 20vw 10%;
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	position: fixed;
	top: 0;
	left: 0;
}

.blog h1 {
	font-size: 12.5vw;
	text-transform: uppercase;
	font-weight: 800;
}

.blog ol {
	list-style: none;
	counter-reset: test;
}
	
.blog ol li:before {
	content: counter(test, decimal-leading-zero) ". ";
	counter-increment: test;
	font-size: 5vw;
	position: absolute;
	top: 4vw;
	left: 4vw;
	font-weight: 100;
	color: rgba(255,255,255,0.2);
}

.blog li a {
	display: block;
	padding: 6vw 4vw;
	font-size: 2em;
	text-align: center;
}

.blog li a::before, .blog li a::after {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.blog li a::before {
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	top: 4px;
	left: 4px;
}
.blog li a::after {
	background: #000;
	z-index: -2;
}

.blog li:nth-child(4n+1) a::before, .blog li:nth-child(4n+1) a::after {
	clip-path: polygon(0% 5%, 99% 0%, 98% 90%, 1% 100%);
}
.blog li:nth-child(4n+1) a::before {background: var(--illustration);}
.blog li:nth-child(4n+1) a {color: #fff;}

.blog li:nth-child(4n+2) a::before, .blog li:nth-child(4n+2) a::after {
	clip-path: polygon(2% 11%, 100% 0%, 99% 100%, 0% 93%);
}
.blog li:nth-child(4n+2) a::before {background: var(--animation);}
.blog li:nth-child(4n+2) a {color: #fff;}

.blog li:nth-child(4n+3) a::before, .blog li:nth-child(4n+3) a::after {
	clip-path: polygon(1% 4%, 97% 13%, 100% 92%, 2% 100%);
}
.blog li:nth-child(4n+3) a::before {background: var(--pixelart);}
.blog li:nth-child(4n+3)::before {color: rgba(0,0,0,0.2);}

.blog li:nth-child(4n+4) a::before, .blog li:nth-child(4n+4) a::after {
	clip-path: polygon(3% 9%, 100% 1%, 100% 89%, 0% 96%);
}
.blog li:nth-child(4n+4) a::before {background: #fff;}
.blog li:nth-child(4n+4)::before {color: rgba(0,0,0,0.2);}

.blog li p {
	position: absolute;
	top: 20px;
	right: -10px;
	background: #fffec6;
	color: #000;
	display: block;
	z-index: 999;
	border: 4px solid #000;
	padding: 1em;
	text-transform: uppercase;
	font-weight: 800;
	text-decoration: none;
	box-shadow: -10px 5px #000;
	opacity: 0;
	transform: translate(-5px,0);
	transition: 0.5s;
}
.blog li:hover p {
	opacity: 1;
	transform: translate(0px,0);
	transition: 0.5s;
}

.blog li p::before, .blog li p::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -40px;
	z-index: 2;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 40px solid #fffec6;
}
.blog li p::after {
	border-top: 13px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 51px solid #000;
	z-index: 1;
	top: calc(50% - 2px);
	left: -55px;
}

.blog li {
	filter: drop-shadow(0px 0px 0px #000);
	transition: 0.2s;
}
.blog li:hover {
	transform: translate(10px, -10px);
	filter: drop-shadow(-10px 10px 0px #000);
}


/* illustration gallery change */
			
			.g-ill .gallery {
				text-align: left;
				transform: none;
				padding: 2em 6%;
			    width: 100%;
			    left: 0;
			}
			
			.g-ill .h-wrap {
				background: url('../img/heading-ill.svg') no-repeat right top;
				background-size: 80% 100%;
				height: 17vh;
				width: 100%;
				margin-bottom: -6vh;			
			}
			
			.g-ill .gallery h3 {
				color: transparent;
			}
			
			.ill-grid {
			    display: grid;
			    grid-template-columns: repeat(5, 1fr);
			    grid-template-rows: repeat(8, 1fr);
			    gap: 0;
				width: 100%;
			}
			
			/*.ill-grid::before {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				background: url('img/ill-grid2.png') no-repeat 30px 30px;
				background-size: calc(100% - 60px) calc(100% - 60px);
			}*/
			
			.ill-grid div {
				min-height: 20vh;
				margin: 10px;
				background: #fff;
				transition: 0.2s;
			}
			
			.ill-grid div::after {
				content: "";
				position: absolute;
				width: 110%;
				height: 110%;
				background: #fcc;
			}
			
			.ill-grid div:hover {
				transform: scale(0.97);
				transition: 0.2s;
			}
			.ill-grid div a:hover,
			.ill-grid div a:focus {
				opacity: 0.75;
			}
			
			
			.ill-grid div a {
				display: block;
				width: 100%;
				height: 100%;
				transform: scale(0.95);
			}
			
			.ill-grid picture {
				display: block;
				width: 100%;
				height: 100%;
			}
			
			.ill-grid div img {
				position: absolute;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			    
			.ill-grid .div1 {
			    grid-row: span 2 / span 2;
				clip-path: polygon(0% 25%, 98% 18%, 82% 82%, 0% 100%);
				width: 120%;
				height: 102%;
			}
			.ill-grid .div1 a {
				clip-path: polygon(0% 25%, 98% 18%, 82% 82%, 0% 100%);
			}
			
			.ill-grid .div2 {
			    grid-column: span 3 / span 3;
				clip-path: polygon(8.5% 25%, 100% 6%, 93% 100%, 6% 57%);
				height: 142%;
				width: 101%;
			}
			.ill-grid .div2 a {
				clip-path: polygon(8.5% 25%, 100% 6%, 93% 100%, 6% 57%);
				transform: scale(0.98, 0.92);
			}
			
			.ill-grid .div3 {
			    grid-column-start: 5;
				clip-path: polygon(22% 4.5%, 100% 0%, 100% 100%, 0% 86%);
				left: -11%;
				width: 103%;
				height: 167%;
			}
			.ill-grid .div3 a {
				clip-path: polygon(22% 4.5%, 100% 0%, 100% 100%, 0% 86%);
			}
			
			.ill-grid .div4 {
			    grid-row: span 2 / span 2;
			    grid-column-start: 2;
			    grid-row-start: 2;
				clip-path: polygon(22% 0%, 91% 9%, 100% 100%, 0% 95%);
				left: -13%;
				width: 137%;
				height: 110%;
				top: -2vh;
				
			}
			.ill-grid .div4 a {
				clip-path: polygon(22% 0%, 91% 9%, 100% 100%, 0% 95%);
				transform: scale(0.955, 0.965);
			}
			
			.ill-grid .div5 {
			    grid-row: span 2 / span 2;
			    grid-column-start: 3;
			    grid-row-start: 2;
				clip-path: polygon(0% 6%, 100% 16%, 66% 100%, 10% 98%);
				left: 21%;
				width: 95%;
				height: 108%;
			}
			.ill-grid .div5 a {
				clip-path: polygon(0% 6%, 100% 16%, 66% 100%, 10% 98%);
				transform: scale(0.93, 0.96);
			}
			
			.ill-grid .div6 {
			    grid-column: span 2 / span 2;
			    grid-row: span 2 / span 2;
			    grid-column-start: 4;
			    grid-row-start: 2;
				clip-path: polygon(16% 15.5%, 100% 32%, 100% 100%, 0% 92%);
				left: -4%;
				width: 100%;
				height: 118%;
			}
			.ill-grid .div6 a {
				clip-path: polygon(16% 15.5%, 100% 32%, 100% 100%, 0% 92%);
				transform: scale(0.97, 0.955);
			}
			
			.ill-grid .div7 {
			    grid-row: span 2 / span 2;
			    grid-row-start: 3;
				clip-path: polygon(0% 15%, 100% 0%, 68% 98.5%, 0% 100%);
				left: 0%;
				width: 95%;
				height: 118%;
				top: -5vh;
			}
			.ill-grid .div7 a {
				clip-path: polygon(0% 15%, 100% 0%, 68% 98.5%, 0% 100%);
				transform: scale(0.93, 0.96);
			}
			
			.ill-grid .div8 {
			    grid-column: span 2 / span 2;
			    grid-column-start: 2;
			    grid-row-start: 4;
				clip-path: polygon(6% 9%, 93% 21%, 100% 91%, 0% 100%);
				left: -13%;
				width: 98%;
				height: 110%;
			}
			.ill-grid .div8 a {
				clip-path: polygon(6% 9%, 93% 21%, 100% 91%, 0% 100%);
				transform: scale(0.97, 0.92);
			}
			
			.ill-grid .div9 {
			    grid-column: span 2 / span 2;
			    grid-column-start: 4;
			    grid-row-start: 4;
				clip-path: polygon(0% 23.5%, 100% 43%, 100% 89%, 6% 100%);
				left: -18%;
				width: 114%;
				height: 100%;
			}
			.ill-grid .div9 a {
				clip-path: polygon(0% 23.5%, 100% 43%, 100% 89%, 6% 100%);
				transform: scale(0.975, 0.89) translate(0,2%);
			}
			
			.ill-grid .div10 {
			    grid-column: span 2 / span 2;
			    grid-row-start: 5;
				clip-path: polygon(0% 13%, 86% 10.5%, 100% 82%, 0% 100%);
				left: 0%;
				width: 48%;
				height: 179%;
			}
			.ill-grid .div10 a {
				clip-path: polygon(0% 13%, 86% 10.5%, 100% 82%, 0% 100%);
			}
			
			.ill-grid .div11 {
			    grid-column: span 2 / span 2;
			    grid-column-start: 3;
			    grid-row-start: 5;
				clip-path: polygon(3% 13%, 97% 3%, 99.5% 36%, 7.5% 100%);
				left: -59%;
				width: 140%;
				height: 144%;
			}
			.ill-grid .div11 a {
				clip-path: polygon(3% 13%, 97% 3%, 99.5% 36%, 7.5% 100%);
				transform: scale(0.98, 0.92) rotate(-0.5deg) translate(0,-1%);
			}
			
			.ill-grid .div12 {
			    grid-row: span 2 / span 2;
			    grid-column-start: 5;
			    grid-row-start: 5;
				clip-path: polygon(0% 4.5%, 100% 0%, 100% 100%, 17% 83%);
				left: -40%;
				width: 132%;
				height: 84%;
				top: -1vh;
			}
			.ill-grid .div12 a {
				clip-path: polygon(0% 4.5%, 100% 0%, 100% 100%, 17% 83%);
			}
			
			.ill-grid .div13 {
			    grid-row: span 2 / span 2;
			    grid-column-start: 5;
			    grid-row-start: 7;
				clip-path: polygon(0% 0%, 100% 11%, 100% 100%, 32% 100%);
				left: -15%;
				width: 107%;
				height: 127%;
				top: -12.3vh;
			}
			.ill-grid .div13 a {
				clip-path: polygon(0% 0%, 100% 11%, 100% 100%, 32% 100%);
				transform: scale(0.95, 0.96) translate(1%,0);
			}
			
			.ill-grid .div14 {
			    grid-column: span 2 / span 2;
			    grid-row: span 2 / span 2;
			    grid-column-start: 1;
			    grid-row-start: 6;
				clip-path: polygon(0% 38%, 84% 15%, 100% 88%, 0% 100%);
				left: 0%;
				width: 92%;
				height: 116%;
			}
			.ill-grid .div14 a {
				clip-path: polygon(0% 38%, 84% 15%, 100% 88%, 0% 100%);
				transform: scale(0.97, 0.96) translate(0,0.5%);
				
			}
			
			.ill-grid .div15 {
			    grid-row: span 2 / span 2;
			    grid-column-start: 3;
			    grid-row-start: 6;
				clip-path: polygon(3% 18%, 100% 3%, 91% 95.5%, 34% 99.5%);
				left: -41%;
				width: 94%;
				height: 105%;
				top: -1.5vh;
			}
			.ill-grid .div15 a {
				clip-path: polygon(3% 18%, 100% 3%, 91% 95.5%, 34% 99.5%);
				transform: scale(0.96, 0.96);
			}
			
			.ill-grid .div16 {
			    grid-row: span 2 / span 2;
			    grid-column-start: 4;
			    grid-row-start: 6;
				clip-path: polygon(7% 17%, 78% 2%, 100% 91%, 1% 100%);
				left: -49%;
				width: 142%;
				height: 118%;
				top: -10vh;
			}
			.ill-grid .div16 a {
				clip-path: polygon(7% 17%, 78% 2%, 100% 91%, 1% 100%);
				transform: scale(0.96, 0.96);
			}
			
			.ill-grid .div17 {
			    grid-column: span 2 / span 2;
			    grid-row-start: 8;
				clip-path: polygon(0% 40%, 100% 8.5%, 91% 100%, 0% 100%);
				left: 0%;
				width: 105%;
				height: 100%;
			}
			.ill-grid .div17 a {
				clip-path: polygon(0% 40%, 100% 8.5%, 91% 100%, 0% 100%);
				transform: scale(0.97, 0.89) translate(0,1.5%) rotate(-0.5deg);
			}
			
			.ill-grid .div18 {
			    grid-column: span 2 / span 2;
			    grid-column-start: 3;
			    grid-row-start: 8;
				clip-path: polygon(9% 21%, 93% 0%, 100% 100%, 0% 100%);
				left: 0%;
				width: 105%;
				height: 117.5%;
				top: -4vh;
			}
			.ill-grid .div18 a {
				clip-path: polygon(9% 21%, 93% 0%, 100% 100%, 0% 100%);
				transform: scale(0.97, 0.92) translate(0,1%);
			}