@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Iceland&display=swap');

/* Start Mobile (default) */

:root {
	font-size: 12px;
	--nav-height: 5rem;
	--nav-top-margin: 3rem;
	--background-color: #2c313d;
	--background-color-ligher: #41444d;
	--primary-color: #007ea7;
	--secondary-color: #161d24;
	--title-height: calc(var(--nav-top-margin) + .125 * var(--nav-top-margin));
}

* {
	font-family: "Inter", sans-serif, Arial, Helvetica;
	box-sizing: border-box;
	color: white;
	margin: 0;
	padding: 0;
	border: none;
}

html {
	background-color: var(--background-color);
	min-height: 100vh;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.main-portrait {
	margin-bottom: calc(var(--title-height) * -1);
	height: fit-content;
}

.main-portrait img {
	width: 100%;
	display: block;
}

h1#title {
	position: sticky;
	top: -1px;
	left: -1px;
	display: inline-block;
	padding: 0 1rem;
	padding-right: 3rem;
	padding-left: 1.5rem;
	line-height: var(--title-height);
	min-width: fit-content;
	width: 19rem;
	z-index: 8;

	background-color: hsla(195, 100%, 33%, 0.75);
	transition: background-color .5s ease, width 1s ease;
	clip-path: polygon(0 0, calc(100% - 2rem) 0%, 100% 100%, 0% 100%);
}

#title.stuck {
	background-color: hsla(195, 100%, 33%, 1);
	width: calc(100vw - 5.5rem - 0rem);
}


.site-nav {
	width: 100vw;

	position: fixed;
	top: 0;
	left: 0;

	z-index: 10;

}

p {
	margin-bottom: .5rem;
}

#navInterceptor {
	position: fixed;
	top: -1px;
	left: -10vw;

	height: var(--title-height);
	width: 0rem;

	z-index: 10;

	transition: width 1s ease;

	background-color: var(--primary-color);
	clip-path: polygon(0 0, calc(100% - 2rem) 0%, 100% 100%, 0% 100%);
}

#mainNav.open #navInterceptor {
	width: 100vw;
}

#navInterceptor2 {
	position: fixed;
	top: 0;
	left: 0;

	height: 0;
	width: 100vw;

	z-index: 1;

	transition: height 1s ease;

	opacity: .7;
}

#navInterceptor2.open {
	height: calc(var(--title-height) / 1.15);
}

#navContainer {
	position: fixed;
	top: -1px;
	right: -1px;

	width: 5.5rem;
	/* Animation overrides this */
	height: var(--title-height);

	z-index: 11;
	overflow: hidden;

	padding: 0 .33rem 0 1.33rem;

	background-color: var(--primary-color);
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 2rem 100%);

	animation: shrink .75s ease both;
}

#mainNav.open #navContainer {
	width: 100vw;
	animation: expand .75s ease both;
}

@keyframes expand {
	0% {
		padding-left: 5rem;
		width: 5rem;
	}

	50% {
		padding-left: 5rem;
	}

	90% {
		padding-left: 3rem;
		width: 100vw;
	}

	100% {
		width: 100vw;
	}
}

@keyframes shrink {
	0% {
		width: 100vw;
	}

	50% {
		width: 100vw;
	}

	100% {
		width: 5.5rem;
	}
}

/* SVG */

#navButton {
	height: 100%;
	float: right;
}

#bar1,
#bar2 {
	transform-origin: center;
	transition: transform 0.3s ease-in-out;
}

#mainNav.open #bar1 {
	transform: rotate(45deg) translate(0, 70px);
}

#mainNav.open #bar2 {
	transform: rotate(-45deg) translate(0, -70px);
}

/* END SVG */

.vibratingColor {
	background: linear-gradient(-45deg, #6c4cbc, #c82661, #b8ac08, #07a032);
	background-size: 500rem 200rem;
	animation: gradient 10s linear infinite;
}

@keyframes gradient {
	0% {
		background-position: 100% 100%;
	}

	12.5% {
		background-position: 50% 100%;
	}

	25% {
		background-position: 0% 100%;
	}

	37.5% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 0% 0%;
	}

	62.5% {
		background-position: 50% 0%;
	}

	75% {
		background-position: 100% 0%;
	}

	87.5% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 100% 100%;
	}
}

.nav-bar {
	list-style-type: none;

	display: inline-flex;
	width: calc(100% - var(--nav-height));
	height: 100%;
	overflow: hidden;

	flex-direction: row;
	align-items: center;
}

#mainNav.open :is(a, p.disabled-item) {
	opacity: 1;
}

.nav-bar :is(a, p.disabled-item) {
	text-decoration: unset;
	margin: 0;
	padding: 0;

	cursor: default;

	margin-right: 1rem;
	font-size: 1.3rem;

	opacity: 0;
	transition: opacity 1s ease;

	font-size: 1.5rem;
	font-family: "Iceland", Arial, Helvetica, sans-serif;
}

.nav-bar a:visited {
	text-decoration: unset;
	color: white;
}

.disabled-item {
	user-select: none;
	cursor: default;
}

a {
	-webkit-user-drag: none;
	user-select: none;
}

a[selectable] {
	user-select: text !important;
}

.nav-bar a:hover {
	cursor: pointer;
}

p.disabled-item {
	color: #cacaca !important;
	text-decoration: line-through !important;
}

.last-item {
	margin-right: 0 !important;
}

.site-nav a:visited {
	color: inherit;
}

.content {
	width: 100%;
	padding: 1rem;
}

p {
	font-size: 1rem;
}

h1 {
	font-size: 2.5rem;
	font-weight: normal;
	font-family: "Iceland", Arial, Helvetica, sans-serif;
}

h2 {
	font-size: 2.25rem;
	font-weight: normal;
	font-family: "Iceland", Arial, Helvetica, sans-serif;
}

h3 {
	font-size: 1.75rem;
	font-weight: normal;
	font-family: "Iceland", Arial, Helvetica, sans-serif;
}

h4 {
	font-size: 1.5rem;
	font-weight: normal;
	font-family: "Iceland", Arial, Helvetica, sans-serif;
}

h5 {
	font-size: 1rem;
	font-weight: normal;
	font-family: "Iceland", Arial, Helvetica, sans-serif;
}

.card-collection {
	margin-top: 1rem;
	margin-bottom: 1rem;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-items: center;
	justify-content: center;
	gap: 1rem;
}

.card-collection .feature-card {
	margin: 0;

	clip-path: none;
}

.section-title {
	width: 100%;
	padding-left: 1.5rem;
	background-color: hsla(195, 100%, 33%, 0.75);

	/* If this is changed, the clip path will have to be adjusted so the angle is correct, DEFAULT: 2.5rem */
	line-height: 2.5rem;

	/* the 3rd value will rem is calibrated to the line height. DEFAULT: calc(100% - 6.1rem) */
	clip-path: polygon(0 0, calc(100% - 6.1rem) 0, calc(100% - 4.5rem) 100%, 0% 100%);
}

.link-card:hover {
	cursor: pointer;
	opacity: .6;
}

.feature-card {
	display: inline-block;
	position: relative;

	margin-bottom: 1rem;
	/* The .feature-title clip-path is calibrated to this top margin. DEFAULT: 1rem */
	margin-top: 1rem;

	clip-path: polygon(calc(100% - 4rem) 0, 0 0, 0 calc(100% - 6rem), 4rem 100%, 100% 100%, 100% 6rem);
}

.feature-card img {
	display: block;
	width: 100%;
}

.feature-card :is(h1, h2, h3, h4, h5) {
	position: absolute;
	bottom: 0;
	right: 0;

	text-align: right;

	padding-right: 1.5rem;
	line-height: 2.5rem;
	width: 100%;

	background-color: hsla(195, 100%, 33%, 0.75);
}


.contact-card {
	margin-top: 1rem;
	background-color: var(--background-color-ligher);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.contact-card h3 {
	padding: .5rem 1rem;
	width: 100%;
	background-color: var(--secondary-color);
	clip-path: polygon(0 0, calc(100% - .5rem) 0, calc(100% - 4rem) 100%, 0% 100%);
}

.contact-card img {
	height: 5rem;
	margin: .5rem 1rem;

	padding: .5rem;
	background: radial-gradient(circle, white 0%, white 60%, var(--background-color-ligher) 70%);
	border-radius: 20rem;
}


footer {
	margin-top: auto;
	padding: 2rem 1rem;
	background-color: rgba(0, 0, 0, 0.25);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

footer :is(a, p.disabled-item) {
	color: white;
	text-decoration: none;
}

a[aria-current="page"],
a:hover {
	text-decoration: underline !important;
}

footer address {
	font-style: normal;
	margin-bottom: .5rem;
}

footer small {
	opacity: .75;
}

/* End Mobile */



/* Start Tablets */

@media (min-width: 700px) {
	:root {
		font-size: 14px;
	}
}

/* End Tablets */



/* Start (>=720p) Desktops */

@media (min-width: 1100px) {
	:root {
		font-size: 10px;
	}
}

/* Start 720p Desktops */



/* Start (>=1080p) Desktops */

@media (min-width: 1700px) {
	:root {
		font-size: 16px;
	}
}

/* Start 1080p Desktops */



/* Start (>=1440p) Desktops */

@media (min-width: 2400px) {
	:root {
		font-size: 21px;
	}
}

/* Start 1440p Desktops */



/* 4k and up is mostly redundant due to OS scaling, but this should catch any monitors that aren't scaled */
/* Start (>=4k) Desktops */

@media (min-width: 3600px) {
	:root {
		font-size: 32px;
	}
}

/* End 4k Desktops */



/* Start (>=8k) Desktops */

@media (min-width: 7200px) {
	:root {
		font-size: 64px;
	}
}

/* End 8k Desktops */