/* ================= FONTS ================= */

@font-face {
	src: url(../assets/ChanticleerRomanNF-Bold.ttf); /* find font */
	font-family: Chanticleer Roman; /* name font */
}

/* ================= PAGE ================= */

html, body {
	font-family: Chanticleer Roman; /* set font */
	max-width: 100%; /* max page width */
    overflow-x: hidden; /* remove horizontal scrollbar */
	height: 100%; /* page height */
  	margin: 0; /* remove margin */
  	display: flex; /* flexible box layout */
  	flex-direction: column; /* column direction */
  	background-color: #FFFFFF; /* page background color */
  	color: #FFFFFF; /* text color */
  	z-index: -1; /* to background */
}

/* ================= DEFAULT URL DECORATION ================= */

a {
	text-decoration: none; /* no text decoration */
	font-size: 23px; /* text size */
	color: #F0F1FF; /* text color */
	transition: all 0.1s ease; /* hover transition */
}

a:hover {
	transform: scale(1.15); /* text size on hover */
	color: #FFFFFF; /* text color on hover */
}

/* ================= HEADER ================= */

header {
  	position: relative; /* relative position */
  	height: 100vh; /* height */
  	width: 100%; /* full width */
  	display: flex; /* flexible box layout */
  	justify-content: center; /* center horizontally */
  	align-items: center; /* center vertically */
}

/* ================= NAVBAR ================= */

.homelogo {
	color: #FFFFFF; /* text color */
	font-size: 32px /* homelogo text size */
}

.homelogo:hover {
	transform: scale(1.00); /* text size on hover */
}

nav {
	position: absolute; /* absolute position */
	top: 100vh; /* vertical location */
	width: 100%; /* full width */
	height: 4em; /* height */
	
	display: flex; /* flexible box layout */
	justify-content: center; /* center horizontally */
	align-items: center; /* center vertically */
	gap: 5em; /* distance between items */
	
	background-color: #191919BF; /* background color */
	box-shadow: 0px -12px 20px #0000004D; /* nav shadow upwards */
	box-shadow: 0px 12px 20px #0000004D; /* nav shadow downwards */
	
	z-index: 9999; /* bring to front */
}

@media (max-width: 1000px) {
	nav {
		gap: 3em; /* distance between items */
		justify-content: space-evenly; /* evenly distribute items */
	}
	
	a {
		font-size: 21px; /* text size */
	}
}

@media (max-width: 800px) {
	nav {
		gap: 0.7em; /* distance between items */
	}
	
	.homelogo {
		display: none; /* hide */
	}
	
	a {
		font-size: 18px; /* text size */
	}
}

nav::before {
  	content: ''; /* no further content */
  	position: absolute; /* absolute position */
  	top: 0; /* vertical position */
  	left: 0; /* horizontal position */
  	width: 100%;/* full width */
  	height: 100%; /* full height */
  	backdrop-filter: blur(10px); /* apply blur */
  	mask-image: linear-gradient(to bottom, black, transparent); /* transition from blur to sharp */
  	z-index: 1; /* bring to back */
}

nav a {
	z-index: 2; /* bring to front */
}

.sticky {
	position: fixed; /* fixed position */
	top: 0; /* stick to top */
}

/* ================= CONTENT ================= */

.content {
    flex: 1; /* push footer to bottom */
	margin-top: 4em; /* account for navbar */
	
    display: flex; /* flexible box layout */
	flex-direction: column; /* column layout */
	justify-content: center; /* center vertically */
	align-items: center; /* center horizontally */
	gap: 35px; /* gap */
}

/* ================= FOOTER ================= */

footer {
	display: flex; /* flexible box layout */
	flex-direction: column; /* column layout */
	align-items: center; /* center horizontally */
	background: linear-gradient(to bottom, #191919BF 15%, #122136 100%); /* up to down gradient */
	box-shadow: 0px -12px 20px #0000004D; /* footer shadow */
}

footer hr {
	width: 100%; /* set width of line break */
	border-top: 1px solid #F0F0F0; /* customize line break */
}

footer .urls {
	display: flex; /* flexible box layout */
	align-items: center; /* center vertically */
	justify-content: flex-start; /* align left */
	margin-top: 35px; /* vertical distance between urls */
}

footer .urls .icon {
	width: 1em; /* icon size adapts to text size */
	margin-right: 10px; /* distance between text */
}

footer p {
	margin-top: 35px; /* increase distance between urls and copyright */
	font-size: 22px; /* text size */
	text-align: center; /* align center */
}