@import url('https://fonts.googleapis.com/css2?family=Borel&family=Cherry+Bomb+One&family=Gamja+Flower&family=Outfit:wght@100..900&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

@import 'reset.css';
@import 'colors.css';
@import 'typography.css';
@import 'sprites.css';
@import 'page.css';
@import 'search.css';

:root {
  --wrapper-height: 75vh;
  --content-width: 90vw;
  --content-max-width: 900px;
  --image-max-width: 320px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	background-clip: padding-box;
}

html, body {
	--site-background: #fff4e3;
	--text: var(--black);
	background-color: var(--site-background);
}
body {
	display: grid;
	font-family: var(--font-family);
	color: var(--text);
	text-wrap: balance;
	margin: 0;
	--checkerboard: var(--yellow);
	background-image:
		linear-gradient(45deg, var(--checkerboard) 25%, transparent 25%, transparent 50%, var(--checkerboard) 50%, var(--checkerboard) 75%, transparent 75%, transparent);
	background-size: 20px 20px;
	background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
}

.navbar {
	height: 4rem;
	width: 100%;
	position: fixed;
	text-align: center;
	background-color: #fff;
	border-bottom: var(--wrapper-border);
	z-index: 1000;
}
.navlinks {
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.navlinks img {
	height: 3rem;
}
.navlink {
	padding: 0.5rem 1rem;
	border: var(--wrapper-border);
	border-radius: 1rem;
	width: 25%;
	max-width: 100px;
	background-color: beige;
}
a:hover {
	background-color: var(--green);
	color: white;
}

/* Style the navigation menu */
#top-navbar { display: none; }
.topnav {
	overflow: hidden;
	height: 3rem;
	width: 100%;
	position: fixed;
	background-color: #fff;
	border-bottom: var(--wrapper-border);
	z-index: 1000;
}
.topnav img {
	height: 2rem;
}
.topnav #myLinks {
  display: none;
  position: fixed;
  width: 100%;
  top: 3rem;
  background-color: white;
  text-align: center;
}
.topnav a {
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  border-bottom: var(--wrapper-border);
}
.topnav a.icon {
  background: var(--yellow);
  border-left: var(--wrapper-border);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.wrapper {
	background-color: #fff;
	min-height: var(--wrapper-height);
	max-width: var(--content-max-width);
	place-items: center;
	margin: 0 auto;
	border-left: var(--wrapper-border);
	border-right: var(--wrapper-border);
}
.content {
	height: 100%;
	min-height: inherit;
	width: var(--content-width);
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 1.5rem;
}
.content > *:last-child {
	margin-bottom: 40px;
}
section {
	padding: 1.5rem 0;
}
.section {
	margin-bottom: 1.5rem;
}

button svg, 
a svg {
    pointer-events: none;
}

button,
.button,
.nav-links a {
	display: block;
	padding: 8px 1rem;
	text-align: center;
	border: var(--border);
	border-radius: 1rem;
	background-color: var(--lpurple);
	color: var(--text);
	cursor: pointer;
}

.non-clickable {
	opacity: 0.5;
}

/* PAGE ELEMENT STYLES */

#banner {
	text-align: center;
	margin-top: 4rem;
	padding: 0;
}
#banner img {
	width: 100%;
}
.page-title {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 8px;
	text-align: center;
	background-color: var(--f-green);
	border-top: var(--f-border);
	border-image: var(--f-border-green);
	padding: 1rem;
	margin-top: -7px;
	z-index: 1;
}

.checkerboard-divider {
	height: 45px;
	position: relative;
	z-index: 5;
	border-top: var(--wrapper-border);
	border-bottom: var(--wrapper-border);
	background-image:
		linear-gradient(45deg, var(--checkerboard) 25%, transparent 25%), 
		linear-gradient(135deg, var(--checkerboard) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--checkerboard) 75%),
		linear-gradient(135deg, transparent 75%, var(--checkerboard) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
}
.checkerboard-divider.red {
	background-color: #ffcfd8;
	--checkerboard: var(--red);
}
.checkerboard-divider.green {
	background-color: #447948;
	--checkerboard: var(--green);
}
.checkerboard-divider.blue {
	background-color: #c0e2ff;
	--checkerboard: var(--blue);
}

#register {
	position: relative;
	z-index: 1;
	padding: 3rem 1rem;
	text-align: center;
	border-bottom: var(--f-border);
	border-image: var(--f-border-white);
}
#register h1 {
	padding: 1rem;
}
#register .buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60%;
	margin: auto;
}
.sign-up-bttn {
	width: 50%;
	margin: 1rem;
	padding: 0.5rem 1rem;
	border: var(--wrapper-border);
	border-radius: 8px;
	background-color: #a0d3ff;
	box-shadow: 5px 5px var(--black);
}
.sign-up-bttn:hover {
	translate: 3px 3px;
	box-shadow: 2px 2px;
}

footer {
	text-align: center;
	border-top: var(--f-border);
	border-image: var(--f-border-white);
	margin: 40px 0;
}
footer .footer-content {
	border-top: var(--dashed-border);
}
footer .footer-links a {
	display: inline-block;
	border: none;
	background-color: transparent;
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--blue);
}
footer .footer-links a:hover {
	background-color: var(--green);
}

@media screen and (max-width: 576px) {
	body * {
		flex-direction: column;
	}
	
	#navbar {
		display: none;
	}
	#top-navbar { 
		display: flex;
		justify-content: center;
	}
	.topnav { height: 3rem; }
	
	.wrapper {
		border-left: none;
		border-right: none;
	}
	
	#banner { margin-top: 3rem; }
	#banner img {
		height: 300px;
		width: auto;
		object-fit: cover;
	}
	.content {
		width: 100%;
	}
	.wrapper {
		width: 100%;
	}
	#register .buttons,
	.sign-up-bttn { 
		width: 100%; 
	}
	.dates-wrapper ul { max-width: 90%;	}
	.agenda-section .lunch { width: 100%; }
}