.topnav {
  background-color:transparent;
  overflow: auto;
}

.topnav a {
  font-size:30px;
  background-color: transparent;
  color: white;
  text-align: center;
  margin:20px;
  text-decoration: underline;
  font-family: "Courier New", Arial; 
  white-space: nowrap;
  display: inline-block;
  animation:flickerAnimation 1s infinite;
  animation-delay: 14s;

}
.topnav a:hover {
  opacity: 0.4;
}

#third {
  background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: jello 5s;
}
@keyframes jello {
  11.1% {
    transform: none
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg)
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg)
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg)
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg)
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg)
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg)
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
  }
  100% {
    transform: none
  }
}
#second {
  background-image:url(https://i.pinimg.com/originals/76/89/c5/7689c5513084cd3ae199cec4f9b84af3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: wobble 5s;

}
#first {
  background-image:url(https://c.pxhere.com/images/f9/8b/e5c5ab2eba372858336d3f75d8ff-1434233.jpg!d);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: kenburns 5s;
  animation-delay: 11s;
  animation: background 10s;
  animation-delay: 11s;
}
@keyframes wobble {
   0% { transform: translateX(0%); } 
   15% { transform: translateX(-25%) rotate(-5deg); } 
   30% { transform: translateX(20%) rotate(3deg); } 
   45% { transform: translateX(-15%) rotate(-3deg); } 
   60% { transform: translateX(10%) rotate(2deg); }
   75% { transform: translateX(-5%) rotate(-1deg); }
   100% { transform: translateX(0%); } 
} 
@keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
        opacity: 0;
    }
}
@keyframes background {
	0% {background-image: url(https://c.pxhere.com/images/f9/8b/e5c5ab2eba372858336d3f75d8ff-1434233.jpg!d);}
	50% {opacity:0.5;}
	100% {background-image: url(https://images7.alphacoders.com/327/thumb-1920-327888.jpg);
		background-repeat: no-repeat; background-size: cover; background-position: fixed;}
}
h1 {
  position: absolute;
  left:70%;
  font:verdana;
  font-size: 55px;
  font-weight: normal;
  text-align: center;
  padding: 5px;
  color: white;
  animation:flickerAnimation 2s infinite;
  animation-delay: 14s;
  writing-mode: vertical-rl;
  text-orientation: upright;
  border: 5px dotted white;
}
#so {
  position: absolute;
  left:60%;
  font:verdana;
  font-size: 55px;
  font-weight: normal;
  text-align: center;
  color: white;
  animation:fadein 5s;
  writing-mode: vertical-rl;
  text-orientation: upright;
  border: 5px dotted white;
  height: 600%;
  padding: 0px 80px;
  animation:flickerAnimation 2s infinite;
  animation-delay: 7s;
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

img {
  width: 500px;
  height: auto;
  margin:0px;
  display: block;
  position: relative;
  left:15%;

}
.do {
  position: relative;
  left:15%;
  font:arial;
  font-size: 40px;
  text-align: center;
  background-color:yellow;
  padding: 0px 157px 250px 157px;
  margin:0px 0px 50px 0px;
  display: inline-block;
  border: 1px dotted black;
  color:red;
  transform:rotate(90deg);

}
.doe img {
  position: absolute;
  top:90px;
  left:210px;
  width:auto;
  height:40px;
}
.doe p {
  position: absolute;
  top:150px;
  left:0px;
  width:auto;
  height:40px;
  font-size:20px;
  padding:0px 20px;
  font-family:"Comic Sans MS";
  color:red;

}
.doi {
  position: relative;
  left:15%;
  font:arial;
  font-size: 40px;
  text-align: center;
  background-color:red;
  padding: 0px 176px 200px 176px;
  margin:0px 0px 80px 0px;
  display: inline-block;
  color:yellow;
  transform: rotate(270deg);
}
.doei img {
  position: absolute;
  top:100px;
  left:150px;
  width:auto;
  height:50px;
}
.doei p {
  position: absolute;
  top:150px;
  left:0px;
  width:auto;
  height:40px;
  font-size:20px;
  padding:0px 20px;
  font-family:"Comic Sans MS";
  color:yellow;
}
.doii {
  position: relative;
  left:15%;
  font:arial;
  font-size: 40px;
  text-align: center;
  background-color:#ff5800;
  padding: 0px 149px 200px 149px;
  margin:0px 0px 70px 0px;
  display: inline-block;
  transform: rotate(90deg);
}
.doeii img {
  position: absolute;
  top:100px;
  left:130px;
  width:auto;
  height:50px;
  background-color: white;
}
.doeii p {
  position: absolute;
  top:150px;
  left:0px;
  width:auto;
  height:40px;
  font-size:20px;
  padding:0px 20px;
  font-family:"Comic Sans MS";
  color:#362312;
}
.doiii {
  position: relative;
  left:15%;
  font:arial;
  font-size: 40px;
  text-align: center;
  background-color:white;
  padding: 0px 170px 200px 170px;
  margin:0px 0px 70px 0px;
  display: inline-block;
  color:#997950;
  transform: rotate(270deg);
}
.doeiii img {
  position: absolute;
  top:100px;
  left:130px;
  width:auto;
  height:50px;
}
.doeiii p {
  position: absolute;
  top:150px;
  left:0px;
  width:auto;
  height:40px;
  font-size:20px;
  padding:0px 20px;
  font-family:"Comic Sans MS";
  color:#997950;
}
.doiiii {
  position: relative;
  left:15%;
  font:arial;
  font-size: 40px;
  text-align: center;
  background-color:red;
  padding: 0px 152px 200px 152px;
  margin:10px 0px;
  display: inline-block;
  color:white;
  transform: rotate(90deg);
}
.doeiiii img {
  position: absolute;
  top:100px;
  left:130px;
  width:auto;
  height:50px;
  background-color: white;
}
.doeiiii p {
  position: absolute;
  top:150px;
  left:0px;
  width:auto;
  height:40px;
  font-size:20px;
  padding:0px 20px;
  font-family:"Comic Sans MS";
  color:white;
}
.re {
  float:left;
  position: relative;
  left:0px;
  width:auto;
  height:300px;
  margin: 10px;
}
.rei {
  position: absolute;
  top:220px;
  left:138px;
  background-color: white;
  font:arial;
  font-size: 30px;
  padding:0px 10px;
  text-align: center;
  max-height: 100px;
  display: inline-block;
  overflow: hidden;
}
.rei:hover {
	overflow: visible;
	max-height: 400px;
	background-image: url(https://www.outsideonline.com/sites/default/files/styles/img_600x600/public/2019/01/02/yosemite-valley-shutdown-2019_s.jpg?itok=DSwzZx9b);
	color:white;
	font-weight: bold;
	animation: shake 0.5s;
	animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.ree {
  float:left;
  position: relative;
  top:200px;
  left:0px;
  width:auto;
  height:350px;
  margin:10px;
}
.reei {
  position: absolute;
  top:375px;
  left:158px;
  background-color: white;
  font:arial;
  font-size: 30px;
  padding:0px 20px;
  overflow: hidden;
  max-height: 110px;
  text-align: center;
}
.reei:hover {
	overflow: visible;
	max-height: 400px;
	background-image: url(https://evaluefield.s3.amazonaws.com/13%2F13026127%2F5-180814171823.jpg);
	color:white;
	animation-name:floating;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  border-radius: 100px;
}
.reee {
  float:left;
  position: relative;
  top:200px;
  width:auto;
  height:350px;
  margin: 10px;
}
.reeii {
  position: absolute;
  top:310px;
  left:78px;
  background-color: white;
  font:arial;
  font-size: 30px;
  padding:0px 125px;
  white-space: nowrap;
  max-height: 70px;
  overflow: hidden;
}
.reeii:hover {
  max-height: 120px;
  background-image: url(https://www.journeywonders.com/wp-content/uploads/2014/05/The-Great-Wall-of-China-770x513.jpg);
  width: 600%;
}
@keyframes floating {
	from {transform: translate(0,0px);}
	55% {transform: translate(0,-205px);}
	to {transform: translate(0,-0px);}
}
.reeeee {
  float:left;
  position: relative;
  top:600px;
  width:auto;
  height:200px;
  margin: 10px;
}
.reeiii {
  position: absolute;
  top:330px;
  left:75px;
  background-color: white;
  font:arial;
  font-size: 30px;
  padding:0px 45px;
  white-space: nowrap;
  max-height: 70px;
  overflow: hidden;
  margin-bottom: 100px;
}
.reeiii:hover {
  max-height: 200px;
  background-image: url(https://www.outriggerreef-onthebeach.com/resourcefiles/attractionsmallimages/oahu-and-waikiki-beaches-in-hawaii-th.jpg);
}
#go img {
	width: auto;
	height: 100px;
	animation: animateCloud 15s infinite;
	background-color: transparent;
}
@keyframes animateCloud {
	0% {
		margin-left: -1000px;
	}
	100% {
		margin-left: 100%;
	}
}
audio {
  position: fixed;
  top:90%;
}