body{background-image:url("../image/Dark-forest-haze.jpg");
}
header{
	font-family:basic gothic;
	font-size: 10px;
	color: white;
	position: absolute;
	top: 10%;
    white-space: nowrap;
    animation: appear 20s infinite ease-in-out;
}
@keyframes appear{
	from{
		transform: translateX(-100%);
	}
	to{
		transform: translateX(250%);
	}
}

h9{font-family:basic gothic;
font-size: 20px;
color: white;
position: absolute;
top: 50%;
  white-space: nowrap;
  animation: appear 19s infinite ease-in-out;
}
@keyframes appear{
from{
  transform: translateX(-80%);
}
to{
  transform: translateX(250%);
}
}

h3{font-family:basic gothic;
font-size: 20px;
color: white;
position: absolute;
top: 70%;
  white-space: nowrap;
  animation: appear 21s infinite ease-in-out;
}
@keyframes appear{
from{
  transform: translateX(-90%);
}
to{
  transform: translateX(290%);
}
}


h4{font-family:basic gothic;
font-size: 20px;
color: white;
position: absolute;
top: 30%;
  white-space: nowrap;
  animation: appear 18s infinite ease-in-out;
}
@keyframes appear{
from{
  transform: translateX(-60%);
}
to{
  transform: translateX(250%);
}
}

h5{font-family:basic gothic;
font-size: 20px;
color: white;
position: absolute;
top: 60%;
  white-space: nowrap;
  animation: appear 21s infinite ease-in-out;
}
@keyframes appear{
from{
  transform: translateX(-50%);
}
to{
  transform: translateX(250%);
}
}
h6{font-family:basic gothic;
font-size: 20px;
color: white;
position: absolute;
top: 80%;
  white-space: nowrap;
  animation: appear 17s infinite ease-in-out;
}
@keyframes appear{
from{
  transform: translateX(-40%);
}
to{
  transform: translateX(250%);
}
}
h7{font-family:basic gothic;
font-size: 20px;
color: white;
position: absolute;
top: 20%;
  white-space: nowrap;
  animation: appear 19s infinite ease-in-out;
}
@keyframes appear{
from{
  transform: translateX(-110%);
}
to{
  transform: translateX(250%);
}
}

h8{font-family:basic gothic;
font-size: 20px;
color: white;
position: absolute;
top: 90%;
  white-space: nowrap;
  animation: appear 17s infinite ease-in-out;
}
@keyframes appear{
from{
  transform: translateX(-100%);
}
to{
  transform: translateX(250%);
}
}

.dropdown {
  position:absolute;
  display:inline-table;
  top:30px;left:1080px;
  z-index: 100;
}

.dropdown-content {
  display: none;
  position:absolute;
  background-color: FFFFFF;
  min-width: 100px;
  z-index: 100;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;left:-15px
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}


.dropdown-content2 {
  display: none;
  position:absolute;
  background-color: FFFFFF;
  min-width: 80px;
  z-index: 100;
}

.dropdown-content2 a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display:flex;
}

.dropdown-content2 a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content2 {
  display:block;left:135px;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}


.dropdown-content3 {
  display: none;
  position:absolute;
  background-color: FFFFFF;
  min-width: 120px;
  z-index: 100;
}

.dropdown-content3 a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display:flex;
}

.dropdown-content3 a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content3 {
  display:block;left:210px;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}


h2{
 font-family:syntax;
 position:absolute;top:0px;
 margin-left: 10px;
 color:#FFFFFF;
}


.ui-widget{
  position:absolute;
  right:40%;
  top:40%;
  text-align:right;
}