@font-face {
	font-family: 'Open Sans';
	src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('fonts/JetBrainsMono[wght].ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

:root {
	--scalar-custom-header-height: 75px;
	--scalar-font: 'Open Sans', sans-serif;
	--scalar-heading-1: 28px;

	--opusdns-dark-gray: #3C3C3C;
	--opusdns-light-blue: #6ecdeb;
	--opusdns-dark-blue: #5f87c3;
	--opusdns-yellow: #fae64b;
	--opusdns-orange: #faa436;
	--opusdns-pink: #C81E78;
}

.light-mode {
	--scalar-color-1: black;
	--scalar-color-2: var(--opusdns-dark-gray);
	--scalar-color-3: var(--opusdns-pink);
	--scalar-color-accent: var(--opusdns-dark-blue);
	--scalar-border-color: #b5b5b5;

	.sidebar-heading-chevron {
		--scalar-color-3: var(--opusdns-orange);
	}

	#dark-logo {
		display: none;
	}
}

.dark-mode {
	--scalar-color-3: var(--opusdns-light-blue);
	--scalar-color-accent: var(--opusdns-dark-blue);
	--scalar-border-color: #575757;

	.sidebar-heading-chevron {
		--scalar-color-3: var(--opusdns-yellow);
	}

	#light-logo {
		display: none;
	}
}

header {
	height: var(--scalar-custom-header-height);
	box-shadow: inset 0 -1px 0 var(--scalar-border-color);
	background-color: var(--scalar-background-1);
	color: var(--scalar-color-1);
	font-size: var(--scalar-font-size-2);
	padding: 0 18px 0 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 9999;

	.opusdns-logo {
		height: var(--scalar-custom-header-height);
		margin-top: -2px;
		margin-left: 10px;
	}

	.burger {
		display: none;
		font-size: 2rem;
		cursor: pointer;
	}

	.menu-toggle {
		display: none;
	}

	nav {
		background-color: var(--scalar-background-1);
		align-items: center;
		gap: 18px;
		z-index: 9999;
		display: flex;

		.signup-button {
			padding: 10px 15px;
			background: var(--opusdns-yellow);
			color: black;
			border-radius: 30px;
			display: flex;

			svg {
				margin-top: 2px;
				margin-left: 6px;
			}
		}
	}

	a {
		text-decoration: none;
	}

	a:hover {
		opacity: 0.8;
	}

	@media (max-width: 1000px) {
		.burger {
			display: block;
		}

		nav {
			position: absolute;
			top: 100%;
			right: 0;
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
			padding: 1rem 2rem;
			display: none;
			box-shadow: inset 0 -1px 0 var(--scalar-border-color);
		}

		.menu-toggle:checked+.burger+nav {
			display: flex;
		}
	}
}

.footer {
	padding: 50px 25px 25px 25px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	align-items: start;
	gap: 2rem;
	background: black;

	.footer-logo {
		display: flex;
		justify-content: center;


		img {
			width: 186px;
			padding: 20px;
		}
	}

	.footer-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 2rem;

		.link-column {
			max-width: 200px;
			flex: 1;

			h4 {
				margin-bottom: 0.5rem;
				font-size: 1.1rem;
				text-transform: uppercase;
				letter-spacing: 2px;
			}

			a {
				display: block;
				color: var(--scalar-color-2);
				text-decoration: none;
				margin-top: 13px;
			}

			a:hover {
				color: #fff;
			}
		}

		.icann-logo {
			margin-top: 15px;
			width: 100px;
		}
	}

	.footer-bottom {
		grid-column: 1 / -1;
		text-align: center;
		font-size: 0.9rem;

		p {
			color: var(--scalar-color-2);
			font-weight: 100;
		}
	}
}

@media (max-width: 768px) {
	.footer {
		grid-template-columns: 1fr;

		.footer-links {
			justify-content: center;

			.link-column {
				width: 45%;
				max-width: 150px;
			}
		}
	}
}