body, html {
  margin:0; 
  padding:0;
  overflow: hidden;
}
.seventh {
  height: 100vh;
  background: #000000;
  display: block;
  position: relative;
}

.hide{
	display: none !important; 
}

/*FIRST*/

#first {
	height: 100vh;
	display: block;
	position:absolute;
	z-index: 10;
	width:100vw;
	background-color: #000000;
	margin: 0; 
	overflow: hidden;
}
.enter {
    color: #1c1812;
    width: 24%;
    border: none;
    margin-top: 3%;
    margin-left: 38%;
    font-size: 25px;
    padding: 9px;
    border-radius: 2%;
    background-image: radial-gradient(circle, #f8db9f, #f8db9f, #eece93, #e4c288, #dab57d, #d0a972);
}

/*SECOND*/

#second{
	height:100vh;
	width:100vw;
	background-color:#dbdad8;
	margin:0;
	padding:0;
	overflow: hidden;
	position: absolute; 
	z-index: 9; 
}
h2 {
	font-size: 35px;
    margin-bottom: 7%;
}
input {
	margin-bottom: 10px;
  	line-height: 35px; 
  	width: 80%;
  	background: #e0dedf;
  	border: 1px solid #e0dededf;
  	color: black;
  	font-size: 22px; 
}
.male {
	font-size: 23px;
    padding: 10px 14px;
    background: #e0dedf;
    border: 1px solid #e0dedf;
    border-radius: 10%;
    color: #6f6f6f;
    margin-right: 5%;
}
.female {
	font-size: 23px;
    padding: 10px 14px;
    background: #e0dedf;
    border: 1px solid #e0dedf;
    border-radius: 10%;
    color: #6f6f6f;
    margin-right: 5%;
}
.buttonActiveClass {
	font-size: 23px;
    padding: 10px 14px;
    background: #f0f1f5;
    border: 1px solid #f0f1f5;
    border-radius: 7%;
    margin-right: 5%;
    box-shadow: 9px 6px 12px 4px #c0bfc5;
}
.container_for_data {
	width: 50%;
  	height: 100vh; 
  	display: inline-block;
}
.container_for_data_2 {
	width: 46.1%;
 	background-image: url('image/boat_1.png'); 
 	background-repeat: no-repeat;
 	background-size: contain; 
  	height: 100vh; 
  	display: inline-block;
  	float: right;	
}
.different {
	background-image: url('image/connection.png'); 
 	background-repeat: no-repeat;
 	background-size: contain;
}
.input_fields {
	width: 80%; 
	padding-left: 9%;
	padding-top:8%;
	height: 100%;
}
label {
	color: #424242;
    font-size: 21px;
    border-bottom: 2px solid #727071;
    width: 100%;
    display: block;
    padding-bottom: 3%;
    margin-bottom: 3%;
}
.submit {
    color: #1c1812;
    width: 50%;
    border: none;
    margin-top: 18%;
    margin-left: 25%;
    font-size: 20px;
    padding: 8px;
    border-radius: 2%;
    background-image: radial-gradient(circle, #f8db9f, #f8db9f, #eece93, #e4c288, #dab57d, #d0a972);
}
.toBeginning {
	color: #1c1812;
    width: 50%;
    border: none;
    margin-top: 18%;
    margin-left: 25%;
    font-size: 20px;
    padding: 8px;
    border-radius: 2%;
    background-image: radial-gradient(circle, #f8db9f, #f8db9f, #eece93, #e4c288, #dab57d, #d0a972);

}
.borderBox {	    
	width: 90%;
    height: 93%;
    margin-top: 3.5%;
    margin-left: 4%;
    border-image: linear-gradient(to bottom, #5b4516, #786234, #958052, #b3a072, #d2c194, #dbc999, #e4d29e, #eddaa3, #e1ca8b, #d5ba74, #caaa5d, #be9a46);
    border-width: 4px;
    border-style: solid;
    border-image-slice: 1;
}
.input_fields_changed {
	animation-name:input_fields_changed;
	animation-iteration-count: 1; 
	animation-duration: 0.4s; 
	animation-fill-mode: both;
	animation-timing-function: linear; 
	animation-delay:0s;
}
.container_for_data_changed {
	animation-name:container_for_data_changed;
	animation-iteration-count: 1; 
	animation-duration: 0.6s; 
	animation-fill-mode: both;
	animation-timing-function: linear; 
	animation-delay:0.5s;
}
.red::placeholder {
	color:red;
}

@keyframes container_for_data_changed {
	from{transform:translateX(0px);}
	to{transform: translateY(100vh)}
}
@keyframes input_fields_changed{
	from{transform:translateX(0px);}
	to{transform: translateY(-800px)}
}


/*THIRD*/

#third {
	background: #dbdad8;
	height: 100vh;
	overflow: hidden;
	position:absolute;
 	z-index: 8;
  	width:100vw;
}
#third_2 {
	background: #dbdad8;
	height: 100vh;
	overflow: hidden;
	position:absolute;
 	z-index: 7;
  	width:100vw;
}
.container_for_questions {
    width: 89%;
    height: 85%;
    margin-left: 2%;
    margin-top: 2%;
    background-color: #dbdad8;
    color: white;
    position: relative;
    border-image: linear-gradient(to bottom, #5b4516, #786234, #958052, #b3a072, #d2c194, #dbc999, #e4d29e, #eddaa3, #e1ca8b, #d5ba74, #caaa5d, #be9a46);
    border-width: 4px;
    border-style: solid;
    border-image-slice: 1;
    padding: 3%;
}
.container_for_answer {
	width:45%;
	height: 100vh;
	margin-left: 45%; 
	background-color: rgba(0, 0, 0, 0.4); 
	color:white;
	position: relative; 
}
.question {
	padding:20px;
}
.answers_1 {
	margin-top: 10%;
	margin-left: 3%;
}
.answers_2 {
	margin-top: 13%;
	margin-left: 0px;
}
.answer {
	display: inline-block;
	width: 30%;
	font-size: 28px;
	color:black; 
	margin-right: 3%;
}
.answer_2 {
	display: inline-block;
	width: 33%;
	font-size: 28px;
	color:black; 
	margin-right: 0px;
}
.answer img {
	display: block; 
}
.answer_1 img {
	display: block; 
}
.text_1, .text_2{
	display: block; 
	text-align: center;
}

/*FOURTH, FIFTH, SIXTH*/

#fourth, #fifth, #sixth {
	height:100vh;
	width:100vw;
	background-color:#dbdad8;
	margin:0;
	padding:0;
	overflow: hidden;
	position: absolute; 
    z-index: 6;
}
.input_fields_2 {
	width: 80%; 
	padding-left: 9%;
	padding-top:8%;
	height: 100%;
}

/*** LOGIN PAGE ***/
.login_container {
	display: flex;
	background: black;
	height: 100vh; 
	justify-content: center; 
	align-items: center
}
.login_main {
	position:relative; 
}
.inputs {
	position:absolute; 
	top:36%;
	left:26%;
	width:45%;
	height: 40%;
}
.input_up {
	margin-bottom: 10px;
    line-height: 35px; 
    width: 100%;
    background: black;
    border: 1px dotted white;
    color: white;
    font-size: 22px; 
}
.input_down {
	margin-bottom: 10px;
    line-height: 35px; 
    width: 100%;
    background: black;
    border: 1px dotted white;
    color: white;
    font-size: 22px; 
}
.login {
	text-align: center;
    margin-left: 4%;
    width: 44%;
    background: black;
    color: white;
    border: 1px dotted white;
    line-height: 32px; 
    margin-top: 10px; 
    font-size: 20px;
}
.input_up_changed {
	animation:input_up 0.5s, input_width 1s, border_none 0.1s;
	animation-iteration-count: 1, 1, 1; 
	animation-fill-mode: both, both, both;
	animation-timing-function: linear, linear, linear; 
	animation-delay:0s, 0.6s, 1.6s;
}
.input_down_changed {
	animation:input_down 0.5s, input_width 1s, border_none 0.1s;
	animation-iteration-count: 1, 1, 1;  
	animation-fill-mode: both, both, both;
	animation-timing-function: linear, linear, linear; 
	animation-delay:0s, 0.6s, 1.6s;
}
.login_changed {
	animation:login_wait 1s; 
	animation-iteration-count: 1;  
	animation-fill-mode: both;
	animation-timing-function: linear; 
	animation-delay:1s;
}

@keyframes input_up {
	from{transform:translateY(0px)}
	to{transform:translateY(25px)}
}

@keyframes input_down {
	from{transform:translateY(0px)}
	to{transform:translateY(-25px)}
}

@keyframes input_width {
	0%  {margin-left:0%;width:100%;margin-right:0%;}
	100% {margin-right:50%; width:0%; margin-left: 50%}
}
@keyframes border_none {
	0% {border:1px dotted white;}
	100% {border:0px;}
}
@keyframes login_wait {
	0% {margin-top:10px; border-radius: 0%; line-height:32px;}
	100% {margin-top:-120px; border-radius: 50%;line-height:120px;}
}
@keyframes login_wait {
	0% {margin-top:10px; border-radius: 0%; line-height:32px;}
	100% {margin-top:-120px; border-radius: 50%;line-height:120px;}
}