@import url('https://fonts.googleapis.com/css2?family=Besley&display=swap');
*{
	margin:0;
	padding:0;
	font-family: Besley, serif;
	box-sizing:border-box;
}
.bg{
	position:relative;
}
.img-blr img{
	/* Full height */
	width:100%;
	height:100%; 
	/* Center and scale the image nicely */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position:absolute;
	filter:blur(5px)  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="a"><feComponentTransfer><feFuncA type="linear" slope="10"/></feComponentTransfer></filter>#a');
	background-attachment: fixed;
}
.container{
	width: 100%;
	height: 100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	text-shadow: 5px 5px 90px black;
}
.container img{
	width: 75%;
	border-radius:15px;
	opacity:30%;
	filter: brightness(2.5);
	box-shadow: inset 10px 50px 5000px rgba(255, 255, 255, .5);
}
.container h1{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	color:#fff;
	font-size: 7vw;
	font-weight:600;
	letter-spacing:3px;
}
.container #title{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -190%);
	color:#fff;
	font-size: 4vw;
	font-weight:600;
	letter-spacing:3px;
}
.quotes{
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, 70%);
	color:#fff;
	font-size:3vw;
	font-weight:500;
}
.quotes h2{
	font-size:2vw;
	margin-top:10px;
	font-weight:500;
}
@media screen and (min-width:300px) and (max-width:500px) {
  .container img {
    width: 100%;
	height:auto;
  }
}