@import url('https://fonts.googleapis.com/css2?family=Rakkas&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


/* Reset default styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--light-grey: rgb(244, 244, 244);
	--med-grey: rgb(103, 103, 103);
	--dark-grey: rgb(48, 48, 48);
	--light-brown: rgb(255, 197, 153);

	--body-background: rgb(218, 218, 218);
	--background-accent: rgb(26, 26, 26);
	--light-font:  rgb(244, 244, 244);

	--accent-color: rgb(253, 179, 41);
	--mobileMenu-color: rgb(224, 224, 224);
	
	background-color: rgb(255, 255, 255);

	scroll-padding-top: 6rem;
}

/* Basic typography */
body {
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	height: 100%;
}

h1, h2, h3 {
	font-weight: 400;
	margin-bottom: 1rem;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.2rem;
	font-weight: 400;
}

p {
	font-family: 'Poppins';
	font-size: 1rem;
	margin-bottom: 1rem;
}

.poppins {
	font-family: 'Poppins';
}

.rakkas {
	font-family: 'Rakkas';
}

/* Header */
header {
		position: sticky;
		top: 0;
		background-color: white;
		z-index: 100; /* Specify a higher z-index to ensure the header appears above other content */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

header h1 {
	font-size: 1.5rem;
	margin-bottom: 0;
}

#navBar {
	border: 0px solid red;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	padding: 0;
}

#brooklyn_game_knight_vert_logo {
	padding-top: 1rem;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	width: min(50%, 700px);
	max-width: 100vw ;
	height: 4rem;
	content: center;
	border: 3px solid transparent;
}

#brooklyn_game_knight_vert_logo img{
	margin: 0 auto;
	height: 100%;
}

.navlink {
	display: inline-block;
	font-size: 1rem;
	padding: .5rem 1rem;
	color: #333;
}

.navlink:hover {
	color: #666;
	text-decoration: underline;
}


nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

nav ul {
	display: flex;

}

#mobileNavMenu {
	position: sticky;
	top: 7rem;
	background-color: var(--mobileMenu-color);
	padding: 1rem 0;
	text-align: center;
	z-index: 98;
}

ul {
	list-style: none;
}

li {
	font-size: 1rem;
	line-height: 1.5rem;
}

a {
	text-decoration: none;
	transition: all 0.3s ease;
}


main {
	position: relative;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}



/* Banner */
#banner {
	background-image: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)),url('../images/brooklyn_game_knight_twenty_sided_dice.webp');
	background-color: black;
	background-size: 140% auto;
	background-position: 54% 70%;
	background-repeat: no-repeat;
	display: flex;
	padding: 1rem 0;
	align-items: center;
	line-height: 3rem;
	overflow: hidden;
}

#banner h2 {
	font-size: 3rem;
	margin-bottom: 1rem;
	width: 70%;
}

#banner p {
	color: #fff;
	font-size: 1.5rem;
	line-height: 2rem;
	max-width: 70%;
}

.btn {
	display: inline-block;
	background-color: #f00;
	color: #fff;
	padding: 1rem 2rem;
	border-radius: 3px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.btn:hover {
	background-color: #d00;
}

/* Sections */
.section-title {
	font-family: 'rakkas';
	text-align: center;
}



.accent-divider {
	border:none;
	height: 10px;
	background-color: var(--background-accent);
	margin: 10px 0;
}

.container {

	margin: 0 auto;
	width: 100%;
	padding: 1rem 2rem;
}

.flex {
	display: flex;
	justify-content:center;
}

.accent-font-color {
	color: var(--accent-color);
}

/* About */
#about {
	z-index: 1;
}

/* Games */
#games {
	color: var(--light-font);
	background-color: var(--background-accent);
}

#games ul {
	list-style-type: disc;
}

#games li {
	font-size: 1rem;
}

#gameList {
	column-count: 2;
	column-gap: 2rem;
	margin-left: 1rem;
}

#calendar {
	position: relative;
	z-index: 1;
	border: 0px solid red;
	margin-bottom: 1rem;
}

#socailIcons a:hover img {
	border: 3px solid red;
	filter: grayscale(100%);
}

#social {
	padding-top: 2rem;
}

#social div {
	gap:1rem;
}

#socialIcons img {
	width: 3rem;
	height: 3rem;
}

#email_signup {
	display:flex;
	flex-direction: column;
	gap: 10px;
	
	width: 73%;
	margin: 0 auto;
	border: 0px solid red;
	padding-top: 2rem;
}

.email-signup-field {
	border: 2px solid gray;
	font-size: 1rem;
	padding: .5rem;
	margin-bottom: 1rem;
	width: max(240px, 50%);
	margin: 0 auto;
}

.email-signup-field:focus {
	border: 2px solid gray;
	border-color: blue;
	box-shadow: 0 0 3px 1px rgba(0, 0, 255, 0.3);
}

.accentBtn {
	background-color: var(--accent-color);
	padding: .5rem 2rem;
	border-radius: 30px;
	font-size: 1rem;
	border: 2px solid black;
}

.restrictWidth {
	width: min(100vw, 1000px);
}

.center {
	margin: 0 auto;
}

.text-center {
	text-align: center;
}


/* Footer */
footer {
	position: relative;
	z-index: 1;
	background-color: var(--background-accent);
	color: var(--light-font);
	padding-top: 2rem;
	border: 1px solid transparent;
	font-size: 12pt;
}
footer h3{
	font-size: 1.5em;
}
footer p {
	font-size: 1em;
	line-height: 1;
}

footer a {
	text-decoration: none;
}

#footerLine {
	width: 80%;
	text-align: center;
}

#footerInfo {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
	padding: 1rem;
	margin: 0 auto;
	text-align: center;
	line-height: 1rem;
}



#copyNotice {
	padding: 1rem;
	font-size: .9em;
	color: var(--med-grey);
	margin: 3rem 0;
}




/* cal styling */
.responsiveCal {
	position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
}
	 
.responsiveCal iframe {
	position: absolute; top:0; left: 0; width: 100%; height: 100%;

}




#hamburger {
	width: 1.7rem;
	height: 1.2rem;
	position: relative;
	margin: 1rem 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#hamburger hr {
	border: 2px solid black;
	border-radius: 5px;
}


#mc_embed_signup {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	border: 0px solid blue;
	align-items: center;
	justify-content: center;
	justify-items: center;
	width: 100%;
}

#mc_embed_signup form {margin: 0px; padding: 0}
#mc-embedded-subscribe-form {border: 0px solid red;}
.mc-field-group { width: 260px; padding: 0px; margin: 0px; border: 0px solid green; display:flex; flex-direction: column; align-content: center;}

#mc_embed_signup .mc-field-group label {display: block; border: 0px solid blue; text-align: center; font-size: 1.2rem; font-weight: 400;}
#mc_embed_signup .mc-field-group input {display:block; 
	border: 2px solid gray;
	font-size: 1rem;
	padding: .5rem;
	margin: 1rem auto;
	width: 100%;
}
#mc_embed_signup .button {display: block; all 0.23s ease-in-out 0s; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: fit-content; width: -moz-fit-content;}
#mc_embed_signup .button:hover {background-color:#9eff99;}

#mc-embedded-signup_scroll input{border: 3px solid brown;}

#mce-responses{
	text-align: center;
}



/* small */
@media only screen 
and (max-width: 48em)
{

	html { font-size: 12pt;}

    #footerInfo {
        grid-template-columns: 1fr;
    }

	.deskContent {display:none;}
    .phoneContent {display:block;}

	#copyNotice {
		padding: 0 1rem;
	}

	#about { border-radius: 0; margin-top: 0;}
	#calendar {margin-bottom: 0;}

	main {
		border-radius: 0;
		width: 100vw;
		margin-bottom: 0;
	}

	#navBar {
		align-items: center;
	}

	.restrictWidth {
		width: 100vw;
	}

}


/* tablet */
@media only screen 
and (min-width: 48em)
and (max-width: 84em)
{
	html { font-size: 14pt;}

	footer p {
		font-size: .9em;
		line-height: 1;
	}

    #footerInfo {
        grid-template-columns: repeat(3, 1fr);
    }

	.deskContent {display:block;}
    .phoneContent {display:none;}



	nav a {
		font-size: 1rem;
	}



}


/* desktop */
@media only screen 
and (min-width: 84em)
{

	html { font-size: 16pt;}

    #footerInfo {
        grid-template-columns: repeat(3, 1fr);
    }

	.deskContent {display:block;}
    .phoneContent {display:none;}
	

	#gameList {column-count: 3;}



}