/**
 * Copyright @LAPCoder
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);

html {
	font-family: arial, verdana, "trebuchet MS", helvetica, sans-serif;
	min-height: max(100%, 100vh);
}

body {
	margin: 0;
	background: #00ffe7;
	background: linear-gradient(-30deg, #f100ff 0%, #ffec00 40%, #00ffe7 80%);
	background: -webkit-linear-gradient(
		120deg,
		#f100ff 0%,
		#ffec00 40%,
		#00ffe7 80%
	);
	background: -moz-linear-gradient(
		120deg,
		#f100ff 0%,
		#ffec00 40%,
		#00ffe7 80%
	);
	background-repeat: no-repeat;
}

h1 {
	font-size: max(min(5em, 20vw), 30px);
	color: #fff;
	text-shadow: 7px 7px 10px black, 0 0 3px red;
	text-align: center;
	max-width: 100%;
}

h2 {
	font-size: 2em;
	color: rgb(255, 0, 0);
	text-align: center;
	border-radius: 10em;
	border: 0.5em solid #fff;
	/*margin-right: 10em;
	margin-left: 10em;*/
	background-color: #fff8;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

p {
	font-size: 1.5em;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 5px #000;
}

*[data-descr] {
	position: relative;
	text-decoration: underline dotted;
	cursor: help;
}

*[data-descr]:hover::after,
*[data-descr]:active::after {
	content: attr(data-descr);
	text-decoration: none;
	text-shadow: none;
	text-align: start;
	position: absolute;
	left: 0;
	top: 45px;
	min-width: 20px;
	width: max-content;
	border: 1px #aaaaaa solid;
	border-radius: 10px;
	background-color: #ffffff;
	padding: 12px;
	color: #000000;
	font-size: 14px;
	z-index: 1;
}

#inputBf {
	width: 90%;
	margin: auto;
	text-align: center;
}

#messages {
	max-height: 50vh;
	overflow: auto;
}

.quack {
	font-size: 1.5em;
	color: rgb(0, 0, 0);
	text-align: left;
	margin: 0;
	margin-left: 60px;
	overflow-x: auto;
	text-shadow: none;
}

.userQuack {
	font-size: 1.5em;
	color: rgb(0, 0, 0);
	text-align: right;
	margin: 0;
	margin-right: 60px;
	overflow-x: auto;
	text-shadow: none;
}

.amessage {
	margin-top: 20px;
	margin-bottom: 20px;
	min-height: 70px;
}

.statsImg {
	background-color: rgba(255, 255, 191, 0.712);
	margin: 1em;
	border: 20px solid;
	border-radius: 20px;
	border-color: aqua;
}

p.presentation {
	font-size: 1.5em;
	color: rgba(0, 0, 0, 0.75);
	text-shadow: 7px 7px 10px rgb(255, 255, 255);
}

.profile {
	float: left;
	margin-left: 0px;
	margin-right: 0px;
	height: 50px;
	font-size: 50px;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.profileUsr {
	float: right;
}

div.lang {
	background-color: #ffffff;
}

pre {
	background-color: #f0f0f0;
}

button {
	background-color: #f0f0f0;
	border: 0.5em solid #fff;
	border-radius: 10em;
	color: #000;
	font-size: 1.5em;
	font-weight: bold;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 0.5em;
	cursor: pointer;
}

pre > code,
pre > div {
	font-family: "Fira code", monospace;
	font-feature-settings: "ss01", "zero", "ss05", "ss03", "ss02", "cv25",
		"cv26", "cv32", "ss07";
	font-size: 13px;
}

span.stats {
	font-size: 1.5em;
	color: #fff;
	text-shadow: 7px 7px 10px #000, 0 0 5px #000;
	text-align: center;
}

section.main {
	margin: 0;
}

header a,
header nav > div > div > div > span {
	text-decoration: none;
}

div#duck {
	background-color: #f0f0f0;
	margin: 0.5em;
	padding: 0.5em;
}

input#inputUsr {
	width: 100%;
	border: 0;
	background-color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	padding: 0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	text-align: center;
	text-decoration: none;
}

header a:hover {
	text-decoration: underline;
}

img.imgV {
	border-color: coral;
	border-radius: 1em;
	border-width: 0.5em;
	border-style: solid;
	max-width: 80%;
	margin-left: 9%;
	transition: transform 1s;
}

.viewer > * {
	display: initial;
}

.viewer {
	height: calc((100vw - var(--wight-header)) * 0.6 + 1em);
}

.viewer > button {
	max-width: 10%;
	height: calc((100vw - var(--wight-header)) * 0.6 + 0.7em);
	margin: 0;
	position: absolute;
}

button.bRight {
	right: 0;
}