*,*::before,*::after {
	box-sizing: border-box;
}
ul[class],ol[class] {
	padding: 0;
}
body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd {
	margin: 0;
}
ul[class],ol[class] {
	list-style: none;
}
input,button,textarea,select {
	font: inherit;
}

:root {
	--accent: #CDA578;
	--btn-hover: #F0CCA3;
	--text: #fff;
	--text-secondary: #B7BBC0;
	--btn-back: #878B90;
	--regular-text: 16px;
	--lineheight: 1.55;
	--transition: 0.2s ease-out;
	--userfont: 'gothampro', sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

@font-face { src: url("font/gothampro.woff2") format("woff2"); font-family: "gothampro"; font-weight: 400; font-style: normal; }
@font-face { src: url("font/gothampro_medium.woff2") format("woff2"); font-family: "gothampro"; font-weight: 500; font-style: normal; }
@font-face { src: url("font/gothampro_bold.woff2") format("woff2"); font-family: "gothampro"; font-weight: 700; font-style: normal; }

body {
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: var(--lineheight);
	font-family: var(--userfont);
	padding: 0 150px;
	background: url('img/bg.png') no-repeat center center;
	background-size: cover;
	color: var(--text);

	/* overflow: hidden; */
}

/* main styles */

.logo{
	margin: 60px 0 110px;
	width: 180px;
	height: 40px;
	background: url('img/logo.svg') no-repeat center center;
}

h1,h2{
	font-weight: 700;
	line-height: 1.3;
	max-width: 620px;
}
h1{
	font-size: 48px;
}
h2{
	font-size: 45px;
}

.btn{
	padding: 20px 0 25px;
	background: var(--accent);
	box-shadow: 0px 15px 30px rgba(205, 165, 120, 0.5);
	border-radius: 5px;
	font-size: 16px;
	text-align: center;
	display: block;
	text-decoration: none;
	border: none;
	color: var(--text);
	font-weight: 700;
	transition: background var(--transition);
}
.btn:hover{
	background: var(--btn-hover);
}
.btn-next, .btn-back{
	padding: 12px 66px;
}
.btn-back{
	color: var(--btn-back);
	border: 2px solid var(--btn-back);
	background: none;
	margin-right: 34px;
	box-shadow: none;
	transition: background var(--transition), border var(--transition);
}
.btn-back:hover{
	border: none;
	background: #fff;
	border: 2px solid #fff;
}
.btn-w{
	display: flex;
	margin-top: 48px;
}

/* start */

.start{
	display: none;	
}
.start__span{
	font-weight: 500;
	font-size: 20px;
	color: var(--accent);
}
.start__title{
	margin: 24px 0 34px;
}
.start__btn{
	width: 280px;
}

/* all questions style */



.q__text{
	margin: 9px 0 40px;
	color: var(--text-secondary);
	font-size: 16px;
}
.q__item{
	margin-bottom: 13px;
}
.q__checkbox{
	display: none;
}
.q__span{
	display: flex;
	position: relative;
	margin-left: 30px;
	user-select: none; 
}
.q__span::before{
	position: absolute;
	top: 0;
	left: -30px;
	content: '';
	margin-right: 10px;
	display: block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--accent);
}
.q__span::after{
	content: '';
	display: block;
	position: absolute;
	top: 6px;
	left: -24px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	display: none;
	background: var(--accent);
}


.q__checkbox:checked + .q__span::after{
	display: block;
}


/* 1 question */

.question-f{
	display: none;
}

.question-f__btn{
	width: 262px;
}

/* 2 question */
.question-s{
	display: none;
}
.question-s__list{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	max-height: 190px;
	max-width: 585px;
}
.question-s__item{
	display: block;
}

/* 3 question */

.question-th{
	display: none;
}

/* 4 question */

.question-fourh{
	display: none;
}

/* answer */

.answer{
		display: none;
}
.answer__wrapper{
	position: relative;
	margin: 60px 0 28px;
	display: flex;
	width: 100%;
}
.answer__percent{
	margin-right: 20px;
}
.answer__bar{
	position: absolute;
	top: 0;
	left: 60px;
	display: flex;
	align-items: center;
}
.answer__stick{
	width: 3px;
	height: 25px;
	margin-right: 4px;
	background: var(--accent);
	opacity: 0.3;
}

.answer__load{
	opacity: 1;
}

.answer__span{
	color: var(--text-secondary);

}

/* final */

.final{
	/* display: none; */
}

.final__label{
	width: 300px;
	display: block;
	margin-top: 30px;
	margin-bottom: 15px;
}
.final__input{
	padding: 18px;
	background: none;
	border: 2px solid var(--btn-back);
	border-radius: 5px;
	display: block;
	width: 100%;
	color: #fff;
}
.final__input:target{
	border-color: #fff;
}
.final__input::placeholder{
	font-size: 14px;
	color: var(--btn-back);
}
.final__btn{
	width: 300px;
}