/* MAIN */
html {
	width: 100%;
	height: 100%;
}

body {
	margin: 0px;

	background-image: url(/static/background.png);
	background-size: 100% 100%;
	background-repeat: repeat;

	color: white;

	font-family: Arial, Helvetica, sans-serif;
}

a {
	text-decoration: none;
}

.hidden {
	display: none !important;
}

.overflow {
	width: 100% !important;
	height: 100%;
	background: rgba(1, 40, 100, 0.7);
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 1000;

	display: none;
}

.blink {
	animation: fBlink 3s infinite;
}

@keyframes fBlink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
		color: mediumvioletred;
	}

	100% {
		opacity: 1;
	}
}

#divPseudoTag {
	position: fixed;
	top: 20px;
	left: 0;
	background: rgba(0, 0, 0, 0.55);
	color: white;
	padding: 6px 16px 6px 10px;
	padding-left: 22px;
	border-radius: 0 10px 10px 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	font-size: 20px;
	font-weight: bold;
	z-index: 900;
	pointer-events: none;
}

#divIdTag {
	position: fixed;
	top: 22px;
	background: rgba(0, 0, 0, 0.55);
	color: rgba(255, 255, 255, 0.75);
	padding: 6px 12px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	font-size: 15px;
	cursor: pointer;
	z-index: 900;
	user-select: none;
	white-space: nowrap;
}

#spanIdValue {
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	vertical-align: middle;
	transition: max-width 1000ms ease-in-out, opacity 1200ms ease-in-out;
}

#divIdTag.expanded #spanIdValue {
	max-width: 200px;
	opacity: 1;
}

#divIdTag.expanded #spanIdValue strong {
	cursor: text;
	user-select: text;
}

#divRoleTag {
	position: fixed;
	top: 66px;
	left: 0;
	background: rgba(0, 0, 0, 0.55);
	color: rgba(255, 255, 255, 0.7);
	padding: 4px 14px 4px 10px;
	border-radius: 0 10px 10px 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	font-size: 27px;
	font-style: italic;
	font-family: system-ui;
	letter-spacing: -1px;
	z-index: 900;
	font-weight: 400;
	pointer-events: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

#divRoleTag img {
	width: 37px;
	height: 37px;
	border-radius: 3px;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.3);
	margin-top: 3px;
	margin-bottom: 3px;
}

.blink_orange {
	animation: fBlink_orange 3s infinite;
}

@keyframes fBlink_orange {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
		color: orange;
	}

	100% {
		opacity: 1;
	}
}

.blink_cyan {
	transition: font-weight 1000ms ease-in-out;
	font-weight: bolder;
	animation: fBlink_cyan 3s infinite;
}

@keyframes fBlink_cyan {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
		color: cyan;
	}

	100% {
		opacity: 1;
	}
}

.blink_pink {
	animation: fBlink_pink 3s infinite;
}

@keyframes fBlink_pink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
		color: hotpink;
	}

	100% {
		opacity: 1;
	}
}

.blink_white {
	animation: fBlink_white 3s infinite;
}

@keyframes fBlink_white {
	0% {
		opacity: 0.9;
	}

	50% {
		opacity: 0.5;
		background-color: white;
	}

	100% {
		opacity: 0.9;
	}
}


h1 {
	font-family: MidnightMinutes;
	letter-spacing: 1vw;
	font-size: 18vh;
	width: fit-contents;
	margin: auto;
	margin-top: 8vh;
	text-shadow: black 10px 10px 5px;
	text-align: center;
	cursor: default;
}

h2 {
	font-family: LunacyMore;
	font-weight: lighter;
	font-size: 10vh;
	margin: 0px;
	font-style: italic;
	color: silver;
	text-shadow: black 5px 5px 2px;
	text-align: center;
}

noscript {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	font-size: 40px;
	font-weight: bolder;
	z-index: 9;
}

noscript div {
	margin: auto;
	width: 850px;
	color: white;
	text-shadow: 4px 4px 20px white;
}

noscript div:hover {
	color: red;
	text-shadow: 4px 4px 20px red;
}


#secLang {
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: black;
	border-radius: 0px 0px 0px 10px;
	padding-top: 0.5vh;
	padding-bottom: 1vh;
	padding-left: 1vw;
	color: white;
	font-size: 2.8vh;
	cursor: pointer;
}

#secLang #divFlag {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-right: 2vw;
}

#secLang #divFlag img {
	height: 3vh;
}

#secLang #divV {
	height: 1.2vh;
	width: 2vh;
	margin-left: 3px;
	background-image: url(/static/lang_menu.png);
	background-position: 0px 0px;
	background-size: 200% 200%;
}

#secLang #divMenu {
	display: none;
	flex-direction: column;
	padding-top: 1vmin;
}

#secLang #divMenu div {
	display: flex;
	flex-direction: row;
	align-content: center;
	margin-top: 0.2vh;
	margin-bottom: 0.2vh;
	margin-left: 0.5vw;
}

#secLang #divMenu div img {
	height: 2.7vh;
	margin-left: 0.05vw;
}

#secLang #divMenu div span {
	display: none;
	font-size: 2.3vh;
	font-family: monospace;
	color: white;
}



#secControls {
	position: fixed;
	left: 0px;
	bottom: 25px;
	background-color: rgba(240, 240, 240, 0.8);
	box-shadow: black 3px 3px 20px -1px;
	height: 30px;
	text-align: right;
	padding-left: 22px;
	padding-right: 5px;
}

#secControls #divHome,
#secControls #divRules,
#secControls #divSettings,
#secControls #divMute_Music,
#secControls #divMute_Voice,
#secControls #divPlay,
#secControls #divPause {
	display: inline-block;
	background-position: top left !important;
	background-size: 200% 200% !important;
	width: 25px;
	height: 25px;
	margin-top: 3px;
}

#secControls #divHome:not(.selected):hover,
#secControls #divRules:not(.selected):hover,
#secControls #divSettings:not(.selected):hover,
#secControls #divMute_Music:not(.selected):hover,
#secControls #divMute_Voice:not(.selected):hover,
#secControls #divPlay:not(.selected):hover,
#secControls #divPause:not(.selected):hover {
	background-position: bottom left !important;
	cursor: pointer;
}

#secControls #divHome.selected,
#secControls #divRules.selected,
#secControls #divSettings.selected,
#secControls #divMute_Music.selected,
#secControls #divMute_Voice.selected,
#secControls #divPlay.selected,
#secControls #divPause.selected {
	background-position: top right !important;
}

#secControls #divPlay.selected,
#secControls #divPause.selected {
	cursor: default !important;
}

#secControls #divHome.selected:hover,
#secControls #divRules.selected:hover,
#secControls #divSettings.selected:hover,
#secControls #divMute_Music.selected:hover,
#secControls #divMute_Voice.selected:hover,
#secControls #divPlay.selected:hover,
#secControls #divPause.selected:hover {
	background-position: bottom right !important;
	cursor: pointer;
}

#secControls #divHome {
	background: url(/static/home64.png);
}

#secControls #divRules {
	background: url(/static/rules64.png);
}

#secControls #divSettings {
	margin-left: 15px;
	background: url(/static/settings64.png);
}

#secControls #divMute_Voice {
	margin-left: 15px;
	background: url(/static/mute_voice64.png);
}

#secControls #divMute_Music {
	background: url(/static/mute_music64.png);
}

#secControls #divPlay {
	margin-left: 15px;
	background: url(/static/play64.png);
}

#secControls #divPause {
	background: url(/static/pause64.png);
}


#secChat {
	font-family: Oregon_LDO, Arial;
	position: fixed;
	left: 0px;
	bottom: 50px;
}

#secChat ul .SELECTED {
	color: black !important;
	background: white !important;
}

#secChat #divConv {
	display: none;
	margin-left: 33px;
	background: #EEEEEE;
	height: 350px;
	width: 300px;
	box-shadow: black 3px 3px 20px -1px;
}

#secChat ul {
	margin-top: 7px;
	background: rgba(240, 240, 240, 0.8);
	box-shadow: black 3px 3px 20px -1px;
	padding-right: 2px;
	padding-left: 2px;
	display: inline-block;
	width: 70px;
	text-align: right;
}

#secChat ul li {
	display: inline-block;
	margin-right: 2px;
	margin-left: 2px;
	color: gray;
	font-weight: bolder;
	font-size: 18px;
	font-family: 18cents;
	cursor: pointer;
	padding-right: 5px;
	padding-left: 5px;
}

#secChat ul #liAdd:hover {
	color: black;
}

#secChat ul #liAll:hover {
	color: black;
}

#secChat #divBox {
	padding: 2%;
}

#secChat #divBox #divDialog {
	height: 300px;
	background-color: white;
	margin-bottom: 1%;
	overflow-x: hidden;
	overflow-y: scroll;
	word-wrap: break-word;
	padding: 5px;
	font-family: MONOSPACE;
	font-size: 15px;
	color: black;
}

#secChat #divBox #divDialog p {
	margin: 0px;
}

#secChat #divBox #inpMsg {
	width: 210px;
	font-family: MONOSPACE;
}

#secChat #divBox #butSend {
	margin-top: 0px;
	margin-right: 0px;
}

#secCookie {
	margin-bottom: 0px;
	padding-left: 40px;
	font-size: 2.5vh;
	font-family: MONOSPACE;
	width: 100%;
	min-height: 30px;
	position: fixed;
	bottom: 0px;
	color: #CCCCCC;
	background-color: rgba(50, 50, 50, 0.7);
	border: 1px solid #222222;
	font-weight: lighter;
}

#secCookie p {
	display: inline-block;
	margin-top: 7px;
	max-width: 67vw;
	margin-right: 1.2vw;
}

#secCookie div {
	display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 2px;
	padding-bottom: 3px;
	border-radius: 5px;
	cursor: pointer;
	box-shadow: silver 0px 0px 50px -5px;
	color: white;
	vertical-align: middle;
	text-shadow: black 0px 0px 5px;
	margin-left: 10px;
}

#secCookie #divNo {
	background-image: radial-gradient(red, orangered);
}

#secCookie #divNo:hover {
	background-image: radial-gradient(red, red);
}

#secCookie #divOK {
	background-image: radial-gradient(lime, greenyellow);
}

#secCookie #divOK:hover {
	background-image: radial-gradient(lime, lime);
}

#secConnexion {
	text-align: center;
}

#secConnexion h3 {
	padding-top: 10px;
	padding-left: 10vw;
	padding-right: 10vw;
	padding-bottom: 10px;
	background: #00158D;
	width: max-content;
	margin: auto;
	margin-top: 20vh;
	border-radius: 30px;
	border: lightgray solid 5px;
	font-family: revert;
	font-size: xxx-large;
}

#secConnexion img {
	margin-top: 30px;
	background: lightgray;
	border-radius: 50px;
}

footer {
	position: absolute;
	bottom: 2px;
	right: 5px;
	font-size: 10px;
	font-style: italic;
	color: gray;
}

/* END MAIN */



/* POLICES */
@font-face {
	font-family: 'LunacyMore';
	src: url('/static/LunacyMore.ttf') format('truetype');
}

@font-face {
	font-family: 'MidnightMinutes';
	src: url('/static/MidnightMinutes.otf') format('opentype');
}

/* END POLICES */