@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@font-face {
	font-family: 'ElektraText';
	src: url('/assets/font/ElektraTextPro.otf') format('opentype');
}

:root {
	--black: #07080a;
	--primary-grey: #1e1e1e;
	--mid-grey: #434550;
    --light-grey: #888;
	--white: #fff;
    --purple-step-2: hsl(259, 82%, 36%); 
 	--primary-purple: #6924FF;
    --purple-step-0:  hsl(259, 100%, 83%);
    --purple-step--1: hsl(259deg 100% 94.69%);
	--title: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
	--subtitle: clamp(2rem, 1.6522rem + 1.7391vw, 3rem);
	--subheading: clamp(1.125rem, 0.9946rem + 0.6522vw, 1.5rem);
}

@media (prefers-color-scheme: light) {
	:root {
		--black: #FFF;
		--primary-grey: #e1e1e1;
		--white: #000;
		--primary-grey: hsl(0, 0%, 88.2%);
		--mid-grey: hsl(230.8, 8.8%, 71.2%);
		--light-grey: hsl(0, 0%, 46.7%);
	}
	html header, html footer, :is(header, footer) [href]:any-link:not([class]) {
		color: var(--black);
		background: var(--white);
	}
	a[class^="fake-btn"]:any-link {
		color: var(--black);
		background: var(--primary-purple);
	}
	.feature-card img {
		filter: invert(1);
	}
}

* {
	margin: 0;
	box-sizing: border-box;
}

html {
	min-height: 100vh;
	font-family: "Space Grotesk", serif;
	font-weight: 400;
	font-size: 1rem;
}
body {
	background-color: var(--primary-grey);
	color: var(--white);
	height: 100vh;
	
}

h1, h2, h3, h4, h5 {
	font-weight: normal;
}

h1 {font-size: var(--title);}
h2 {font-size: var(--subtitle);}
h3 {font-size: var(--subheading);}

p {
	margin: 1.25rem 0;
}

a:any-link,
header a {
	color: var(--white);
	text-underline-offset: 0.2em;
}

.site-container {
	padding: 0 1.25rem;
}

.inner-wrap {
	padding: 2.25rem;
}


header,
footer {
	display: flex;
	justify-content: center;
	width: 100%;
}

.header {
	display: flex;
	justify-content: space-between;
    align-items: center;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.header,
.footer {
	max-width: 1680px;
	width: 100%;
}

header nav {
	display: flex;
	gap: 1rem;
	align-items: center;
}

header nav a[href]:is(:hover, :focus) {
	color: rgb(224 224 224);
	background-color: rgb(0 0 0 / 0.75);
	filter: invert(1);
}

header .logo {
	max-width: 11rem;
	width: 100%;
}

section {
	padding: 3rem 2.25rem;
}

img {
	width: 100%;
}

p:first-child {
	margin-top: 0;
}

.two-column {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1.5em;
}

.two-column__descriptor {
	font-size: 1.25em;
}



/* Top hero */
.leadoff {
	text-align: center;
}

.fake-btn__primary {
	display: inline-block;
	background-color: var(--primary-purple);
	padding: .8125em 1.5em; /* 58 height */
	border-radius: 36px;
	font-size: 1.2em;
}

.fake-btn__secondary {
	display: inline-block;
	background-color: var(--primary-purple);
	padding: .625em 1.25em; /* 44 height */
	border-radius: 24px;
	max-width: fit-content;
    width: 100%;
}

.fake-btn__outline {
	display: inline-block;
	border: 2px solid var(--primary-purple);
	padding: .625em 1.25em;
	border-radius: 36px;
	height: fit-content;
	max-width: 6em;
	width: 100%;
	text-align: center;
	font-size: 1.25rem;
}

.fake-btn__primary:is(:hover, :focus) {
	color: rgb(224 224 224);
    background-color: rgb(0 0 0 / 0.75);
    filter: invert(1);
}

.fake-btn__outline:hover {
	background-color: var(--primary-purple);
}


a[class*="fake-btn__"] {
	text-decoration: none;
	max-width: fit-content;
}

/* subpage structure */

.subpage-container {
	display: flex;
	justify-content: center;
	justify-self: center;
	width: 100%;
	flex-direction: column;
	max-width: 1680px;
	padding-top: 1.25rem;
	font-size: 1.25rem;
}

.subpage-container h1 {
	margin-block: 0; margin-inline: 0;
}

.subpage-content {
	max-width: 48em;
	width: 100%;
}

/* Footer */

footer {
	background-color: var(--black);
	padding: 2.25rem 0;
}

.footer {
	display: flex;
	flex-direction: column;
	justify-self: center;
	gap: 2.25rem;
}

.footer-row {
	display: flex;
	justify-content: space-between;
}

	.links-container {
		display: flex;
		gap: 1em;
	}

	.links {
		display: flex;
		flex-direction: column;
		gap: .5rem;
	}

	.copyright {
		display: block;
	}

	.social-links {
		display: flex;
		gap: 1em;
		max-width: 12rem;
		width: 100%;
	}



/* Styles From Old Site */
svg .cls-1 {fill:#808285;}
svg .cls-2 {fill:#2b3990;}

code {
	margin-inline: 0.25ch;
	font-size: 0.95em;
	font-size: calc(1em - 1px);
	color: #337;
}

div.gallery {display: flex; gap: 1em; width: 100%;}
div.gallery figure {max-inline-size: 50%; margin: 0;}
div.gallery figure:only-child {max-inline-size: 100%;}
div.gallery figure img {display: block; max-inline-size: 100%; margin-block-end: 0.25em; border: 1px solid hsla(0deg,0%,0%,0.33);}
div.gallery figcaption {text-align: center; text-wrap: balance; font-style: italic; padding-block-end: 1em;}
video {max-width: 100%;}


/* Typography */

.title {
	font-size: var(--title);
	font-weight: 400;
	line-height: 1;
	margin: 0;
}

.subtitle {
	font-size: var(--subtitle);
}

.subheading {
	font-size: var(--subheading);
	text-wrap: balance;
}

@media screen and (min-width: 65em) {

	header nav a[href] {
		color: var(--white);
		text-decoration-thickness: 0.1ch;
		text-decoration-color: #FFFA;
		text-underline-offset: 0.1em;
	}
	header nav a[href] img {
		display: block;
		height: 1.75em;
		aspect-ratio: 1/1;
		margin-inline: auto;
	}

}

@media (min-width: 45em) {
	header nav {
		translate: 0;
	}

	footer {
		font-weight: 400;
		color: var(--light-grey);

	}

	footer .logo {
		max-width: 3.5rem;
	}

	.small {
		max-width: 2rem;
		max-height: 2rem;
		width: 100%;
	}
}

@media screen and (max-width: 48em) {

	.header {
		flex-direction: column;
		flex-wrap: wrap;
	}

	.inner-wrap {
		padding: 2.25rem 1.25rem;
	}
 
}