:root {
	--color-white: #fffefa;
    --color-cream: #FEF2D0;
	--color-cream-hover: #FFE7A3;
	--color-darkcream: #FFD991;
    --color-darkbrown: #553B16;
    --color-darkbrown-hover: #402c11;
	--color-lightbrown: #ba9a64;
	--color-blue: #1F7490;
	--color-darkblue: #04455B;
	
	--color-modal-border: #7B643B;

	--color-input: #776140;
	--color-input-placeholder: #99876a;
	
	--color-alert-bg-error: #f79898;
	--color-alert-border-error: #a13b3b; /* #cd5959 */
	--color-alert-bg-success: #98f7b1;
	--color-alert-border-success: #3a9451;

	--color-mobmenu-bg: #955d2c;
	--color-mobmenu-profile-bg: #6F3E14;
	--color-mobmenu-nav-hover: #bb814e;
	--color-mobmenu-nav-active: #5c3615;

	--color-fb: #3b5998;
	--color-inst: #c13584;
	--color-pntr: #c8232c;
	--color-xtw: #1d9bf0;

	--color-online: #28c76f;
	--color-offline: #7f8c8d;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	position: relative;
    background: var(--color-cream);
  	font-family: 'Nunito-Bold';
}

body:has(.page-content.page-game) {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

a {
	background-color: transparent;
	color: var(--color-blue);
}

b,
strong {
	font-family: 'Nunito-ExtraBold';
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img {
	border-style: none;
}

button,
input,
optgroup,
select,
textarea {
	font-family: 'Groboldov';
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: unset;
}

textarea {
	overflow: auto;
}

button,
a,
input,
textarea {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

[hidden] {
	display: none;
}

*::before,
*::after {
	box-sizing: inherit;
}

hr {
	/* background-color: var(--color-lightgray); */
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 15px 30px;
	padding: 0 0 15px 30px;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li>ul,
li>ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

/* a {
	color: var(--color-darkgray);
}

a:visited {
	color: var(--color-darkgray);
}

a:hover,
a:focus,
a:active {
	color: var(--color-darkgray);
} */

a:focus {
	outline: unset;
}

a:hover,
a:active {
	outline: 0;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	/* border-color: var(--color-lightgray) var(--color-lightgray) #bbb; */
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:active,
button:focus,
[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

/* select {
	border: 1px solid var(--color-lightgray);
} */

textarea {
	width: 100%;
}

h1, .h1 {
	font-family: 'Groboldov';
    font-weight: 400;
    font-size: 45px;
    line-height: 50px;
    letter-spacing: 0.02em;
    color: var(--color-darkbrown);
    text-align: center;
    text-transform: capitalize;
}

h2, .h2 {
	font-family: 'Nunito-Black';
	font-weight: 900;
	font-size: 30px;
	line-height: 35px;
	letter-spacing: 0.02em;
    color: var(--color-darkbrown);
}

h3, .h3 {
	font-family: 'Nunito-Bold';
	font-weight: 700;
	font-size: 25px;
	line-height: 30px;
	letter-spacing: 0.02em;
    color: var(--color-darkbrown);
}

p, .p {
	font-family: 'Nunito-Medium';
	font-weight: 500;
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 0.02em;
    color: var(--color-darkbrown);
}

ol li,
ol li::marker {
	font-family: 'Nunito-Bold';
	font-weight: 700;
	font-size: 25px;
	line-height: 30px;
	letter-spacing: 0.02em;
    color: var(--color-darkbrown);
}

ul li,
ul li::marker {
	font-family: 'Nunito-Medium';
	font-weight: 500;
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 0.02em;
    color: var(--color-darkbrown);
}

ol ul,
ul ol {
    margin: 0;
}

/*  */
ol.nested > li:has(h2)::marker {
  	font-size: 30px;
	line-height: 35px;
}

ol.nested ol {
	list-style: none;
}

ol.nested ol > li {
	counter-increment: item;
	margin-bottom: 0.5em;
	position: relative;
	font-family: 'Nunito-Medium';
	font-weight: 500;
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 0.02em;
	color: var(--color-darkbrown);
}
/*  */

input,
select,
textarea,
.input,
.select,
.textarea {
	box-shadow: 0px 4px 4px rgba(85, 59, 22, 0.25);
	border-radius: 10px;
	background: var(--color-cream);
	font-family: 'Groboldov';
	font-weight: 400;
	font-size: 17px;
	line-height: 21px;
	color: var(--color-input);
	padding: 10px;
    height: 30px;
	transition: 0.3s all ease-in-out;
	border: 3px solid transparent;
}

input::placeholder,
select::placeholder,
textarea::placeholder,
.input::placeholder,
.select::placeholder,
.textarea::placeholder {
	color: var(--color-input-placeholder);
}

input:focus,
textarea:focus,
.input:focus,
.textarea:focus {
	outline: none;
	border: 3px solid var(--color-input-placeholder) !important;
	box-shadow: 0px 2px 2px rgba(85, 59, 22, 0.25);
}

.error input,
.error textarea,
.error .input,
.error .textarea {
	border: 3px solid var(--color-alert-border-error) !important;
}

.success input,
.success textarea,
.success .input,
.success .textarea {
	border: 3px solid var(--color-alert-border-success) !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
.input:-webkit-autofill,
.select:-webkit-autofill,
.textarea:-webkit-autofill {
	box-shadow: 0 0 0 1000px var(--color-cream) inset !important;
    -webkit-text-fill-color: var(--color-input) !important;
    font-family: 'Groboldov' !important;
    border-radius: 10px;
}

input.border-inp,
select.border-inp,
textarea.border-inp,
.input.border-inp,
.select.border-inp,
.textarea.border-inp {
	border: 3px solid var(--color-modal-border);
}

.m-0 {
	margin: 0;
}

.p-0 {
	padding: 0;
}

@media (max-width: 1000px) {
	h1, .h1 {
		font-size: 42px;
		line-height: 47px;
	}

	h2, .h2,
	ol.nested > li:has(h2)::marker {
		font-size: 27px;
		line-height: 32px;
	}

	h3, .h3 {
		font-size: 22px;
		line-height: 27px;
	}

	p, .p {
		font-size: 17px;
		line-height: 22px;
	}

	ol li,
	ol li::marker {
		font-size: 17px;
		line-height: 22px;
	}

	ul li,
	ul li::marker {
		font-size: 17px;
		line-height: 22px;
	}

	ol ul,
	ul ol {
		margin: 0;
	}

	ul,
	ol {
		margin: 0 0 15px 30px;
		padding: 0 0 15px 30px;
	}

	input,
	select,
	textarea,
	.input,
	.select,
	.textarea {
		font-size: 15px;
		height: 25px;
	}
}

@media (max-width: 500px) {
	h1, .h1 {
		font-size: 35px;
		line-height: 40px;
	}

	h2, .h2,
	ol.nested > li:has(h2)::marker {
		font-size: 25px;
		line-height: 30px;
	}

	h3, .h3 {
		font-size: 20px;
		line-height: 25px;
	}

	p, .p {
		font-size: 16px;
		line-height: 21px;
	}

	ol li,
	ol li::marker {
		font-size: 16px;
		line-height: 21px;
	}

	ul li,
	ul li::marker {
		font-size: 16px;
		line-height: 21px;
	}

	ol ul,
	ul ol {
		margin: 0;
	}

	ul,
	ol {
		margin: 0 0 10px 20px;
		padding: 0 0 10px 20px;
	}
}

@media (max-width: 400px) {
	h1, .h1 {
		font-size: 38px;
		line-height: 43px;
	}
}