*{
	border: 0px;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body{
	height: 100%;
	font-family: sans-serif;
	min-width: 1024px;
}

header {
	background: url(../images/background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	/*background-color: #1F2937;*/
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 150px;
	padding-right: 150px;
}

/*navigation*/
nav {
	background-color: transparent;
	flex:1;
	display: flex;
	align-items: center;
	gap: 20px;
}

nav div {

}

nav a {
	color: #E5E7EB;
	font: 18px sans-serif;
	text-decoration: none;
}

#Logo {
	color: #F9FAF8;
	font: 24px sans-serif;
	font-weight: bold;
	margin-right: auto;
}
/* end of navigation*/

/*header content*/
.header_content {
	flex: 1;
	display: flex;
	gap: 50px;
	padding-top: 60px;
	padding-bottom: 60px;
}

.header_content div {
	flex: 2 1 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: cener;
	color: white;
	gap: 20px;
}

#text_one { font: bold 48px sans-serif; color: #F9FAF8; }
#text_two { font: 24px sans-serif; color: #E5E7EB; }

header button {
	height: 50px;
	width: 80px;
	align-self: start;
	background-color: #3882F6;
	color: white;
}

.header_content img {
	flex: 1 1 0;
	align-self: center;
	height: 50%;
	max-width: 300px;
	min-width: 150px;
	transform: translateX(0px);
	animation: float 6s ease-out infinite;
}
@keyframes float{
	0%{transform: translateY(0px);}
	50%{transform: translateY(-25%);}
	100%{transform: translateY(0px);}
}
/* end of header content*/


.question {
	background-color: #ffffff8f;
	font: italic 24px cursive;
	display: flex;
	justify-content: center;
	align-items: cener;
	padding-top: 20px;
}

/* MAIN */
main{
	background: url(../images/background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-left: 250px;
	padding-right: 250px;
	padding-top: 50px;
	padding-bottom: 100px;
}
main .main_text{
	display: flex;
	flex:1;
	flex-direction: column;
}
main .main_one {
	font: italic 48px cursive;
	align-self: center;
	flex: 1;
}
main .main_two {
	font: bold 18px cursive;
	align-self: end;
	flex: 1;
}

/*slider*/
.slider {
   flex: 1;
   min-width: 500px;
   min-height: 200px;
   max-width: 900px;
   max-height: 300px;
   overflow: hidden;
   transform: translate(0%, 0%);
   background-color: #ffffff8f;
   border-radius: 5vh;
}
.slider .navigation {
   position: absolute;
   bottom: 16px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
}
.slider .bar {
   width: 30px;
   height: 8px;
   margin: 6px;
   cursor: pointer;
   background-color: #000;
   opacity: .5;
   border-radius: 10px;
   transition: all 0.4s ease;
}
.slider .bar:hover {
   opacity: 1;
   transform:scale(1.1);
}
input[name="r"] {
   position: absolute;
   visibility: hidden;
}
.slider .slides {
   width: 400%;
   height: 100%;
   display: flex;
}
.slider .slide {
	display: flex;
   width: 25%;
   transition: all 0.6s ease;
	align-items: center;
}
.slide .slide_content{
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.slide .slide_content .img{
	flex: 1 1 0;
   min-width: 100px;
   min-height: 200px;
   max-width: 200px;
   max-height: 300px;
	margin: 15px;
	border-radius: 50%;
	border: solid 1px gray;
}
.slide_content .name_of_comentator{
	flex: 1 1 0;
	margin: 15px;
	margin-top: 0px;
}
.slider .text_of_coment{
	flex: 2 1 0;
	margin: 15px;
	font: 24px sans-serif;
}
#r1:checked ~ .s1 {
   margin-left: 0;
}
#r2:checked ~ .s1 {
   margin-left: -25%;
}
#r3:checked ~ .s1 {
   margin-left: -50%;
}
#r4:checked ~ .s1 {
   margin-left: -75%;
}
/* end of main*/

/* Footer*/
footer {
	background-color: #bbbba554;
	font: italic 12px sans-serif;
	display: flex;
	justify-content: center;
}