@font-face {
	font-family: Habbo Ubuntu;
	src: url("./font/Ubuntu.ttf");
}
@font-face {
	font-family: Habbo Volter;
	src: url("./font/Volter.ttf");
}

* {
	box-sizing: border-box;
	outline: none;
	/*	opacity: 0.97;*/
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	transition: background-color 0.3s, border 0.3s, color 0.3s;
}
body {
	font-family: Habbo Ubuntu, sans-serif;
	text-align: center;
	/* background-color: #eee;
	
	background-image:
		linear-gradient(45deg, #bbb 7px, transparent 7px, transparent 21px, #bbb 21px),
		linear-gradient(45deg, #bbb 7px, transparent 7px, transparent 21px, #bbb 21px);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px; */
	background-image: url(img/habbokurzgeschichten_v2.png), url(img/bg_ltribe_jungle_2_sky.png);
	background-size: auto;
	background-position: center 0;
	background-repeat: no-repeat, repeat-x;
	background-color: #95d5ec;
	padding-top: 230px;
	min-height: 1360px;
	margin: 0;
}

textarea {
	font-family: var(--font, Habbo Volter);
	font-size: 9px;
	resize: none;
	width: 275px;
	height: 115px;
}
textarea:focus-within {
	outline: 2px solid #39b;
    outline-offset: 2px;
    border-radius: 2px;
}

#counters {
	margin: 0 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	font-size: 12px;
	color: #666;
}

section {
	width: 738px;
	padding: 5px;
	margin: 5px auto;
	background-color: rgb(246, 246, 49);
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	overflow: hidden;
}

section > header,
section > main {
	padding: 5px;
	margin-bottom: 5px;
	background-color: rgb(228, 228, 45);
	border-radius: 5px;
	overflow: hidden;
}
section > main {
	margin: 0;
	display: flex;
	gap: 5px;
}

h3 {
	margin: 0;
	color: #444;
	font-weight: 100;
}

main > div[id] {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 5px;
	overflow: hidden;
}
main > div[id] fieldset {
	line-height: 1.5em;
	display: inline-block;
	border: 1px solid grey;
	border-radius: 3px;
	padding: 5px;
}
main > div[id] fieldset legend {
	text-align: left;
}
div#settings {
	width: 316px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
input {
	width: 16px;
	height: 16px;
}
#estilos span:nth-of-type(1) {
	background-image: url(img/F-3200~135.png);
	background-size: 21px 22px;
}
#estilos span:nth-of-type(2) {
	background-image: url(img/F-3167~67.png);
	background-size: 25px 29px;
}
#estilos span:nth-of-type(3) {
	background-image: url(img/F-3113~33.png);
	background-size: 25px 29px;
}
#estilos input[type="button"] {
	border: 0;
	background-size: 16px;
	background-color: transparent;
	opacity: 0.7;
	cursor: pointer;
}
#estilos input {
	transform: translateY(-8px);
}
#estilos input[type="button"]:hover {
	opacity: 0.85;
}
#estilos input[type="button"]:active {
	opacity: 1;
}
#estilos input:nth-of-type(3n) {
	background-image: url(img/f_der.gif);
}
#estilos input:nth-of-type(3n + 2) {
	background-image: url(img/f_izq.gif);
}
#ferramentas input,
#estilo input {
	-webkit-appearance: none;
	cursor: pointer;
	background-origin: content-box;
	background-size: 12px;
	background-repeat: no-repeat;
	padding: 1px;
	border: 1px solid #ccc;
	border-radius: 2px;
}
#ferramentas input:hover {
	border-color: #39b;
}
#ferramentas input:checked,
#estilo input:checked {
	border: 2px solid #39b !important;
	padding: 0 !important;
}
#ferramentas input[value="Split line"] {
	background-image: url(img/split_line.png);
}
#ferramentas input[value="Align line Center"] {
	background-image: url(img/align_line_center.png);
}
#ferramentas input[value="Align line Right"] {
	background-image: url(img/align_line_right.png);
}
#ferramentas input[value="Align text Middle"] {
	background-image: url(img/align_text_middle.png);
}
#ferramentas input[value="Collumnify"] {
	background-image: url(img/collumnify.png);
}
#ferramentas input {
	width: 34px;
	height: 30px;
	color: transparent;
	background-size: 34px;
	box-sizing: content-box;
	padding: 3px;
}
#estilo input {
	width: 40px;
	height: 40px;
	background-color: #eeeeee;
	background-size: inherit;
	background-position: 0 0;
	background-image: var(--image);
}
#estilo input:hover {
	background-color: #ddd;
	border-color: #bbb;
}
#estilo input:active {
	background-color: #ccc;
	border-color: #aaa;
}
#estilo input[value="gift"],
:has(input[value="gift"]:checked) {
	--image: url(./img/gift.png);
	--font: Habbo Ubuntu;
}
:has(input[value="gift"]:checked) .dynamic {
    line-height: 17.5px;
	font-size: 12px;
	letter-spacing: 0.04px;
}
#estilo input[value="sticky_dream"],
:has(input[value="sticky_dream"]:checked) {
	--image: url(./img/sticky_dream.png);
	--font: Habbo Volter;
}
#estilo input[value="sticky_heart"],
:has(input[value="sticky_heart"]:checked) {
	--image: url(./img/sticky_heart.png);
	--font: Habbo Volter;
}
#estilo input[value="sticky_lovin"],
:has(input[value="sticky_lovin"]:checked) {
	--image: url(./img/sticky_lovin.png);
	--font: Habbo Volter;
}
#estilo input[value="sticky_shakespeare"],
:has(input[value="sticky_shakespeare"]:checked) {
	--image: url(./img/sticky_shakespeare.png);
	--font: Habbo Volter;
}
#estilo input[value="sticky_white"],
:has(input[value="sticky_white"]:checked) {
	--image: url(./img/sticky_white.png);
	--font: Habbo Volter;
}
#estilo input[value="sticky_xmas"],
:has(input[value="sticky_xmas"]:checked) {
	--image: url(./img/sticky_xmas.png);
	--font: Habbo Volter;
}
:has(input[value="sticky_dream"]:checked) .dynamic,
:has(input[value="sticky_heart"]:checked) .dynamic,
:has(input[value="sticky_lovin"]:checked) .dynamic,
:has(input[value="sticky_shakespeare"]:checked) .dynamic,
:has(input[value="sticky_white"]:checked) .dynamic,
:has(input[value="sticky_xmas"]:checked) .dynamic {
	font-size: 8px;
	letter-spacing: 0.6px;
    line-height: 10.3px;
}
#estilo input[value="trophy_bronze"],
:has(input[value="trophy_bronze"]:checked) {
	--image: url(./img/trophy_bronze.png);
	--font: Habbo Ubuntu;
}
#estilo input[value="trophy_gold"],
:has(input[value="trophy_gold"]:checked) {
	--image: url(./img/trophy_gold.png);
	--font: Habbo Ubuntu;
}
#estilo input[value="trophy_silver"],
:has(input[value="trophy_silver"]:checked) {
	--image: url(./img/trophy_silver.png);
	--font: Habbo Ubuntu;
}
:has(input[value="trophy_gold"]:checked) .dynamic,
:has(input[value="trophy_silver"]:checked) .dynamic,
:has(input[value="trophy_bronze"]:checked) .dynamic {
	line-height: 13.4px;
	font-size: 12px;
	letter-spacing: 0.04px;
}
div#preview {
	position: relative;
	/* float: right; */
	width: 395px;
	background-image: var(--image, linear-gradient(transparent, transparent)),
		url(./img/piso.png);
	background-position: center;
	background-repeat: no-repeat, repeat;
	text-align: left;
	font-family: var(--font);
}
div#preview:after {
    content: "This is a fan-made tool designed to facilitate the task of planning the message you submit before purchasing an item (gift or trophy) by mimicking the text box's final appearance. Although the goal is to replicate the behavior as closely as possible, if any discrepancies are found, we are not responsible for the \"loss\" of a purchased item (for example, if the message does not appear as displayed on the website).";
    font-size: 8px;
    line-height: 7px;
    text-align: center;
    display: block;
    margin: 100% 35px 0;
}
#preview > div {
	position: absolute;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow: hidden;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#preview img {
	position: absolute;
}

footer {
	width: 738px;
	margin: 0 auto;
	background-color: rgb(0 0 0 / 0.5);
	color: white;
	padding: 1px 10px;
	border-radius: 5px;
	border: 1px solid rgba(0 0 0 / 0.5);
}
footer a {
	color: white;
}