@charset "UTF-8";

main {
	z-index: 100;
	margin-bottom: var(--gap);
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	display: grid;
	grid-template-rows: 2rem 43px auto;
	gap: var(--gap);
	pointer-events: none;
}

main>nav {
	z-index: 200;
	display: flex;
	align-items: center;
	overflow: hidden;
	pointer-events: all;
}

main>nav>* {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

main>nav#timeline {
	margin-bottom: -0.3rem;
	grid-row: 1 / 2;
	padding: 0 0.5rem;
	align-items: end;
}

main>nav#timeline>* {
	padding: 0.5rem;
	font-weight: bold;
	color: var(--section-timeline-button-color);
}

main>nav#timeline>*:is(:hover, :focus) {
	color: var(--section-timeline-button-color-hover);
}

main>nav#timeline>*:active {
	color: var(--section-timeline-button-color-active);
}

main>nav#timeline>*.selected {
	color: var(--section-timeline-button-selected-color);
}

main>nav#timeline>*.selected:is(:hover, :focus) {
	color: var(--section-timeline-button-selected-color-hover);
}

main>nav#timeline>*.selected:active {
	color: var(--section-timeline-button-selected-color-active);
}

main>nav#menu {
	grid-row: 2 / 3;
	max-width: var(--section-main-width);
	border-radius: 0.75rem;
	background-color: var(--section-menu-background-color);
	-webkit-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.1);
}

main>nav#menu>* {
	height: 100%;
	padding: 0 1rem;
	color: var(--section-menu-button-color);
}

main>nav#menu>*:first-child {
	margin-right: auto;
}

main>nav#menu>*.selected:is(:hover, :focus),
main>nav#menu>*:is(:hover, :focus) {
	background-color: var(--section-menu-button-background-color-hover);
}

main>nav#menu>*.selected {
	background-color: var(--section-menu-button-background-color-selected);
}

main>nav#menu>*.selected:active,
main>nav#menu>*:active {
	background-color: var(--section-menu-button-background-color-active);
}

main>section.row {
	z-index: 200;
	grid-row: 3 / 4;
	gap: var(--gap);
	border-radius: 0.75rem;
	pointer-events: none;
}

main>section.row>section.main {
	--padding: 1rem;
	max-width: calc(var(--section-main-width) - var(--padding) * 2);
	width: 100%;
	padding: var(--padding);
	display: flex;
	gap: var(--gap);
	pointer-events: all;
	border-radius: 0.75rem;
	background-color: var(--section-background-color);
	-webkit-box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.1);
}

main>section.row>section.main>h1 {
	margin: 0.5rem 1rem 0.5rem 1rem;
	font-size: 1.2rem;
}

main>section.row>section.main>h1.row {
	align-items: center;
	gap: var(--gap);
}

main>section.row>section.main>h1>a {
	min-width: 1rem;
	height: 100%;
	padding: 0.2rem;
	display: inline-flex;
	justify-content: start;
	align-items: center;
}

main>section.row>section.main>h1>a:first-of-type {
	margin-left: auto;
}

main>section.row>section.main>div.row {
	padding: 0rem 1rem;
	justify-content: space-between;
}

main>section.row>section.main .block {
	background: var(--section-block-background-color);
}

main>section.row>section.main .block.text {
	padding: 0.6rem 0.8rem;
	display: inline-flex;
	flex-flow: row wrap;
}

main>section.row>section.main .block.text>a.continue {
	margin-left: auto;
	align-self: flex-end;
}

main>section.row>section.main p.block {
	margin: unset;
}

main>section.row>section.main ul.block {
	min-width: 200px;
	height: fit-content;
}

main>section.row>section.main>div.footer>small.phrase {
	flex-grow: 1;
	text-align: center;
}

main>section.row>section.main>div.footer>small#views {
	position: relative;
	margin-left: auto;
	align-items: center;
}

main>section.row>section.main>div.footer>small#views>* {
	z-index: 500;
}

main>section.row>section.main>div.footer>small#views>div.visibility {
	z-index: 300;
	position: absolute;
	right: calc(-100px + 10.5px + 0rem);
	top: calc(-100px + 0.5rem);
	width: 200px;
	height: 200px;
	/*   pointer-events: none; */
}

main>section.row>section.second {
	--padding: 1rem;
	max-width: calc(var(--section-main-width) - var(--padding) * 2);
	width: 100%;
	padding: var(--padding);
	display: flex;
	gap: var(--gap);
	border-radius: 0.75rem;
	background-color: var(--section-background-color);
	-webkit-box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.1);
}
