@font-face {
    font-family: 'Noah';
    font-style: normal;
    font-weight: 400;
    src: local('Noah'), url('https://fonts.cdnfonts.com/s/19339/noah-regular.woff') format('woff');
}
@font-face {
    font-family: 'Noah';
    font-style: italic;
    font-weight: 400;
    src: local('Noah'), url('https://fonts.cdnfonts.com/s/19339/noah-regularitalic.woff') format('woff');
}
@font-face {
    font-family: 'Noah';
    font-style: normal;
    font-weight: 700;
    src: local('Noah'), url('https://fonts.cdnfonts.com/s/19339/noah-bold.woff') format('woff');
}
@font-face {
    font-family: 'Noah';
    font-style: italic;
    font-weight: 700;
    src: local('Noah'), url('https://fonts.cdnfonts.com/s/19339/noah-bolditalic.woff') format('woff');
}



body {
	--blue: #003366;
	--orange: #FF6E00;
}

div.app {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content 1fr min-content;
	grid-template-areas:
		"header"
		"main"
		"footer"
	;
}

div.disclaimer {
	background-color: color-mix(in srgb, var(--blue), transparent var(--opacity));
	place-self: center;
	width: 80dvw;
	display: flex;
	flex-direction: column;
	/*justify-content: space-around;*/
	/*gap: 3rem;*/
	flex-grow: 0;
	height: min-content;

	padding: 0 1rem;
	margin: 1rem;
	border-radius: 1rem;

	color: white;
	grid-area: footer;
}

div.biglogo {
		/*max-width: 2rem;*/
		display: flex;
		flex-direction: column;
		/*gap: 1rem;*/
		align-items: center;
		font-size: 130%;
		h1, h3 {
			margin-block: 0;
			line-height: 0.9;
			margin: 0;
			font-weight: normal;
			padding-bottom: 0.1rem;
		}
		img {
			max-width: 10rem;
		}
	}

div.sidebar {
	grid-area: header;
	background-color: color-mix(in srgb, var(--blue), transparent var(--opacity));
	place-self: center;
	width: 80dvw;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	gap: 3rem;
	flex-grow: 0;
	height: min-content;

	padding: 0 1rem;
	margin: 1rem;
	border-radius: 1rem;

	color: white;
	div.logo {
		/*max-width: 2rem;*/
		display: flex;
		flex-direction: row;
		/*gap: 1rem;*/
		align-items: center;
		font-size: 115%;
		h1, h3 {
			margin-block: 0;
			line-height: 0.9;
			margin: 0;
			font-weight: normal;
			padding-bottom: 0.1rem;
			text-align: left;
		}
		img {
			max-width: 5rem;
		}
	}
	nav {
		display: grid;
		place-items: center;
		ul, div {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: row;
			gap: 2rem;
			li, span {
				margin: 0.25rem 0;
				display: grid;
				place-items: center;
				a {

				}
			}

			li.contact, span.contact {
                font-weight: bold;
                border: 1px solid rgba(255, 110, 0, 0.4);
                border-radius: 1rem;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                color: var(--orange);
                padding: 0.25rem 1rem;
                transition: all 0.3s ease;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

                &:hover {
                    background: rgba(255, 110, 0, 0.4);
                    color: white;
                    transform: scale(1.05);
                    border-color: var(--orange);
                }
            }
		}
	}
	a {
		color: white;
		text-decoration: none;
		font-size: 2rem;
	}
}

body:has(div.page.homepage) div.sidebar {
	display: none;
}

div.page.homepage {
	grid-area: main;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	padding: 2rem;
	place-self: center;
	/*width: 100%;*/
	/*height: 100%;*/
	/*background-color: color-mix(in srgb, var(--blue), transparent var(--opacity));*/
	color: contrast-color(var(--blue));
	border-radius: 1rem;
	background-color: color-mix(in srgb, var(--blue), transparent calc(var(--opacity) * 3));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

	nav > div {
		display: flex;
		gap: 1rem;
		a {
			color: contrast-color(var(--blue));
			text-decoration: none;
			font-size: 1.75rem;
			font-weight: bold;
			/*border: 1px solid rgba(255, 110, 0, 0.4);*/
		}
	}
}

div.page:not(.homepage) {
    grid-area: main;
    padding: 3rem;
    border-radius: 1rem;
	background-color: color-mix(in srgb, var(--bg), transparent var(--opacity));
    color: contrast-color(var(--bg));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 110, 0, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
	max-width: 70dvw;
	place-self: center;

    h2 {
        text-align: center;
        margin-block: 2rem;
    }

    p {
        margin-block: 1.5rem;
        line-height: 1.6;
    }
}

h1, h32, p {
	text-align: center;
	margin-block: 0;
}

div.previewer {
	background-color: #003366;
	color: white;
	width: 100dvw;
}

body {
	/*font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;*/
	font-family: Noah, sans-serif;
	/*font-family: 'Roboto', sans-serif;*/
	color: #003366;
	/*background-color: #d77933;*/
	display: grid;
	grid-template-columns: 100dvw;
	grid-template-rows: min-content 1fr;
	place-items: center;
	height: 100dvh;
	width: 100dvw;
	overflow-x: hidden;
	margin: 0;
	/*display: flex;*/
	/*flex-direction: column;*/
	/*background-color: red;*/
}

.serif, i {
	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}


body:before {
	content: "";
    width: 100dvw;
    height: 100dvh;
	position: fixed;
	z-index: -1;
}

body.light {
	--content-bg: #f1f1f1;
	--text: #252525;
}

body.dark {
	--content-bg: #adadad;
	--text: white;
}

body.light_diagonal {
	&:before {
		background-image: repeating-linear-gradient(45deg, rgba(255, 140, 0, 0.12) 0, rgba(255, 140, 0, 0.12) 1px, transparent 1px, transparent 22px),
		repeating-linear-gradient(-45deg, rgba(255, 69, 0, 0.08) 0, rgba(255, 69, 0, 0.08) 1px, transparent 1px, transparent 22px);
		background-size: 44px 44px;
	}
	&.transparent {
		--opacity: 10%;
		--a: 10%;
	}
}

body.dark_diagonal {
	&:before {
		background-color: #0f0f0f;
		background-image: repeating-linear-gradient(45deg, rgba(255, 140, 0, 0.12) 0, rgba(255, 140, 0, 0.12) 1px, transparent 1px, transparent 22px),
		repeating-linear-gradient(-45deg, rgba(255, 69, 0, 0.08) 0, rgba(255, 69, 0, 0.08) 1px, transparent 1px, transparent 22px);
		background-size: 44px 44px;
	}
	&.transparent {
		--opacity: 10%;
		--a: 10%;
	}
}

body.light_glow_orange {
	&:before {
		background-color: white;
		background-image:
		radial-gradient(circle at 50% 100%, rgba(255, 69, 0, 0.6) 0%, transparent 60%),
		radial-gradient(circle at 50% 100%, rgba(255, 140, 0, 0.4) 0%, transparent 70%),
		radial-gradient(circle at 50% 100%, rgba(255, 215, 0, 0.3) 0%, transparent 80%);
	}
	&.transparent {
		--opacity: 10%;
		--a: 10%;
	}
}

body.dark_glow_orange {
	&:before {
		background-color: black;
		background-image:
		radial-gradient(circle at 50% 100%, rgba(255, 69, 0, 0.6) 0%, transparent 60%),
		radial-gradient(circle at 50% 100%, rgba(255, 140, 0, 0.4) 0%, transparent 70%),
		radial-gradient(circle at 50% 100%, rgba(255, 215, 0, 0.3) 0%, transparent 80%);
	}
	&.transparent {
		--opacity: 10%;
		--a: 10%;
	}
}

body.dark_peaks {
	&:before {
		background-image: url("/stacked-peaks-dark.svg");
		background-size: cover;
	}

	&.transparent {
		--opacity: 20%;
		--a: 20%;
	}
}

body.light_peaks {
	&:before {
		background-image: url("/stacked-peaks-light.svg");
		background-size: cover;
	}

	&.transparent {
		--opacity: 20%;
		--a: 20%;
	}
}

body.dark_hexagons {
	&:before {
		background-color: #1a1a1a;
		background-image: url("/gggyrate.svg");
		background-size: cover;
		background-position: 25% 50%;
		transform: scaleY(-1);
	}

	--bg: #252525;

	&.transparent {
		--opacity: 10%;
		--a: 10%;
	}
}

body.light_hexagons {
	&:before {
		background-image: url("/gggyrate.svg");
		background-size: cover;
		background-position: 25% 50%;
		transform: scaleX(-1) scaleY(-1);
	}

	--bg: #f1f1f1;

	&.transparent {
		--opacity: 3%;
		--a: 3%;
	}
}

body.opaque {
	--opacity: 0%;
	--a: 100%;
}