@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
body {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  margin: 0;
}


.landing-container {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Krona One', sans-serif;
  overflow: hidden;
  margin-top: 40px;
}

.video-container {
  
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

video {
  width: 100%;
  transform: scale(1.3);
}

.video-overlay{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.75);
	color : white;
	font-family: 'Krona One', sans-serif;
	font-weight: bold;
	font-size: 26px;
}

.video-overlay img{
	width: 50%;
	height: auto;
}

.video-overlay span{
	margin: 10px;
	font-size: 3vw;
}

.landing-container h2{
	width: 100%;
	color: white;
	margin: 0px;
	padding: 50px 0px;
}

.landing-schedule{
	width: 100%;
	display: flex;
	flex-direction: column;
}

.landing-schedule img{
	width: 100%;
	height: auto;
}

.content{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background: linear-gradient(
    180deg,
    #1e0074 3.65%,
    #9700dd 22.92%,
    #c51bf9 43.82%,
    #ff6caa 69.27%,
    #e24b64 100%
  );
}

.lineup{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.home-lineup{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.home-lineup div{
	width: 23%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
	.home-lineup div{
		width: 45%;
	}
}

.home-lineup div img{
	width: 100%;
	height: auto;
}

.home-lineup div h3{
	color: white;
	font-family: 'Krona One', sans-serif;
	font-size: 24px;;
}

.explore{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.explore a{
	border-radius: 10px;
	float: left;
	background: transparent;
	padding: 5px 20px;
	border: 2px solid white;
	color: white;
	text-decoration: none;
	font-size: 12px;
}

.explore a:hover{
	background: white	;
	color: black;
}

.tickets{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.tickets div{
	width: 45%;
	margin-bottom: 20px;
}

.tickets div img{
	width: 100%;
	height: auto;
}

@media screen and (max-width: 700px) {
	.tickets div{
		width: 100%;
	}
}