/* "light" and "dark" have high contrast, for a black-and-white monitor */
:root {
	color-scheme: light;
	--fg: #ffffff;
	--bg: #47516d;
	--accent: auto;
}

html[data-theme="light"] {
	--fg: #000000;
	--bg: #ffffff;
	--accent: #000000;
}

html[data-theme="dark"] {
	color-scheme: dark;
	--fg: #ffffff;
	--bg: #000000;
	--accent: #ffffff;
}

body {
	font-size: 24px;
	color: var(--fg) !important;
	font-family: Arial !important;
	background-color: var(--bg);
	accent-color: var(--accent);
}

a:link, a:visited {
	color: var(--fg);
}

.container {
display: flex;
flex-direction: column;
min-height: 100vh;
border-style: solid;
border-width: 1px;
}


/* the text column may get narrower than its longest word (the long addresses wrap), or the
   page would be wider than the window up to about 900 px */
@media (min-width: 768px) {
.container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	grid-template-rows: auto 1fr auto;
}
}

header {
grid-column: span 3;
padding: 5px;
text-align: center;
#font-size: 1.4em;
color: var(--fg);
}

main {
flex: 1;
padding: 20px;
border-style: solid;
border-width: 1px;
}

side_bar {
padding: 20px;
border-style: solid;
border-width: 1px;
}

footer {
grid-column: span 3;
padding: 10px;
text-align: center;
font-size: 1.0em;
color: var(--fg);
}

h1 {
margin-bottom: 1em;
font-size: 1.3em;
font-weight: bold;
}

fieldset {
	border: 0;
	text-align: center;
}

#searched_text {
	width: 90%;
}

#button_search {
	width: 45%;
}

#language {
	width: 45%;
}

#results {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 640px;
}

.hover_img { text-align: center; overflow-wrap: break-word; }
.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { position: relative; display: block; }

.bold {
	text-align: center;
	font-weight: bold;
}

/* reset.css makes them plain text: headwords in the results, labels in the text */
b, strong {
	font-weight: bold;
}

main p, main ul {
	margin-bottom: 1em;
}

main ul {
	list-style: disc;
	padding-left: 1.2em;
}

main li {
	margin-bottom: 0.5em;
}

.app-link {
	display: block;
	margin-bottom: 16px;
	padding: 10px;
	border: 2px solid var(--fg);
	border-radius: 12px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
}

.img_flag {
	margin: 3px
}

/* in the high contrast themes the logo is drawn in the text colour, framed like the colour switch */
.logo {
	float: left;
	box-sizing: border-box;
	width: 100px;
	height: 100px;
}

.logo-tile { fill: #387ff2; }
.logo-art { fill: #ffffff; }
html:is([data-theme="light"], [data-theme="dark"]) .logo { border: 2px solid var(--fg); border-radius: 12px; }
html:is([data-theme="light"], [data-theme="dark"]) .logo-tile { fill: none; }
html:is([data-theme="light"], [data-theme="dark"]) .logo-art { fill: var(--fg); }

/* in line with the flags: the same height and margin */
.theme-toggle {
	float: right;
	box-sizing: border-box;
	width: 52px;
	height: 20pt; /* as tall as the flag pictures */
	margin: 3px;
	padding: 0;
	border: 2px solid var(--fg);
	border-radius: 4px;
	background: linear-gradient(to right, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
	color: #ffffff;
	cursor: pointer;
}

.theme-toggle svg {
	display: block;
	width: 22px;
	height: 22px;
	margin: auto;
}

/* a black edge keeps the white sun readable on every colour of the rainbow */
.theme-toggle .sun-edge { stroke: #000000; stroke-width: 4.5; }

html[data-theme="light"] .theme-toggle { background: #ffffff; color: #000000; }
html[data-theme="light"] .theme-toggle .sun-edge { stroke: none; }
html[data-theme="dark"] .theme-toggle { background: #000000; }

/* on a phone, floating beside the title, the flags and the colour switch did not fit */
@media (max-width: 767px) {
header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 10px;
}

.logo {
	float: none;
	width: min(100px, 14vw);
	height: min(100px, 14vw);
}

/* takes the rest of the row and wraps inside it */
header h1 {
	order: 1;
	flex: 1 1 0;
	margin: 0;
	font-size: min(1.3em, 6.5vw);
}

header .theme-toggle {
	float: none;
	order: 2;
}

/* ends the first row */
header::after {
	content: "";
	flex-basis: 100%;
	order: 3;
}

header > a {
	order: 4;
	margin-top: 8px;
	line-height: 0;
}

header .img_flag {
	display: block;
	float: none;
}

.tagline {
	order: 5;
	flex-basis: 100%;
	margin-top: 8px;
	font-size: min(1em, 5.5vw);
}
}