* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: 'Arial', sans-serif;
	background: #000;
}

.background {
	background: url("/assets/img/sett.jpg") no-repeat center center;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
}

.dialog-container {
	position: absolute;
	bottom: -300px;
	left: 0;
	width: 100%;
	transition: bottom 0.5s ease;
	z-index: 10;
}

.dialog-container.visible {
	bottom: 0;
}

.dialog-box {
	max-width: 700px;
	margin: 0 auto;
	  background: #3c3d3f;
	color: #fff9e5;
	position: relative;
	text-align: center;
	border-radius: 16px;
	box-shadow: 0 0 20px rgba(255, 215, 130, 0.4);
	  top: 50vh;
  position: absolute;
  width: 96%;
    left: 2%;
}

.dialog-header {
  position: absolute;
  top: -36px;
  left: 60%;
  transform: translateX(-40%);
  background: linear-gradient(to bottom, #d8aa60, #a97c50);
  color: #2d1c06;
  padding: 8px 24px;
  border-radius: 14px;
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  border: 2px solid #ffe0a8;
  text-shadow: 0 1px 1px #fff6e0;  min-width: max-content;
}
.dialog-text {
	font-size: 1.04rem;
	line-height: 1.6;  min-height: 90px;
}

.next-btn {
  margin-top: 30px;
  padding: 7px  42px;
  background: linear-gradient(to bottom, #ffd777, #e2a82d);
  border: 2px solid #d68b1c;
  border-radius: 18px;
  font-weight: bold;
  font-size: 1.2rem;
  color: #3a230a;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 1px 1px #fff3cc;
}
.next-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 10px rgba(0,0,0,0.3);
}



@media (min-width: 768px) {
	.social-row a {
		width: 2.5em;
		height: 2.5em;
		padding: 1em 0;
		margin-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.social-row a {
		width: 3em;
		height: 3em;
		padding: 0;
	}
}

.countach {
	font-family: countach,sans-serif;
	font-weight: 400;
	font-style: normal;
}

.tilda-petite {
	font-family: tilda-petite,sans-serif;
	font-weight: 400;
	font-style: normal;
}

.montserrat {
	font-family: montserrat, sans-serif;
	font-weight: 300;
	font-style: normal;
}

.skintone-text {
	color: var(--skintone-color);
}

.dark-text {
	color: var(--dark-color);
}

.white-text {
	color: #fff;
}

a:hover {
	color: #c2c2c2;
}

.dark-background {
	background: var(--dark-color);
}


.logo {
	width: 20vh;
}

@media (min-width: 768px) {
	.logo {
		width: 16em;
	}
}

@media (min-width: 992px) {
	.logo {
		width: 18em;
	}
}

@media (min-width: 1200px) {
	.logo {
		width: 28vh;
		height: 28vh;
	}
}

h1 {
	font-size: 4.5vh;
	letter-spacing: 4px;
	padding-top: .5em;
}

@media (min-width: 992px) {
	h1 {
		font-size: 2.75em;
	}
}

@media (min-width: 1200px) {
	h1 {
		font-size: 3em;
		letter-spacing: 5px;
	}
}

.lead {
	font-size: 1.5rem;
	padding-top: 0.5em;
}

@media (min-width: 992px) {
	.lead {
		font-size: 2rem;
		padding-top: 0.5em;
	}
}

@media (min-width: 1200px) {
	.lead {
		font-size: 2.5rem;
		padding-top: 1em;
	}
}

p.general {
	font-size: 2.5vh;
	margin-bottom: 0.5em;
	line-height: 1.25em;
}

@media (min-width: 992px) {
	p.general {
		font-size: 1.25em;
		line-height: 1.5em;
	}
}

@media (min-width: 1200px) {
	p.general {
		font-size: 1.5em;
	}
}


.inner-border {
	display: flex;
	justify-content: center;
	flex-direction: column;
	    padding: 35px 10px;
		position:relative;
		z-index:11;  background: #3c3d3f;
}

.outer-border {
	border: 2px solid #DE9B72;
	height: 99%;
	width: 98%;
	padding: 6px;
	margin: 0 auto;
}

@media (min-width: 992px) {
	.outer-border {
		height: 94%;
	}
}

.mid-border {
	border: 6px solid #DE9B72;
	height: 100%;
	width: 100%;
	padding: 6px;
	margin: auto;
}

.inner-border {
	position: relative;
	border: 2px solid #DE9B72;
	height: 100%;
	width: 100%;
	margin: auto;
}


/* Decorations */
.corner-decoration {
	position: absolute;
	width: 3em;
	margin: -3px;
	z-index:-1;
}

@media (min-width: 768px) {
	.corner-decoration {
		width: 3.5em;
		margin: -4px;
	}
}

@media (min-width: 992px) {
	.corner-decoration {
		width: 4em;
		margin: -5px;
	}
}

@media (min-width: 1200px) {
	.corner-decoration {
		width: 5em;
		margin: -6px;
	}
}

.corner-decoration.corner-left-top {
	left: 0;
	top: 0;
}

.corner-decoration.corner-right-top {
	top: 0;
	right: 0;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.corner-decoration.corner-right-bottom {
	right: 0;
	bottom: 0;
	-webkit-transform: scale(-1);
	transform: scale(-1);
}

.corner-decoration.corner-left-bottom {
	left: 0;
	bottom: 0;
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
}


.vertical-decoration {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 11em;
}


@media (min-width: 768px) {
	.vertical-decoration {
		width: 16em;
	}
}


@media (min-width: 992px) {
	.vertical-decoration {
		width: 20em;
	}
}

@media (min-width: 1200px) {
	.vertical-decoration {
		width: 27em;
	}
}

.vertical-decoration.top {
	top: 0;
	
}

.vertical-decoration.bottom {
	bottom: 0;
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
}

.dialog-container {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	z-index: 10;
}


/* Убедимся, что декор располагается по краю диалогового окна */
.outer-border,
.mid-border,
.inner-border {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}