@import url(./style.css);

body, html{
	height: 100vh;
}
#header{
	background: var(--color2);
}


.bg-image {
	/* The image used */
	background-image: url(../imgs/heroes/Suyou.jpg);
  
	/* Add the blur effect */
	filter: blur(8px);
	-webkit-filter: blur(8px);
  
	/* Full height */
	height: 100%;
  
	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }
  
  /* Position text in the middle of the page/image */
  .bg-text {
	color: white;
	font-weight: bold;
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 80%;
	padding: 20px;
	text-align: center;
  }


/* TITLE */
.title-section{
	padding: 15rem 0 2.5rem;
	text-align: center;
}
.title-section h1{
	font-family: var(--font3);
	font-size: 3.5rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
}
.title-section p{
	font-size: 1.5rem;
}
hr{
	margin-bottom: .5rem;
}

.div{
	text-align: center;
	padding: 2.5rem 0;
}
.div p{
	font-family: var(--font3);
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 1.5px;
}
.c{
	background: var(--color4);
	padding: .6rem;
	border-radius: 1.5px;
	letter-spacing: 0;
}
.g{
	color: #000;
	opacity: .3;
}