html,body{
	width: 100%;
	height: 100%;
}
.bg-image{
    background-image: url('https://miro.medium.com/max/3840/1*xMuIOwjliGUPjkzukeWKfw.jpeg');
	height:700px;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	filter: sepia(50%);
	background-attachment: fixed;
	display: inline-block;
}
.title{
	position: absolute;
	color: red;
	text-align: center;
	margin-top: 200px;
	left: 550px;
	display: inline-block;
	font-size: 55px;
	transition-timing-function:2s;
	display: inline-block;
	filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));
    transition-property:all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-duration: 0.6s;
    transition-delay: 0.2s;
    opacity: 0.9;

}
.title:hover {
	background-color: yellow;
	cursor: pointer;
}
.text {
	position: absolute;
	font-size: 30px;
	color: white;
	display: inline-block;
	top: 350px;
	left: 560px;
	filter:drop-shadow(30px 10px 4px #4444dd);
	cursor: pointer;
	transition-property: all;
	transition-timing-function: linear;
	transition-timing-function: 2s;
	transition-duration: 2s;

}
.text:hover {
	transform: rotate3d(30deg);
}
.sun {
	position: absolute;
	height: 100px;
	width: 100px;
	margin-top: 40px;
	display: inline-block;
	filter:drop-shadow(30px 10px 8px #D2691E);
	animation: move 6s infinite;
	left:200px;
	cursor: pointer;
}

@keyframes move {
	0% {left:0px;}
	25%{left:300px;}
	75%{left: 700px;}
	100%{left:900px;}
}