/* Abelbeck Aviation Checklist - main stylesheet
Copyright 2024 Frank Abelbeck <frank@abelbeck.info>

This file is part of the Abelbeck Aviation Checklist (AAC) toolbox.

The AAC toolbox is free software: you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation, either version 3 of the License, or (at your option) any later
version.

The AAC toolbox is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with the AAC toolbox.  If not, see <http://www.gnu.org/licenses/>.
*/

@import url("theme.css");
@import url("spinner.css");
/* @import url("anchors.css"); */

html {
	background: var(--backgroundHtml);
}

body {
	font-family: system-ui;
	font-size: 125%;
	color: var(--text);
	max-width: 35em;
	
	display: flex;
	min-height: 100dvh;
	margin: 0 auto;
	flex-direction: column;
	
	background-image: url("../media/20240727_Abelbeck_Frank__Juist.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-color: var(--backgroundBody);
	background-blend-mode: var(--modeBodyBackgroundBlend);
}

main {
	min-height: 5em;
	flex: 1;
	margin: 0;
}

nav {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 0.5em;
}

nav > * {
	height: 3em;
	padding: 0.5em;
	border: var(--borderWidth) solid var(--text);
	border-radius: var(--borderRadius);
}

nav button {
	background: var(--backgroundOk);
	color: var(--textOk);
	font-size: 100%;
	height: 4em;
}

nav a[href="./index.html"] {
	background: var(--backgroundWarning);
	color: var(--textWarning);
}

nav a[href="./index.html"]:visited {
	color: var(--textWarning);
}

nav a {
	text-decoration: none;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 1em;
	background: var(--backgroundItem);
	color: var(--text);
}

nav a:visited {
	color: var(--text);
}

nav a img {
	height: 100%;
}

:root.dark nav a img {
	filter: invert();
}

header, footer {
	margin: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0.25em;
}

header {
	border-bottom: var(--borderWidth) solid var(--textHeader);
	background: var(--backgroundHeader);
	color: var(--textHeader);
}

header h4 {
	font-size: 125%;
	margin: 0;
	padding: 0.25em 0.25em;
}

footer {
	font-size: 75%;
	display: flex;
	flex-direction: row;
	gap: 0.25em;
	padding: 0;
	justify-content: space-between;
}

footer a {
	color: var(--textFooter);
}

footer span {
	border-style: solid;
	border-color: var(--textFooter);
	border-width: var(--borderWidth) var(--borderWidth) 0 0;
	
	background: var(--backgroundFooter);
	color: var(--textFooter);
	flex: 2;
	padding: 0.5em;
	text-align: center;
	border-radius: 0 var(--borderRadius) 0 0;
}

button#btnTheme {
	width: 5em;
	color: var(--textTheme);
	background: var(--backgroundTheme);
	padding: 0.25em;
	
	border-style: solid;
	border-color: var(--textFooter);
	border-width: var(--borderWidth) 0 0 var(--borderWidth);
	border-radius: var(--borderRadius) 0 0 0;
}