:root {
  --max-width: 1200px;

  --background: #f3f4f6;
  --foreground: #1f2937;

  --overlay-color: #000;
  --overlay-opacity: 0.7;
  
  --color-primary: #458EEC;
  --color-primary-dark: #4874BE;
  --color-primary-light: #609CFF;

  --color-discord: #7289da;
  --color-discord-dark: #6a7fcc;
  --color-discord-light: #afbce9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1f2937;
    --foreground: #f3f4f6;
  }
}

[data-theme=dark] {
  --background: #1f2937;
  --foreground: #f3f4f6;
}

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

.font-body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.font-logo {
  font-family: "Anta", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-tagline {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

html {
	min-height: 100vh;
	box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure the body takes up the full viewport height */
  font-family: "Inter", "Avenir", sans-serif;
  font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
  font-size: 16px;
  line-height: 1.5;
  color: var(--foreground);
}

.vstack { display: flex; flex-direction: column; }
.hstack { display: flex; flex-direction: row; }

.site-branding {
	
	& > a {
		text-decoration: none;
		cursor: pointer;
		color: white;
		
		.vstack {
			justify-content: center;
			align-items: center;
		}
	}
	
	.logo-divider {
		background-color: #458EEC;
		height: 2px;
		width: 50px;
	}
}

.btn {
	padding: 8px 10px;
	border-radius: 8px;
	font-family: 'Inter', 'Avenir', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	color: black;
	background-color: #C9CBCB;
	text-decoration: none;
	margin: 2rem 0;
	display: inline-block;
	
	&:hover { background-color: #B4B5B7; }
}

.cta-primary {
	background-color: #458EEC;
	
	&:hover { background-color: #4A78C4; }
}

.footer-primary {
	width: calc(100% - 2rem);
	padding: 1rem;
	height: 200px;
	
	nav {
		gap: 8px;
		margin-bottom: 1rem;
		
		a {
			color: #78797A;
			
			&:hover { color: #458EEC; }
		}
	}
	
	.badge {
		margin-bottom: 1rem;
		display: inline-block;
	}
}

.listing-blurred {
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
}

.card {
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.overlay {
  background-color: var(--overlay-color);
  opacity: var(--overlay-opacity);
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root),
::view-transition-group(nav-links),
::view-transition-group(nav-label),
::view-transition-old(*),
::view-transition-new(*) {
  animation: none;
}

::view-transition-old(nav-links),
::view-transition-old(nav-label) {
  opacity: 0;
}

::view-transition-group(nav-pill) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.23, 1, .32, 1.1);
  overflow: hidden;
  border-radius: 20px;
}

.pill {
  position: absolute;
  position-anchor: --nav-active;
  position-area: center;
  width: anchor-size();
  height: anchor-size();
  border-radius: 20px;
  background: #eee;
  view-transition-name: nav-pill;
}

#desktop-nav {
  ul {
    view-transition-name: nav-links;
  }

  a {
    -webkit-tap-highlight-color: transparent;
  }

  [aria-current] {
    anchor-name: --nav-active;
    view-transition-name: nav-label;
    cursor: default;
    color: #000;
  }
}