﻿
body
{
	background-color: black;
}

#background-picture
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
}

.carousel-slide
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*opacity: 0;*/
	/*animation: carousel-fade 35s infinite;*/
}

.carousel-slide:nth-child(1) { animation-delay: 0s; }
.carousel-slide:nth-child(2) { animation-delay: 5s; }
.carousel-slide:nth-child(3) { animation-delay: 10s; }
.carousel-slide:nth-child(4) { animation-delay: 15s; }
.carousel-slide:nth-child(5) { animation-delay: 20s; }
.carousel-slide:nth-child(6) { animation-delay: 25s; }
.carousel-slide:nth-child(7) { animation-delay: 30s; }

@keyframes carousel-fade
{
	0%   { opacity: 0; }
	6%   { opacity: 1; }
	14%  { opacity: 1; }
	20%  { opacity: 0; }
	100% { opacity: 0; }
}

.carousel-gradient-overlay
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, 
	rgba(0,0,0,0.3) 25%, 
	rgba(0,0,0,0.7) 50%, 
	rgba(0,0,0,0.3) 75%, 
	rgba(0,0,0,0) 100%);
	pointer-events: none;
}



.free-site
{
position:absolute;
top:50px;
left:50px;
width:200px;
z-index:1;
}


.main-picture
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

.main-picture > div
{
	max-width:640px;
	display: flex;
	flex-direction: column;
	row-gap: 30px;
	/*background-color:aquamarine;*/
}

.main-picture h1
{
	padding: 0;
	margin: 0;
	line-height:0.9;
	text-align: center;
	font-size: 140px;
	color: white;
}

.main-picture h3
{
	padding: 0;
	margin: 0;
	line-height:0.9;
	text-align: center;
	font-size: 44px;
	color: white;
}

.main-picture p
{
	padding: 0;
	margin: 0;
	font-size:26px;
	text-align: center;
	color: white;
}

.main-picture > div > div
{
	display: flex;
	justify-content: center;
	column-gap: 40px;
}

.main-picture button
{
width:120px;
	padding: 10px 20px;
	font-size: 20px;
	border:none;
	border-radius: 20px;
	cursor: pointer;
}

#btnSignIn
{
color:white;
border:1px solid white;
background-color:transparent;
}

#btnSignUp
{
color:white;
border:1px solid white;
background-color:transparent;
}
