/* Smaller desktop screens <1000 */
@media screen and (max-width: 1000px) {

}


/* Smaller screns and mobile */

@media all and (max-width: 900px) {
	.home-wrap {
		grid-column-gap: 10px;
		grid-row-gap: 10px;
		padding: 20px;
	}
}

/*=== Landscape mobile ===*/
@media all and (orientation:landscape) and (max-width: 960px) and (max-height: 450px) {
	
	.title {
		font-size: 0.75em;
	}
	.contact .title {
		bottom: -1em;
	}
	.c-wrap a, .c-wrap div {
		font-size: 1em;
	}
	
	.rotate-me {
		/*transform: rotate(-6deg) scale(0.7);*/
	}
	
	.g-rotate {
		top: 40%;
	}
	
	.g-pixel .g-item, .g-pixel .g-group {
		height: 50vh;
		width: 50vh;
	}
	.g-pixel .g-group .g-item {
		width: calc(25vh - 10px);
		height: calc(25vh - 10px);
	}
	.g-pixel .gallery h3 {font-size: 10vh;}
	
	.g-design .gallery h3 {
		transform: rotate(-90deg) translate(-80px,-86vh);
		font-size: 10vh;
	}
	.g-design .gallery {
		padding-top: 70px;
	}
	.g-design .gallery h3 {
		transform: rotate(-90deg) translate(-80px,-87vh);
		font-size: 12vh;
	}
	
	.big-close-wrap {
		perspective: 500px;
		perspective-origin: 100% 100%;
		width: 23em;
	}
	
	.big-close {	top: -7px; left: -5px;}
	
	.a-pixel .gallery {
		width: 210%;
	}
	
	.g-about .gallery {
		padding: 2em 5%;
	}
	.ga-1 .about-img {
		width: 25%;
	}
	.ga-1 div {
		width: 75%;
	}
	.ga-1 div p:first-child {
		font-size: 1.1em;
	}
	.ga-3 ul li img {
		width: 120px;
		height: 50px;
	}
	
}


/*===== Mobile =====*/

@media screen and (max-width: 767px) and (orientation:portrait) {
	
	.home-wrap {
		grid-template-rows: 1fr 1fr 1fr auto auto;
	}
	
	.rotate-me {
		/*transform: rotate(-3deg);
		align-items: center;*/
		left: 20px;
	}
	.logo {
		clip-path: url('#bm-logo');
		height: 11%;
		width: 51%;
		right: -1%;
	}
	.logo::before {background-image: url('../img/nav-borders.svg#sm-logo');}

	.animation-toggle {
		font-size: 0.65em;
		line-height: 0.6em;
		padding: 0 0 5px 0;
	}
	.animation-toggle input[type="checkbox"] {
		font-size: 1em;
	}
	.animation-toggle label {
		/*display: block;*/
		left: 2em;
	}
	.title {
		font-size: 0.75em;
	}
	
	.illustration {
		height: 103%;
		width: 100%;
	}
	.illustration .background {clip-path: url('#bm-ill');}
	.illustration .background::before {background-image: url('../img/nav-borders.svg#sm-ill');}
	
	.animation {
		top: 19%;
		height: 79%;
		width: 100%;
		right: 0;
	}
	.animation .background {clip-path: url('#bm-ani');}
	.animation .background::before {background-image: url('../img/nav-borders.svg#sm-ani');}
	
	.a-pixel .home-wrap {transform: scale(7) rotate(-90deg) translate(24%, -4%);}
	.pixelart {
		grid-row: span 1 / span 1;
		grid-column: span 2 / span 2;
		top: -5%;
		height: 104%;
		width: 100%;
	}
	.pixelart .background {clip-path: url('#bm-pixel');}
	.pixelart .background::before {background-image: url('../img/nav-borders.svg#sm-pixel');}
	.pixelart .title {bottom: 10%;}
	
	.a-design .home-wrap {transform: scale(6) rotate(180deg) translate(-20%, -5%);}
	.design {
		grid-column: span 2 / span 2;
		grid-row: span 1 / span 1;
		grid-row-start: 3;
		grid-column-start: 3;
		top: -11%;
		height: 112%;
		width: 100%;
	}
	.design .background {clip-path: url('#bm-design');}
	.design .background::before {background-image: url('../img/nav-borders.svg#sm-design');}
	.design .title {	
		transform: rotate3d(0, -1, 0, 40deg) translate(0, 20%);
		bottom: 20%;
		left: auto;
		right: -10%;
		text-align: right;
	}
	.design.cat h2 {box-shadow: 1em 0.5em 0px #000;}
	
	.a-about .home-wrap {transform: scale(12) rotate(-90deg) translate(-16%, -22%);}
	.about {
		grid-column: span 4 / span 4;
		grid-column-start: 1;
		grid-row-start: 4;
		height: 14vh;
		top: 0;
		right: 0;
		width: 100%;
	}
	.about .background {clip-path: url('#bm-about');}
	.about .background::before {background-image: url('../img/nav-borders.svg#sm-about');}
	
	.contact {
		grid-column: span 4 / span 4;
		grid-column-start: 1;
		grid-row-start: 5;
		height: 14vh;
		top: 0;
		right: 0;
		width: 100%;
	}
	.contact .background, .c-wrap {clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 0.5% 100%);}
	.contact .background-border {
		background: url('../img/nav-borders.svg#sm-contact') no-repeat left top;
		clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 0.5% 100%);
		background-size: 100% 100%; /* For FF */
	}

	.cat h2 {font-size: 1.1em;}
	
	.big-close-wrap {
		perspective: 500px;
		perspective-origin: 100% 100%;
		width: 23em;
	}
	
	.big-close {	top: -7px; left: -5px;}
	
	.gallery {
		width: 100%;
		padding: 4em 0 20vw 0;
	}
	.gallery h3 {
		font-size: 12vw;
	}
	
	.g-ill .gallery {
		padding: 4em 0 50vh 0;
	}
	.g-2 {
		width: 100%;
	}
	.g-2 div {
		height: 25vw;
	}
	
	.g-ani .ga-2 {
		padding-top: 5em;
	}
	.ga-2 ul {column-count: 1;}
	
	.g-design .gallery {
		padding: 120px 5% 20vw 11vh;
	}
	.g-design .gallery h3 {
		font-size: 8vh;
		width: 75vh;
		transform: rotate(-90deg) translate(-115px,-75vh);
	}
	.g-design .g-group {
		padding: 0 0 50px 0;
	}
	.gd-1 div {width: calc(34% - 15px);}
	.gd-3 .g-item {height: 35vh;}
	.gd-4 {width: 100%;}
	
	
	.ga-1 {
		flex-direction: column;
	}
	.ga-1 .about-img {
		height: 30vh;
		width: 100%;
	}
	.ga-1 .about-img::before, .ga-1 .about-img::after {
		border: none;
	}
	.ga-1 .about-img::after {
		border: none;
	}
	.ga-1 div {
		width: 100%;
		clip-path: polygon(0 3%, 100% 0%, 96% 95%, 0 100%);
		padding: 3em;
	}
	.ga-1 div p:first-child {font-size: 1.1em;}
	.ga-2, .ga-3, .ga-4 {padding: 10% 3em;}
	.ga-3 ul li img {
		width: 100px;
		height: 50px;
		margin: 15px;
	}
	.ga-3 ul {
		margin: 0;
	}
	
	.g-pixel .g-item,
	.g-pixel .g-group {
		height: 70vw;
		width: 70vw;
	}
	.g-pixel .g-group .g-item {
		width: calc(35vw - 10px);
		height: calc(35vw - 10px);
	}
	
	.blog ol li:before {	font-size: 1em; top: calc(50% - 0.5em);}
	.blog li a {
		padding: 1.25em;
		font-size: 1.25em;
	}
	.blog li p {	display: none;}
	
	
	/* illustration gallery change */
	
				.g-ill .gallery {
					transform: scale(1,0.7);
					transform-origin: 0 0;
					height: 190%;
				}
				
				.ill-grid {
					grid-template-columns: repeat(3, 1fr);
					grid-template-rows: repeat(12, 1fr);
					padding: 10px 30px 10px 10px; /* fudge for margin */
				}
				
				/*.ill-grid::before {
					background-size: calc(100% - 10px) calc(92% - 10px);
				}
				.ill-grid::before {
					content: "";
					position: absolute;
					width: calc(100% - 40px);
					height: 100%;
					background: none;
					border: 20px solid rgba(0,0,0,0.2);
				}*/
				
				.g-ill .h-wrap {
					height: 13vh;
					width: 90%;
					margin: 3vh auto -6vh auto;
				}
				
				/* If you're hacky and you know it clap your hands */
				.ill-grid div img {
					transform: scale(1,1.4);
					height: 75%;
					top: 10%;
				}
				
				.ill-grid .div1 {
				    grid-row: span 2 / span 2;
					clip-path: polygon(0% 18%, 97% 12%, 80% 80%, 0% 98%);
					width: 104%;
					height: 97%;
				}
				.ill-grid .div1 a {
					clip-path: polygon(0% 18%, 97% 12%, 80% 80%, 0% 98%);
					transform: scale(0.92, 0.95);
				}
				
				.ill-grid .div2 {
				    grid-column: span 2 / span 2;
					clip-path: polygon(5% 18%, 100% 0%, 100% 98%, 2% 57%);
					height: 122%;
					width: 100%;
					left: 0;
				}
				.ill-grid .div2 a {
					clip-path: polygon(5% 18%, 100% 0%, 100% 98%, 2% 57%);
					transform: scale(0.96, 0.92);
				}
				
				.ill-grid .div3 {
				    grid-row: span 2 / span 2;
				    grid-column-start: 2;
				    grid-row-start: 2;
					width: 116%;
					height: 110%;
					left: -25%;
					top: -5vh;
					clip-path: polygon(24% 0%, 90% 9%, 97% 100%, 3% 95%);
				}
				.ill-grid .div3 a {
					clip-path: polygon(24% 0%, 90% 9%, 97% 100%, 3% 95%);
					transform: scale(0.92, 0.97);
				}
				
				.ill-grid .div4 {
				    grid-row: span 2 / span 2;
				    grid-column-start: 3;
				    grid-row-start: 2;
					clip-path: polygon(0% 0%, 100% 14%, 100% 100%, 7% 95%);
					left: -10%;
					width: 110%;
					height: 104%;
					top: 0vh;
				}
				.ill-grid .div4 a {
					clip-path: polygon(0% 0%, 100% 14%, 100% 100%, 7% 95%);
					transform: scale(0.92, 0.965);
				}
				
				.ill-grid .div5 {
				    grid-row: span 2 / span 2;
				    grid-row-start: 3;
					grid-column-start: 1;
					clip-path: polygon(0% 15%, 100% 0%, 67% 98%, 0% 99.5%);
					left: 0;
					width: 84%;
					height: 119%;
					top: -8vh;
				}
				.ill-grid .div5 a {
					clip-path: polygon(0% 15%, 100% 0%, 67% 98%, 0% 99.5%);
					transform: scale(0.89, 0.965);
				}
				
				.ill-grid .div6 {
				    grid-column: span 2 / span 2;
				    grid-column-start: 2;
				    grid-row-start: 4;
					clip-path: polygon(4.5% 23%, 100% 39%, 100% 90%, 0% 100%);
					left: -16%;
					width: 116%;
					height: 66%;
					top: -8vh;
				}
				.ill-grid .div6 a {
					clip-path: polygon(4.5% 23%, 100% 39%, 100% 90%, 0% 100%);
					transform: scale(0.965, 0.925) translate(0,1%);
				}
				
				.ill-grid .div7 {
					grid-row: 5/ span 1;
					clip-path: polygon(0% 7%, 77% 3%, 100% 69.5%, 0% 98%);
					left: 0%;
					width: 120%;
					height: 170%;
					top: 0vh;
				}
				.ill-grid .div7 a {
					clip-path: polygon(0% 7%, 77% 3%, 100% 69.5%, 0% 98%);
					transform: scale(0.92, 0.94) translate(0,-0.5%);
				}
				
				.ill-grid .div8 {
				    grid-column: span 2 / span 2;
				    grid-row-start: 5;
					grid-column-start: 2;
					clip-path: polygon(3% 10%, 100% 0%, 100% 40%, 16% 95%);
					left: 0%;
					width: 100%;
					height: 129%;
					top: -2vh;
				}
				.ill-grid .div8 a {
					clip-path: polygon(3% 10%, 100% 0%, 100% 40%, 16% 95%);
					transform: scale(0.95, 0.91) translate(0,-1%);
				}
				
				.ill-grid .div9 {
					grid-row: span 2 / span 2;
					grid-column: 1;
					grid-row-start: 6;
					clip-path: polygon(0% 31%, 100% 0, 88% 86%, 0% 99%);
					left: 0;
					width: 164%;
					height: 109%;
					top: 2vh;
				}
				.ill-grid .div9 a {
					clip-path: polygon(0% 31%, 100% 0, 88% 86%, 0% 99%);
					transform: scale(0.95, 0.95);
				}
				
				.ill-grid .div10 {
				    grid-column: span 2 / span 2;
					grid-row: span 2 / span 2;
					grid-row-start: 6;
					grid-column-start: 2;
					clip-path: polygon(38% 24%, 100% 3%, 100% 88%, 29% 100%);
					left: 0%;
					width: 100%;
					height: 124%;
					top: -12vh;
				}
				.ill-grid .div10 a {
					clip-path: polygon(38% 24%, 100% 3%, 100% 88%, 29% 100%);
					transform: scale(0.95, 0.96) translate(1%,0);
				}
				
				.ill-grid .div11 {
				    grid-column: span 2 / span 2;
				    grid-row-start: 8;
					clip-path: polygon(0% 39%, 100% 0%, 93% 100%, 0% 100%);
					left: 0%;
					width: 87%;
					height: 90%;
				}
				.ill-grid .div11 a {
					clip-path: polygon(0% 39%, 100% 0%, 93% 100%, 0% 100%);
					transform: scale(0.94, 0.90) translate(0%,1%);
				}
				
				.ill-grid .div12 {
				    grid-column-start: 3;
					grid-row-start: 8;
					clip-path: polygon(10% 21%, 103% 0%, 100% 100%, 0% 100%);
					left: -25%;
					width: 125%;
					height: 59%;
					top: -6vh;
				}
				.ill-grid .div12 a {
					clip-path: polygon(10% 21%, 103% 0%, 100% 100%, 0% 100%);
					transform: scale(0.93, 0.93) translate(0%,0.5%);
				}
				
				.ill-grid .div13 {
				    grid-column: span 2 / span 2;
				    grid-row-start: 9;
					grid-column-start: 1;
					clip-path: polygon(0% 0%, 96% 0%, 100% 56%, 0% 100%);
					left: 0;
					width: 100%;
					height: 61%;
					top: 0;
				}
				.ill-grid .div13 a {
					clip-path: polygon(0% 0%, 96% 0%, 100% 56%, 0% 100%);
					transform: scale(0.95, 0.93) translate(0%,-1%);
				}
				
				.ill-grid .div14 {
				    grid-row: span 2 / span 2;
				    grid-column-start: 3;
				    grid-row-start: 9;
					clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 19% 81%);
					left: 3%;
					width: 97%;
					height: 97%;
				}
				.ill-grid .div14 a {
					clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 19% 81%);
					transform: scale(0.9, 0.95) translate(0%,-1%);
				}
				
				.ill-grid .div15 {
				    grid-row: span 2 / span 2;
				    grid-row-start: 10;
					grid-column-start: 1;
					clip-path: polygon(0% 14%, 100% 0%, 94% 95%, 0% 100%);
					left: 0%;
					width: 108%;
					height: 106%;
					top: 0.5vh;
				}
				.ill-grid .div15 a {
					clip-path: polygon(0% 14%, 100% 0%, 94% 95%, 0% 100%);
					transform: scale(0.91, 0.95) translate(0%,0%);
				}
				
				.ill-grid .div16 {
				    grid-row: span 2 / span 2;
				    grid-row-start: 10;
					grid-column-start: 2;
					clip-path: polygon(18% 9%, 82% 0%, 100% 95%, 10% 100%);
					left: 0;
					width: 123%;
					height: 113%;
					top: -5vh;
				}
				.ill-grid .div16 a {
					clip-path: polygon(18% 9%, 82% 0%, 100% 95%, 10% 100%);
					transform: scale(0.91, 0.96) translate(0%,0%);
				}
				
				.ill-grid .div17 {
				    grid-row: span 2 / span 2;
				    grid-column-start: 3;
				    grid-row-start: 11;
					clip-path: polygon(4% 0%, 100% 15%, 100% 100%, 33% 100%);
					left: 19%;
					width: 81%;
					height: 117%;
					top: -7.5vh;
				}
				.ill-grid .div17 a {
					clip-path: polygon(4% 0%, 100% 15%, 100% 100%, 33% 100%);
					transform: scale(0.87, 0.96) translate(1%,0.5%);
				}
				
				.ill-grid .div18 {
				    grid-column: span 2 / span 2;
				    grid-row-start: 12;
					clip-path: polygon(0% 24%, 96% 0%, 100% 100%, 0% 100%);
					left: 0%;
					width: 117%;
					height: 100%;
					top: 0vh;
				}
				.ill-grid .div18 a {
					clip-path: polygon(0% 24%, 96% 0%, 100% 100%, 0% 100%);
				}
	
	
}


/* Huge screens 1400> */
@media screen and (min-width: 1400px) {

}

/* logo magic */

@media (min-aspect-ratio: 1/3) {
  .rotate-me {transform: rotate(-2deg); align-items: center;}
}

@media (min-aspect-ratio: 2/3) {
  .rotate-me {transform: rotate(-20deg) translate(16px,-5px);}
}
@media (min-aspect-ratio: 2/3) and (max-width: 767px) {
	.rotate-me {transform: rotate(-2deg); align-items: center;}
}

@media (min-aspect-ratio: 3/3) {
  .rotate-me {transform: rotate(-13deg);}
}

@media (min-aspect-ratio: 3/2.5) {
  .rotate-me {transform: rotate(-9deg); align-items: baseline; }
}

@media (min-aspect-ratio: 3/2) {
  .rotate-me {transform: rotate(-8deg);}
}
@media (min-aspect-ratio: 3/2) and (max-height: 500px) {
	.rotate-me {transform: rotate(-8deg) scale(0.7) translate(-10px, 7px); align-items: baseline;}
}


@media (min-aspect-ratio: 3/1.5) {
  .rotate-me {transform: rotate(-7deg); align-items: baseline;}
}
@media (min-aspect-ratio: 3/1.5) and (max-height: 500px) {
  .rotate-me {transform: rotate(-6deg) scale(0.7) translate(-10px, 10px);}
}

@media (min-aspect-ratio: 3/1) {
  .rotate-me {transform: rotate(-5deg);}
}

@media screen and (max-height: 900px) {.logo svg {height: 3em;}}
@media screen and (max-height: 750px) {.logo svg {height: 2.7em;}}
@media screen and (max-height: 650px) {.logo svg {height: 2.3em;}}
@media screen and (max-height: 575px) {.logo svg {height: 1.9em;}}
@media screen and (max-height: 500px) {.logo svg {height: 1.75em;} .rotate-me {}
}
@media screen and (max-height: 400px) {.logo svg {height: 1.5em;}}


/* iPhone notch */
@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}