main{
  font-family: verdana;
}



header{
  font-style: normal;
  font-variant: normal;
  font-size: 10px;
  text-align: right;
  letter-spacing: 3px;
  line-height: 2;
  margin-bottom: 60px;
  color: rgb(250, 250, 51);
}


li a{
	list-style: none;
	font-size: 10pt;
	line-height: 24pt;
  color: yellow;
  text-decoration: none;
}


li a:hover{
  color: white;
}

ul.menu{
  list-style-type: none;
}




.container1 {
  position: absolute;
  width: 100%;
  max-width: 200px;
  top: 150px;
  display: flex;
  align-items: right;
  writing-mode: vertical-rl;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
}

.container1:hover .overlay {
  opacity: 1;
}


.container2 {
  position: absolute;
  width: 100%;
  max-width: 300px;
  right: 300px;
  top: 200px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: white;
}

.container2:hover .overlay {
  opacity: 1;
}

.container3 {
  position: relative;
  width: 100%;
  max-width: 300px;
  left: 100px;
  top: 120px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: white;
}

.container3:hover .overlay {
  opacity: 1;
}

.container4 {
  position: relative;
  width: 100%;
  max-width: 250px;
  left: 50px;
  top: 250px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: white;
}

.container4:hover .overlay {
  opacity: 1;
}

.container5 {
  position: absolute;
  width: 100%;
  max-width: 150px;
  left: 600px;
  top: 700px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
}

.container5:hover .overlay {
  opacity: 1;
}

.container6 {
  position: absolute;
  width: 100%;
  max-width: 220px;
  right: 350px;
  top: 1000px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
}

.container6:hover .overlay {
  opacity: 1;
}

.container7 {
  position: absolute;
  width: 100%;
  max-width: 300px;
  right: 300px;
  top: 1350px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
}

.container7:hover .overlay {
  opacity: 1;
}

.container8 {
  position: absolute;
  width: 100%;
  max-width: 350px;
  top: 1300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
}

.container8:hover .overlay {
  opacity: 1;
}





.mydiv {
  color: yellow;
  letter-spacing: 1.5px;
  font-size: 15px;
  position: relative;
  animation-name: example;
  animation-duration: 8s;
  animation-delay: 2s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {right:0px; top:0px;}
  25%  {right:500px; top:0px;}
  50%  {right:500px; top:200px;}
  75%  {right:0px; top:200px;}
  100% {right:0px; top:0px;}
}