html, body {
	height: 100%;
	margin: 0;
	font-family: Verdana,sans-serif;
}

html {
	scroll-behavior: smooth;

}

body {
	width: 100%;
	background-image:url(https://funart.pro/uploads/posts/2020-03/1584388175_5-p-epicheskie-temnie-foni-7.jpg);
}

h1, h2, h3, img, body, h4, h5, h3, h2 {
	transition: all .7s;
}

.hi {
	text-align: center;
	color: green;
}

#panel {
	position: sticky;
	top: 0;
	background-color: grey;
	padding: 10px;
	font-size: 20px;
	float: left;
}

.img {
	width: 700px;
	height: 400px;
	padding: 20px;
	float: left;
	box-sizing: border-box;
}

.first {
	color: yellow;
	text-align: justify;
	font-family: Segoe Print;
}

a {
	text-decoration: none;
}

.list_menu li a {
	padding: 5px;
	display: block;
	color: #345bab;
	background: #74c0e8;
	border-radius: 6px;
	box-shadow: 5px 5px 5px #555;
	width: 170px;
	text-decoration: none;
	font-family: Segoe Print;
	margin-top: 20px;
	margin-left: -75px;
	position: relative;
	top: 0;
	left: 0;
}


.list_menu li a:hover {
color: #fff;
background: #345bab;
transform: translate(25px, 0);
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}

.img:hover {
color: #fff;
background: #345bab;
transform: translate(15px, 0);
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}

.second {
color: yellow;
text-align: justify;
font-family: Segoe Print;
position: relative;
left: 200px;
}

	#animated_div {
    width: 70px;
    height: 47px;
    background: #92B901;
    color: #ffffff;
    position: relative;
    left:670px;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
    animation: animated_div 5s 1;
    -moz-animation: animated_div 5s 1;
    -webkit-animation: animated_div 5s 1;
    -o-animation: animated_div 5s 1;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    display: block;
}

@keyframes animated_div {

0% {
    transform: rotate(
0deg
);
    left: 400px;
}
25% {
    transform: rotate(
20deg
);
    left: 400px;
}
50% {
    transform: rotate(
0deg
);
    left: 1000px;
}
55% {
    transform: rotate(
0deg
);
    left: 1000px;
}
70% {
    transform: rotate(
0deg
);
    left: 1000px;
    background: #1ec7e6;
}
100% {
    transform: rotate(
-360deg
);
    left: 670px;
}
}

.reklamka {
	color: red;
	text-align: center;
}

#footer {
height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow);
  text-align: center;
  color: blue;
  font-family:Algerian;
}