html {}

body {
  width: 100%;
}

h1 {
  font-style: helvetica;
  font-size: 300%;
  margin-top: 3%;
  text-align: center;
}

img {
  width: 50%;
}

#slide4 div {
  width: 70%;
  position: absolute;
  top: 15%;
  left: 10%;
  font-size: 120%;
  width: 50%;
}

#slide4 p {}

#slide4 img {
  width: 20%;
  position: absolute;
  left: 65%;
}

#slide5 div {
  text-align: center;
  width: 100%;
}

#slide5 p {
  font-size: 120%;
  display: inline-block;
  margin: 0 20%;
}

#slide5 img {
  width: 30%;
  margin-top: 5%
}

#slide2 img {
  width: 35%;
  margin-top: 2%;
}

li {
  font-size: 200%;
  font-style: arial;
}

.smallerLi {
  font-size: 50%;
  margin-top: 1%;
}
#slide1 li{
  font-size: 120%;
}

.main {
  height: 200%;
}

.title {
  position: absolute;
  left: 55%;
  text-align: center;
}

.title h6 {
  font-family: cursive;
}

.main p {
  position: absolute;
  top: 90%;
  left: 90%;
  color: blue;
  text-decoration: underline;
}

.main button {
  outline: none;
  border: none;
  background-color: white;
}

.main h5 {
  font-size: 10%;
}

#sourcesy div {
  position: absolute;
  top: 10%;
  left: 10%;
}

#sourcesy h5 {
  font-size: 120%;
}

#imgMain {
  width: 50%;
  position: absolute;
  top: 30%;
  left: 30%;
}

.button {
  background-color: white;
  border: none;
  outline: none;
  cursor: pointer;
}

.bubble {
  background-color: white;
  width: 4%;
  border: none;
  outline: none;
  cursor: pointer;
}

#clicky {
  text-align: center;
  width: 100%;
}

.imges {
  text-align: center;
}

.clicky {
  width: 20%;
  background-color: white;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 120%;
}

#clicky img {
  width: 30%;
}

.bubble1 {
  position: absolute;
  top: 5%;
  left: 20%;
}

.bubble1 img {
  width: 150%;
}

.bubble2 {
  position: absolute;
  top: 17%;
  left: 25%;
}

.bubble2 img {
  width: 120%;
}

.bubble3 {
  position: absolute;
  top: 27%;
  left: 20%;
}

.bubble3 img {
  width: 100%;
}

.bubble4 {
  position: absolute;
  top: 37%;
  left: 25%;
}

.bubble4 img {
  width: 80%;
}

.bubble5 {
  position: absolute;
  top: 47%;
  left: 30%;
}

.largeOverseer {
  width: 100%;
  height: 200%;
}

.slideDiv {
  width: 84%;
  margin: 0px;
  height: 100%;
  display: none;
  margin-left: 8%;
}

.slideDiv img {
  width: 50%;
}

.button-div {
  height: 100%;
  width: 10%;
  background-color: white;
}

.slowRecovery {
  border: 2px solid gray;
  border-radius: 2px;
  width: 13%;
  height: 6%;
  position: absolute;
  top: 17%;
  left: 12%;
  text-align: center;
}

.slowRecovery p {
  margin: 0;
  margin-top: 4%
}

.habitatDestruction {
  border: 2px solid gray;
  border-radius: 2px;
  width: 13%;
  height: 6%;
  position: absolute;
  top: 17%;
  left: 30%;
  text-align: center;
}

.habitatDestruction p {
  margin: 0;
  margin-top: 4%
}

.overfishing {
  border: 2px solid gray;
  border-radius: 2px;
  width: 13%;
  height: 6%;
  position: absolute;
  top: 17%;
  left: 48%;
  text-align: center;
}

.overfishing p {
  margin: 0;
  margin-top: 4%
}

.poaching {
  border: 2px solid gray;
  border-radius: 2px;
  width: 13%;
  height: 6%;
  position: absolute;
  top: 17%;
  left: 66%;
  text-align: center;
}

.poaching p {
  margin: 0;
  margin-top: 4%
}

.explaination {
  margin-left: 40%;
  width: 30%;
  font-size: 120%;
  position: absolute;
  top: 22%;
}

#SRimg {
  width: 15%;
  position: absolute;
  left: 30%;
  top: 25%;
  display: none;
}

#HDimg {
  width: 15%;
  position: absolute;
  left: 30%;
  top: 25%;
  display: none;
}

#OFimg {
  width: 15%;
  position: absolute;
  left: 30%;
  top: 25%;
  display: none;
}

#PCimg {
  width: 15%;
  position: absolute;
  left: 30%;
  top: 25%;
  display: none;
}

#mainMain {
  width: 8%;
  height: 10%;
  margin: 0px;
  cursor: pointer;
  position: absolute;
  top: 10%;
  color: black;
  transition: 0.6s ease;
  font-size: 300%;
  border-radius: 2px;
  border: none;
  outline: none;
  background-color: white;
}

#mainMain:hover {
  background-color: black;
  color: white;
}

#slideButtonBack {
  left: 0px;
  margin-left: 1%;
}

#slideButtonForward {
  right: 0px;
  margin-right: 1%;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {
    opacity: .3
  }

  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .3
  }

  to {
    opacity: 1
  }
}