@font-face {
	font-family: 'Dancing Script';
	font-style: 'normal';
	font-weight: 400 700;
	font-display: swap;
	src: url('./typeface/DancingScript.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Oleo Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./typeface/OleoScript-Regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Oleo Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./typeface/OleoScript-Bold.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./typeface/Comfortaa.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Mate';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./typeface/Mate-Italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Mate';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./typeface/Mate-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--main-content-max-width: 900px;
}
html {
	font-size: 18px;
}
body {
	/* background-color: #c4b5c4; */
	background-color: #eccdec;
	display: grid;
	font-family: serif;
	margin: 0;
	text-align: center;
}
#app {
	height: 100vh;

	/* grid */
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'header'
		'main'
		'footer';
}

#app > header {
	grid-area: header;
}

#app > main {
	grid-area: main;

	/* subgrid */
	display: grid;
	grid-template-columns: 1fr var(--main-content-max-width) 1fr;
	grid-template-rows: 1fr;
}

@media (max-width: 900px) {
	#app > main {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 95%;
	}
}

@media (max-width: 550px) {
	#app > main {
		width: 99%;
	}
}

#app > main > section,
#app > main > #main_inner {
	grid-area: auto / 2 / auto / 3;
/*	margin-bottom: 5px;*/
}

#app.admin > main {
	/* For admin, we want a single full-width column with padding */
	grid-template-columns: 10px 1fr 10px;
/*	grid-template-columns: 10px calc(100vw - 38px) 10px;*/
}

#app > footer {
	grid-area: footer;
}

#subheading_deets {
	font-family: Mate, sans-serif;
	font-size: 1.2em;
}

p {
	font-family: Mate, serif;
	font-size: 1.2em;
}
header {

}
footer {
	font-size: 0.7em;
	padding-bottom: 10px;
	text-align: center;
}
nav {
	background-color: #5a3c6a;
	color: #fff;
	margin-top: 10px;
	padding: 7px 0;
}
nav > div {
	border-radius: 6px;
	cursor: pointer;
	display: inline-block;
	font-family: Verdana, sans-serif;
	font-size: 1.3em;
	margin: 0 10px;
	padding: 2px 10px;
	text-transform: uppercase;
}
body:not(.nav-enabled) nav > div {
	display: none;
}
nav > div:hover {
	background-color: #717171;
}

#overflowmenu {
	margin-top: 0px;
	position: fixed;
	top: -100%;
	transition: top ease-in-out 0.5s;
	width: 100%;
}

#overflowmenu .close-button {
	display: none;
}

.menu-sticked #overflowmenu {
	top: 0;
}

section {
	border-top: 1px solid rgba(0,0,0,0.1);
	/* margin-left, margin-right, and max-width aren't needed if using grid */
	/*margin-left: auto;
	margin-right: auto;*/
	margin-top: 30px;
/*	max-width: var(--main-content-max-width);*/
	padding-top: 30px;
	scroll-margin: 40px;
}
section:first-of-type {
	border-top: 0;
	margin-top: 15px;
}
#logo {
	height: 175px;
	margin-top: 15px;
}
#countdown {
	font-size: 1.4em;
}
#display_date {
	font-size: 1.5em;
	padding-top: 30px;
/*	text-decoration: underline;*/
}
#display_time {
	font-size: 1.3em;
}
.section-heading {
	font-family: 'Comfortaa', sans-serif;
	font-size: 1.9em;
	font-weight: bold;
	text-align: center;
	user-select: none;
}
.section-content {
	font-family: serif;
	font-size: 1.3em;
}
.address-info {
/*	font-family: sans-serif;*/
}

#home .section-content,
#home p,
#rsvp .section-content,
#rsvp button {
	font-family: 'Dancing Script', cursive;
}

.telephone-cta,
.telephone-cta:link {
	color: #000;
	text-decoration: none;
}

.headline-names {
	font-family: 'Dancing Script', cursive;
	font-family: Mate, serif;
	font-size: 3em;
	font-weight: 700;
	margin-bottom: 40px;

	/* Apply a background effect to differentiate it */
	background-color: rgba(255,255,255,0.5);
	border-radius: 30px;
	padding: 30px;
}

.headline-names .linebreak {
/*	display: none;*/
}

/** Loading indicator **/
.processing {
	background-color: rgba(0,0,0,0.3);
	display: table;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	userSelect: none;
	width: 100%;
}
.processing>div {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.processing>div>img {
	background-color: #fff;
	border-radius: 100px;
	height: 50px;
	padding: 20px;
}

.hotel-name {
	font-size: 1.25em;
}

.hotel-name,
.hotel-address {
	text-align: center;
}

.hotel-block-list {
	display: inline-block;
	list-style-type: none;
	padding-left: 0;
	text-align: left
}

.hotel-block-list > li {
	border: 1px solid #979797;
	border-radius: 8px;
	box-shadow: 3px 3px #444;
	margin-bottom: 30px;
	padding: 15px;
}

.hotel-block-list > li:last-child {
	margin-bottom: 0;
}

.hotel-features {
	list-style-type: circle;
	margin-left: 1em;
	margin-top: 20px;
}

.hotel-features > li {
	text-indent: 0;
}

.hotel-sub-info-block {
	margin-top: 15px;
	text-indent: 1em;
}

.basic-schedule-table {
	margin: 0 auto;
}

.basic-schedule-table td:nth-child(1) {
	text-align: right;
}

.basic-schedule-table td:nth-child(2) {
	padding-left: 30px;
	text-align: left;
}

.dayof-event-card {
	background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
  padding: 15px 20px;
}

@media (max-width: 1100px) {

	section {
		scroll-margin: 0;
	}

	nav > div {
		display: none
	}

	#menutoggle {
		cursor: pointer;
		display: block;
		position: fixed;
		left: 15px;
		top: 10px;
		width: 60px;
	}

	#menutoggle > div {
		width: 35px;
		height: 5px;
		background-color: black;
		margin: 6px 0;
	}

	#overflowmenu {
		box-sizing: border-box;
		display: block;
		line-height: 1em;
		margin-top: 0px;
		padding: 15px;
		position: fixed;
		top: 0;
		left: -100vw;
		text-align: center;
		transition: left ease-in-out 0.3s;
		width: 100vw;
	}

	#overflowmenu .close-button {
		background-color: transparent;
		border: 0;
		cursor: pointer;
		display: block;
		font-size: 4em;
		line-height: 0.7em;
		position: absolute;
		top: 0;
		left: 0;
	}
	#overflowmenu > div {
		border-radius: 6px;
		cursor: pointer;
		display: block;
		font-family: Verdana, sans-serif;
		font-size: 1.3em;
		margin: 5px 10px;
		padding: 10px 10px;
		text-transform: uppercase;
	}
	#overflowmenu > div:hover {
		background-color: #717171;
	}
	.menu-open #overflowmenu {
		left: 0;
	}
}

@media (max-width: 910px) {
	section {
		padding-left: 15px;
		padding-right: 15px;
	}

	.dayof-event-card {
	  margin-bottom: 10x;
	  margin-top: 10px;
	}
}

@media (max-widtH: 625px) {
	nav > div {
		display: none;
	}
}

@media (max-width: 475px) {
	#logo {
		height: auto;
		margin-left: auto;
		margin-right: auto;
		width: 90%;
	}

	.headline-names {
		font-size: 2.6em;
		font-weight: 400;

		/* Apply a background effect to differentiate it */
		padding: 20px 5px;
	}
}