body
{
	background: var(--bgLightGray);
}

/* Max content width */

main, header, footer, nav div
{
	max-width: 50rem;
}

header p:last-child
{
	margin-bottom: 1em;
}

header
{
	background: var(--accent);
}

ul.days
{
	background: var(--bgWhite);
}

li h3
{
	font-size: 1em;
	line-height: 1.4em;
	margin-left: auto;
	margin-right: auto;
	max-width: 50rem;
	text-align: center;
}

ul.ruled li:last-child
{
	border-top: 0;
}
ul.ruled li:last-child
{
	border-bottom: 0;
}

h3,
h3.tag
{
	color: rgba(255,255,255,.9);
	margin-top: .5em;
	margin-bottom: 1em;
}

.today:before
{
	content: ' Today';
	
	display: inline-block;
	border: 0;
	padding: .25em .5em;
	border-radius: .25em;
	white-space: nowrap;
	background: rgba(0,0,0,.3);	
	color: white;
		
	font-size: 1em;
	font-weight: 700;
	float: right;
	margin-top: .5em;
}

h2 span
{
	color: rgba(0,0,0,.3);
}

em.tag
{
	font-size: 70%;
	transform: rotate(-5deg);
	color: white !important;
}

p.closed
{
	font-size: 1.5em;
	line-height: .5em;
	margin-bottom: 1em;
	color: var(--cRed);
	text-transform: uppercase;
}

nav
{
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 100;
}
nav div
{
	margin: 0 auto;
}


/* Color overrides */

:root
{
	--cPink: #e56bbe;
	--bgPink: #e56bbe;
}

#ha
{
	--accent: var(--bgPink);
}

#rose
{
	--accent: var(--bgTeal);
}

#annam
{
	--accent: var(--bgGold);
}

nav div
{
	display: grid;	
	grid-template-columns: 1fr 1fr 1fr;
}

button
{
	appearance: none;
	display: block;
	border: none;
	text-align: center;
	
	padding: .5em .25em;
	
	background-color: var(--accent);
	color: var(--black);
	
}
button span
{
	font-size: 1.3em;
	display: inline-block;
	padding: .1em .5em;
	
	border-radius: .25em;
}
button.selected span
{
	font-weight: 700;
	background: #ffffff88;
	
}

	button#tabHa
	{
		background-color: var(--bgPink);
	}
	button#tabRose
	{
		background-color: var(--bgTeal);
	}
	button#tabAnnam
	{
		background-color: var(--bgGold);
	}




footer
{
	background-color: var(--accent);
	padding-bottom: 4.5em;
}

#notice
{
	color: white;
	/* font-weight: bold; */
	padding-top: 1em;
	padding-bottom: 1em;
}


#notice a,
#notice a:active,
#notice a:hover
{
	 border-bottom-color: rgba(255, 255, 255, .3);
}
#notice a:hover
{
	color: white;
	border-bottom-color: rgba(255, 255, 255, 1);
}

@media only screen and (max-width: 500px)
{
	button span
	{
		font-size: 1.1 em;
	}
}