@import url("animations.css");
@import url("css-assets.css");
@import url("css-animations.css");
@import url("expand.css");
@import url("layout.css");
@import url("reset.css");
@import url("root.css");
@import url("typography.css");
@import url("variables.css");

html {
	overflow-x: hidden !important;
	scroll-behavior: smooth;
	cursor: crosshair;
	transition: 300ms ease-in-out;
}

body {
	overflow-x: hidden !important;

	background-color: var(--grey);
	color: var(--white);
	width: 100vw;
}

img {
	filter: var(--bnw);
}

img:hover {
	transition: 500ms ease-in-out;
	filter: none;
}

.sticky {
	position: sticky;
	top: 3em;
}

#portfolio-rrc img,
#portfolio-commissions img,
#portfolio-illustration img {
	border: 1px var(--white) solid;
}

.borderless {
	border: none;
}

@media (max-width: 525px) {
	/*--. ݁₊ ⊹ . ݁ ⟡ ݁ . ⊹ ICONS and IMGS  ⊹ . ݁ ⟡ ݁ . ⊹ ₊ ݁. ݁.--*/

	.invisible {
		opacity: 0;
		height: 0px;
	}

	.logo {
		width: 3em;
		height: 3em;
		margin: 0.5em;
	}

	.icons {
		flex-direction: row;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-items: flex-start;
	}

	.small-icons {
		height: 0px;
	}

	.med-icons {
		width: 50px;
		height: 50px;
		margin: 0.5em;
	}

	.lrg-icons {
		width: 75px;
		height: 75px;
		margin: 0.5em;
	}

	.small-icons,
	.med-icons,
	.lrg-icons {
		filter: grayscale(100%);
	}

	.small-icons:hover,
	.med-icons:hover,
	.lrg-icons:hover {
		filter: none;
		border-radius: 50%;
	}

	.seymour-thumbnail {
		object-fit: cover;
		width: 125px;
		height: 125px;
		border: var(--grey) solid;
		border-radius: 50%;
		filter: grayscale(100);
	}

	.seymour-thumbnail:hover {
		filter: none;
	}
}

@media (min-width: 525px) {
	/*--. ݁₊ ⊹ . ݁ ⟡ ݁ . ⊹ ICONS and IMGS  ⊹ . ݁ ⟡ ݁ . ⊹ ₊ ݁. ݁.--*/
	.invisible {
		opacity: 0;
	}

	.logo {
		width: 3em;
		height: 3em;
		margin: 0.5em;
	}

	.icons {
		flex-direction: row;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-items: flex-start;
	}

	.small-icons {
		width: 25px;
		height: 25px;
		margin: 0.5em;
	}

	.med-icons {
		width: 50px;
		height: 50px;
		margin: 0.5em;
	}

	.lrg-icons {
		width: 75px;
		height: 75px;
		margin: 0.5em;
	}

	.small-icons,
	.med-icons,
	.lrg-icons {
		filter: grayscale(100%);
	}

	.small-icons:hover,
	.med-icons:hover,
	.lrg-icons:hover {
		filter: none;
		border-radius: 50%;
	}

	.gallery-img-3 {
		width: 90vw;
		height: calc(90vw);
	}

	.seymour-thumbnail {
		object-fit: cover;
		width: 125px;
		height: 125px;
		border: var(--grey) solid;
		border-radius: 50%;
		filter: grayscale(100);
	}

	.seymour-thumbnail:hover {
		filter: none;
	}
}

@media (min-width: 800px) {
	/*--. ݁₊ ⊹ . ݁ ⟡ ݁ . ⊹ ICONS and IMGS  ⊹ . ݁ ⟡ ݁ . ⊹ ₊ ݁. ݁.--*/
	.invisible {
		opacity: 0;
	}

	.logo {
		width: 3.75em;
		height: 3.75em;
		margin: 0.5em;
	}

	.icons {
		flex-direction: row;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-items: flex-start;
	}

	.small-icons {
		display: none;
	}

	.med-icons {
		width: 50px;
		height: 50px;
		margin: 0.5em;
	}

	.lrg-icons {
		width: 75px;
		height: 75px;
		margin: 0.5em;
	}

	.small-icons,
	.med-icons,
	.lrg-icons {
		filter: grayscale(100%);
	}

	.small-icons:hover,
	.med-icons:hover,
	.lrg-icons:hover {
		filter: none;
		border-radius: 50%;
	}

	.gallery-img-3 {
		width: 125px;
		height: 125px;
	}

	.gallery-img-4 {
		width: 225px;
		height: 225px;
	}

	.seymour-thumbnail {
		object-fit: cover;
		width: 125px;
		height: 125px;
		border: var(--grey) solid;
		border-radius: 50%;
		filter: grayscale(100);
	}

	.seymour-thumbnail:hover {
		filter: none;
	}
}

@media (min-width: 1000px) {
	/*--. ݁₊ ⊹ . ݁ ⟡ ݁ . ⊹ ICONS and IMGS  ⊹ . ݁ ⟡ ݁ . ⊹ ₊ ݁. ݁.--*/
	.invisible {
		opacity: 0;
	}

	.logo {
		width: 3.75em;
		height: 3.75em;
		margin: 0.5em;
	}

	.icons {
		flex-direction: row;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-items: flex-start;
	}

	.small-icons {
		display: flex;
		width: 25px;
		height: 25px;
	}

	.med-icons {
		width: 50px;
		height: 50px;
		margin: 0.5em;
	}

	.lrg-icons {
		width: 75px;
		height: 75px;
		margin: 0.5em;
	}

	.small-icons,
	.med-icons,
	.lrg-icons {
		filter: grayscale(100%);
	}

	.small-icons:hover,
	.med-icons:hover,
	.lrg-icons:hover {
		filter: none;
		border-radius: 50%;
	}

	.gallery-img-3 {
		width: 125px;
		height: 125px;
	}

	.gallery-img-4 {
		width: 225px;
		height: 225px;
	}

	.seymour-thumbnail {
		object-fit: cover;
		width: 125px;
		height: 125px;
		border: var(--grey) solid;
		border-radius: 50%;
		filter: grayscale(100);
	}

	.seymour-thumbnail:hover {
		filter: none;
	}
}