:root {
	--bgcolor: #D8D4CB;
	--navcolor: #880505;
	--seccolor: #E6D39A;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	font-family: Arial, sans-serif;
}
*:focus {
	outline: none;
}

body {
	position: absolute;
	left: 0;
	top: 0;
	width: 100svw;
	max-width: 100svw;
	height: 100svh;
	max-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--bgcolor);
	font-size: 1rem;
}

h1, h2 {
	width: 100%;
	text-align: center;
}
#title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	margin: 0 2rem 3rem 2rem;
}
#title img {
	max-height: 8rem;
}
h1 {
	font-size: 3rem;
}
h2 {
	font-size: 2rem;
	margin: 1rem 0;
	padding: 0.3rem;
	width: 100%;
	background-color: var(--bgcolor);
	border: 1px solid black;
	border-radius: 0.5rem;
	
}
h3 {
	text-align: center;
	width: 100%;
	font-size: 1.5rem;
	margin: 0.8rem 0;
	border-bottom: 2px dashed black;
	padding-bottom: 0.3rem;
}
h4 {
	font-size: 1.3rem;
	margin: 0;
}

#blueskylink {
	text-align: center;
}
#blueskylink img {
	height: 1rem;
	margin-right: 1ch;
	vertical-align: middle;
}

header {
	border-bottom: 1px solid black;
	flex-shrink: 0;
}
header, footer {
	width: 100svw;
	background-color: var(--navcolor);
	text-align: center;
	overflow-x: auto;
	overflow-y: hidden;
	color: white;
	font-weight: bold;
}
footer {
	margin-top: auto;
	border-top: 1px solid black;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
footer p {
	margin: 0;
	padding: 0;
}
#webdev {
	font-size: 0.7rem;
}

#connexion {
	position: absolute;
	top: 3rem;
	transform: translateY(-50%);
	right: 2ch;
	z-index: 1;
	background-color: black;
	border-radius: 0.3rem;
	padding: 0.3rem;
	display: flex;
	flex-direction: column;
	align-items: end;
}
#connexion p {
	color: white;
}
form {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
}
form input {
	padding: 0.3rem;
	border: 1px solid black;
	border-radius: 0.3rem;
}
form input[type=file] {
	border: none;
}
textarea {
	font-family: Consolas, monospace;
	font-size: 1rem;
	width: 100%;
	height: 20rem;
	resize: none;
	padding: 0.3rem;
	border: 1px solid black;
	border-radius: 0.3rem;
}

nav {
	margin: 0 auto;
	width: fit-content;
}
nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
nav ul li {
	white-space: nowrap;
	display: flex;
}
nav ul li a {
	text-decoration: none;
	color: white;
	padding: 1rem 1.5rem;
}
nav ul li a:hover {
	color: var(--navcolor);
	background-color: var(--seccolor);
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	overflow-x: hidden;
	flex-basis: 100%;
}
main > div {
	background-color: white;
	max-width: min(120ch, calc(100svw - 2rem));
	padding: 2rem;
	margin: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid black;
	border-radius: 1rem;
	gap: 1rem;
}

section {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
section > div p {
	width: 100%;
	text-align: justify;
}
section .centered {
	display: flex;
	flex-direction: column;
	align-items: center;
}
section .centered p {
	width: fit-content;
}
section .filename {
	font-size: 0.8rem;
	font-family: Consolas, monospace;
	max-width: 100%;
	text-align: justify;
	display: block;
	white-space: normal;
}
section .imggalwrapper {
	width: 35ch;
	height: 35ch;
	display: flex;
	justify-content: center;
	align-items: end;
}
section > div img {
	max-width: 100%;
	max-height: 50svh;
}
section img.imggal {
	max-width: 35ch;
	max-height: 35ch;
}

#galerie ul {
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 2ch;
	width: 100%;
	max-width: 100%;
	max-height: 100svh;
	overflow-y: auto;
	align-items: stretch;
}
#galerie ul li {
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	max-width: 35ch;
}
#galerie .imglegend {
	font-size: 0.8rem;
	max-width: 100%;
	text-align: justify;
	display: block;
	white-space: normal;
	margin-bottom: 0.5rem;
}
#galerie .imgedit {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
}
#galerie .imgedit > span {
	display: flex;
	gap: 2ch;
}
#galerie .imgedit > span > span {
	display: flex;
	gap: 0;
}
#galerie .imgedit form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
}
#galerie .imgedit input[type="text"] {
	width: 100%;
}

a {
	color: darkorange;
}
a:hover {
	color: DarkGoldenRod;
}

section ul {
	margin-left: 3ch;
	margin-right: 1ch;
}
section p {
	margin: 0;
}
section li {
	margin-bottom: 0.1rem;
}
button, input[type="submit"] {
	cursor: pointer;
	background-color: Cornsilk;
	border-radius: 0.3rem;
	color: black;
	border: 1px solid black;
	font-size: 1rem;
	padding: 0.3rem;
}
button:hover, input[type="submit"]:hover {
	background-color: Wheat;
}
.bbcode-buttons {
	display: flex;
	gap: 1ch;
	flex-wrap: wrap;
}
.bbcode-buttons button {
	margin: 0;
	padding: 0.3rem;
	border: 1px solid black;
	border-radius: 0.3rem;
	white-space: nowrap;
}
.preview {
	padding: 0.5rem;
	background-color: Cornsilk;
}
.save-button {
	margin: 0;
	font-size: 1.5rem;
	padding: 0.3rem;
	border: 1px solid black;
	border-radius: 0.3rem;
	white-space: nowrap;
}

input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none; /* Pour Safari */
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid gray;
	border-radius: 5px;
	background-color: white;
	cursor: pointer;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	margin-bottom: 2px;
}

input[type="checkbox"]:not(:disabled):checked::before {
	content: "";
	display: block;
	position: absolute;
	width: 0.9rem;
	height: 0.9rem;
	background-color: var(--navcolor);
	transform-origin: bottom left;
	transform: translate(10%, 10%);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	-webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:disabled {
	background-color: whitesmoke;
}

input[type="checkbox"]:disabled:checked::after {
	content: "";
	display: block;
	position: absolute;
	width: 0.9rem;
	height: 0.9rem;
	background-color: lightgray;
	transform-origin: bottom left;
	transform: translate(10%, 10%);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"] + label {
	margin-left: 0.5ch;
	cursor: pointer;
}

#home {
	position: absolute;
	top: 0;
	left: 0;
	width: 100svw;
	max-width: 100svw;
	height: 100svh;
	max-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	background-color: var(--bgcolor);
	background-image: url("../images/parnassia_palustris.jpg");
	background-size: cover;
	background-position: center;
	z-index: 2;
}
#home img {
	width: min(30svh,30svw);
}
#home #shna {
	text-align: center;
	font-size: min(6svh,6svw);
	font-weight: bold;
	color: white;
	text-shadow:
		1px 1px black,
		-1px 1px black,
		1px -1px black,
		-1px -1px black,
		0 1px black,
		0 -1px black,
		1px 0 black,
		-1px 0 black;
}
#home button {
	padding: 1rem;
	font-size: min(6svh,6svw);
	border-radius: 1rem;
}
footer button {
	padding: 0.3rem;
	padding: 0.3rem;
}
.pdf-list {
	margin-top: 1rem;
}
#connectform {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1rem;
}
li > form {
	display: inline;
}
form > div {
	display: flex;
	gap: 0.5ch;
	align-items: center;
}
#connectform button {
	align-self: center;
	padding: 1rem;
}
#connectform p {
	align-self: center;
}
section time {
	font-size: 0.8rem;
	font-style: italic;
	align-self: flex-end;
	padding-right: 0.5ch;
}
#msg {
	font-style: italic;
	color: red;
}
#edit-container {
	width: 100%;
}
select, form input {
	font-size: 1rem;
}
.previewzone {
	width: 100%;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
.icon-pdf {
	height: 1.5em;
	vertical-align: middle;
	margin-left: 0.25rem;
}
.allarticles {
	margin-top: 1rem;
}
p:has(> img:only-child) {
	text-align: center;
}
p:has(> img:only-child) + p {
	text-align: center;
}