main.css

:root{
	--highlight-color: #66666640;
	--base-color: #E5D9B9;
	--lighter-color: #FBEFD5;
	--lightest-color: #FFF5B5;
}

html{
	font-family: serif;
}

body{
	background-color: var(--base-color);
	margin-top: 0;
}

br{
	margin-bottom: 0.3em;
}

ol{
	padding-left: 2em; /* default is like 40 px which is kinda large */
}

ol li ol{
	list-style-type: lower-alpha;
}

li{
	margin-bottom:0.3em;
	margin-top:0.3em;
}

table{
	border-collapse:collapse;
}

tr{
	margin:0.5em;
	border-bottom: 1px solid grey;
}

td{
	padding:0.2em;
}

:target {
	border: .4em solid red;
}

.topbar{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: stretch;
	width: 100%;
	max-height: 1.8em; /* 2*padding + text height + a teeny bit of padding*/
	position: sticky;
	background-color: var(--base-color);
	padding: 0.3em;
	box-sizing: border-box;
	top: 0; /* hug the top of the window instead of having a buffer */
	left: 0;
	z-index: 1;/*Lets topbar render ontop of iframe*/
}

.topbarSection{
	flex:1 1 10%;
	text-align: center;
	background-color: var(--lighter-color);
	border-right: 1px solid black;
}

.topbarSublist{
	background-color: var(--lighter-color);
	display: none;
}

.topbarSublist a{
	display:block;
}

.topbarSection:hover{
	background-color: var(--highlight-color);
}

.topbarSublist a:hover{
	background-color: var(--highlight-color);
}

.topbarSection a,
.topbarSection:hover .topbarSublist{
	display: block;
}

.contentContainer{
	display: flex;
	flex-direction: row-reverse;
}

.resizableContainer{
	resize: both;
	overflow: hidden;
}

.resizableWidthContainer{
	resize: horizontal;
	overflow: hidden;
}

/*you can't resize iframes, so we use this to give it a nice resizable handle*/
.sidebarContainer{
	border: 1px solid black;
	height: 90vh;
	width: 500px;
	position: sticky;
	top: 3em;
	display: flex;
	flex-direction: column;
}

.iframe{
	background-color: var(--lighter-color);
	border: 1px solid gray;
	width: calc( 100% - 2px);
	height: 100%
}

.main{
	flex-shrink: 1;
	min-width: 0;/* flex has its own nonzero min-width; to allow for mobile, we have to manually set this */
}

.progress{
	font-size: min(3em,12vw); /* on mobile, 3em is obnoxious so we decrease it */
	font-weight: bold;
}

.h2,.sectionTitle{
	font-size: 2.2em;
	font-weight: bold;
	/*break-after:avoid;*/
}

.section{
	margin: 1em;
	margin-left: 1vw;
	margin-right: 1vw;
	background-color: var(--lighter-color);
	column-width: 18em;
	column-rule: 1px black solid;
	padding: 0.5em;
}

.categoryTitle{
	font-size: 1.5em;
	border-bottom: 2px solid gray;
	text-align: center;
	/*break-after:avoid;*/
}

.subcategoryTitle{
	font-style: italic;
	color: grey;
	padding-top: 0.2em;
	padding-left:1em;
	font-size:1.1em;
}

.itemContainer{
	break-inside: avoid;
}

.item{
	padding:0.1em;
	margin:0.2em;
	break-inside: avoid;
	border-bottom: 1px grey solid;
}

.item:hover{
	background-color: var(--highlight-color);
}

.item.checked:hover{
	background-color: #80DD80;
}

.checked{
	background-color: lightgreen;
}

.check{
	float: right;
}

input[type="number"]{
	width: 4em;
}

.detailColumn{
	float:right;
	color:grey;
	font-style:italic;
	margin-right:0.5em;
}

.location{
	text-decoration:underline;
}

/*
the "padding" should really be margin.
but because the map wants to be larger than the screen,
we have to use weird shit like position fixed and padding
to make it do the thing of "fill your container exactly but no more"

because the html body will expand downwards as much as needed.
and we don't want the map to expand down past screen.

I feel like there should be a way to do this but I can't figure it out right now
*/
.mapContainer{
	position: fixed;
	display: flex;
	flex-direction: column;
	padding:1em;
	width: 100%;
	height: 100%;
	top: 0.5em;
	left: 0;
	box-sizing:border-box;/*we want the 1em of padding to be taken in to account in the 100% width/height*/
	touch-action: none;/*we want touch to scroll, not select or anything.*/
}

.mapButtonBar{
	margin: 0.5em;
}

.mapWrapper{
	background-color: var(--lighter-color);
	max-width:100%;
	overflow: hidden;
}

h1{
	margin: 0.5em;
}

/*mobile/thin window CSS*/
@media only screen and (orientation: portrait){
	.topbar{
		flex-wrap: wrap;
		max-height: 4em;
	}
	.topbarSection{
		flex:1 0 auto;
		width:25vw;
	}
	.topbarSection:hover .topbarSublist{
		display: none;/*no more crazy links for mobile*/
	}
}