/*
	The Elephant
	(c) 2025-2026, Frédéric Blondiau — DouWère, s.r.l.
*/

/*:root {*/
/*  color-scheme: light dark;*/
/*}*/

body {
	font-family: -apple-system, -apple-system-font, "Helvetica Neue", "Lucida Grande", Helvetica;
	font-weight: 200;
/*	font-size: 28px;*/
	margin: 0;
	text-align: center;
	padding: 16px;

	background-color: #FCFCFC;
	color: #333;
}

@media (prefers-color-scheme: dark) { 
	body {
		background-color: #333;
		color: #CCC;
	}
	
	.pure-form legend {
		color: #CCC !important;
	}
}

#container {
	min-width: 320px;
	max-width: 840px;
	margin: auto;
}

.primary {
    text-align: center;
	font-size: 150%;

    line-height: 40px;
	white-space: normal;
}

.secondary {
    text-align: center;
	font-size: 32px;

	color: #333;

    line-height: 32px;
	white-space: normal;
	
	padding-top: 16px;
	padding-bottom: 16px;
}

@media (prefers-color-scheme: dark) { 
	.secondary {
		color: #CCC;
	}
}

.tertiary {
	font-size: 16px;

	text-color: #CCC;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.block {
	padding: 8px;
}

.comment {
	font-size: 75%;
}

.red {
	color: rgb(252, 5, 0);
}

.gray {
	color: rgb(128, 128, 128);
}

.action {
	padding-top: 8px;
	padding-bottom: 8px;
	color: white;
	background-color: rgb(225, 5, 0);
	margin: 2px;
}

a {
	text-decoration: none;
}

.separator {
	width: 100%;
}

#appIcon {
	padding: 32px;
}

#logo {
	padding-top: 8px;
	position: relative;
	top: -5px;
}

#flag {
	width: 75vw;
	
	min-width: 320px;
	max-width: 630px; /* 840 * 0.75 */
}

#elephant {
	width: 25vw;

	min-width: 106px;
	max-width: 210px; /* 840 * 0.25 */
}

#menuLink1 {
	background-color: rgb(225,5,0);
	color: white;
	position: relative;
	top: -5px;
}