/*
 * CSS for luca0N.com, version 3
 * Main style
 *
 * https://git.luca0n.com/luca0N-website.git/
 */

body {
	margin: 0;
	font-family: sans-serif;

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

header {
	background: linear-gradient(to bottom, rgb(240, 140, 11), rgb(202, 114, 0));
	color: white;
	padding: 16px 16% 16px 16%;
	margin-bottom: 2em;
	box-shadow: 0px 2px 8px #0005;
	display: flex;
}

#lang-selector {
	text-align: end;
}
#lang-selector summary {
	padding: 4px 8px 4px 8px;
	background-color: #eca141;
	margin-bottom: 1em;
	cursor: pointer;
	text-shadow: #0008 1px 1px 3px;

	transition: background-color 0.08s linear 0s;
}
#lang-selector summary:hover {
	background-color: rgb(234, 182, 114);
}

header h1 {
	margin-bottom: 0;
	text-shadow: 2px 2px 5px #0005;
}

header h1::before {
	content: url('luca0N.png');
	margin-right: 6px;
}

#menu-mobile {
	display: none;
}

main {
	margin-left: 16%;
	margin-right: 16%;
	max-width: 540px;
}

ul {
	/* text-align: center; */
	padding-left: 0;
	margin: 0;
}

header ul li {
	margin-bottom: 1em;
	margin-top: 1em;
}
#menu-default ul li {
	display: inline-block;
}
#menu-mobile ul li {
	list-style: none;
	margin-bottom: 2em;
}

.currentPage {
	padding: 12px;
	font-size: 1.2em;
}

.button {
	padding: 12px;
	background-color: rgb(227, 153, 59) /* rgb(249, 167, 63) */;
	text-decoration: none;

	transition: background-color 0.08s linear 0s;

	margin-top: 1em;
	margin-bottom: 1em;
}

.button:hover {
	background-color: rgb(255, 219, 173) /*rgb(244, 190, 119)*/;
}

footer {
	font-size: 10pt;
	text-decoration: italic;
	color: #444;
}

p {
	line-height: 1.8em;
}

.contentWarning {
	color: rgb(202, 67, 15);
	background-color: rgb(200, 77, 16);
	padding: 4px 12px 4px 4px;
	margin-top: 12px;
	margin-bottom: 12px;
	display: flex;

	background: linear-gradient(rgb(253, 215, 142), rgb(247, 185, 72));
}

.contentWarning .content {
	margin-top: 1em;
}

.contentWarning img {
	height: 64px;
	margin: 12px;
}

.contentWarning .cwReturnIndex {
	/* padding: 8px;
	background-color: rgb(255, 170, 37);
	text-decoration: none; */
	font-weight: bold;
	
	/* transition: background-color 0.08s linear 0s; */
}
/*.contentWarning .cwReturnIndex:hover {
	background-color: rgb(223, 147, 28);
}
.contentWarning .cwReturnIndex:active {
	background-color: rgb(204, 133, 22);
}*/

/**************/
/* Dark theme */
/**************/
body {
	background-color: #222;
	color: #ddd;
}
footer {
	color: #bbb;
}

main a {
	color: #1ca6c6;
	transition: color 0.08s linear 0s;
}
main a:visited {
	color: #c658e6;
}
main a:hover {
	color: #63cae1;
}
header a {
	color: #0d2f95;
	transition: color 0.08s linear 0s;
}
header a:visited {
	color: #650a73;
}

.button:hover {
	background-color: rgb(225, 178, 117);
}

.contentWarning {
	color: black;
	background: linear-gradient(to top, rgb(238, 112, 0), rgb(255, 178, 30));
}

@media screen and (max-width: 768px) {
	#menu-default {
		display: none;
	}
	#menu-mobile {
		display: inherit;
	}
	main {
		margin-left: 4%;
		margin-right: 4%;
	}
}