*{
    margin: 0;
    padding: 0;
    font-family: 'Heebo', sans-serif;
   

}
html {
  scroll-behavior: smooth;
}
.nav{
  display: flex;
  /* position: sticky; */

  top: 0px;
  z-index: 4;
  border-radius: 3px;
}
body{
  overflow-x: hidden;
  display: grid;

}

#panda{
  margin-left: auto;
  margin-right: auto;
  
}
#TITLECARD{
  font-family: 'Heebo', sans-serif;
  font-weight: 900;
  font-size: 800%;
  color: antiquewhite;
  position: absolute;
  margin-left: 30%;
  margin-right: auto;
  top: 230%;
  mix-blend-mode: luminosity;

}
#sticks{
  display: block;
  margin-top: 90%;
}
.titlecards{
  position: relative;
}

#descriptor{
  color: aliceblue;
  font-weight: 200;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15%;
  text-align: justify;
  width: 60%;
  display: flex;
  background-color: rgb(13, 13, 13);

}
#titles{
  font-family: 'Heebo', sans-serif;
  font-weight: 900;
  font-size: 800%;
  color: white;
  position: absolute;
  display: grid;
  margin-left: 5%;
  margin-right: auto;
  margin-top: 60%;
  align-items: center;

}

#titles1{
  font-family: 'Heebo', sans-serif;
  font-weight: 900;
  font-size: 800%;
  color: rgb(255, 255, 255);
  position: absolute;
  display: grid;
  margin-left: 35%;
  margin-right: auto;
  margin-top: 100%;
  align-items: center;
  filter: drop-shadow(10px 10px 4px #000000aa);
}
#titles2{
  font-family: 'Heebo', sans-serif;
  font-weight: 900;
  font-size: 800%;
  color: rgb(255, 255, 255);
  position: absolute;
  display: grid;
  margin-left: 5%;
  margin-right: auto;
  margin-top: 135%;
  align-items: center;
  filter: drop-shadow(10px 10px 4px #000000aa);
}
#titles3{
  font-family: 'Heebo', sans-serif;
  font-weight: 900;
  font-size: 800%;
  color: rgb(255, 255, 255);
  position: absolute;
  display: grid;
  margin-left: 49%;
  margin-right: auto;
  margin-top: 175%;
  align-items: center;
  filter: drop-shadow(10px 10px 4px #000000aa);

}
#titles4{
  font-family: 'Heebo', sans-serif;
  font-weight: 900;
  font-size: 800%;
  color: rgb(255, 255, 255);
  position: absolute;
  display: grid;
  margin-left: 5%;
  margin-right: auto;
  margin-top: 210%;
  align-items: center;
  filter: drop-shadow(10px 10px 4px #000000aa);
}


.banner{
    width: 100%;
    height: 1200vh;
    background-color: rgba(194, 35, 35, 0.911);
    background-image: url(images/backgrounddd.png);
    background-size: cover;
    background-position: top;
    position: absolute;
    top: 0px;
    opacity: 100%;
    z-index: -2;
    
}
#subheading{
  margin-left: 5%;
  margin-right: auto;
  font-weight: 400;
}

.container{

    
}
#subhead{
  margin-left: 4%;
}
#centering{
  margin-left: 20%;
  margin-right: auto;
  display: flex;
}
.title{
    font-family: 'Heebo', sans-serif;
    font-weight: 900;
    font-size: 100%;

  display: flex;
  
    margin-left: auto;
    margin-right: auto;
}
#myVideo {
    position: absolute;
    display: flex;
    margin-left: 12%;
    align-items: row;
    scale: 40%;
    animation-name: videoz;
    animation-duration: 10s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    mix-blend-mode: luminosity;
    
  
  } 

  @keyframes videoz {
    0%   { left:0px; top:-40px;}
    25%  { left:50px; top:-40px;}
    50%  { left:0px; top:-40px;}
    75%  { left:50px; top:-40px;}
    100% { left:0px; top:-40px;}
  }
  .myvideo{
    background-color: white;
    width: 100%;
    transform: scale(40px);
    
  }
  .row{
    flex-direction: column;
    flex: auto;
    align-items: right;
  }
.align.right{
    position: absolute;
    top: 290px;
    right: 20%;
    width: 10%;
    text-align: left;
    font-weight: 800;
    z-index: +1;
    scale: 150%;
    transition-duration: 1s;
    cursor: crosshair;
    
   

}
.align.right:hover{
    position: absolute;
    top: 290px;
    right: 20%;
    width: 10%;
    text-align: justify;
    font-weight: 800;
    z-index: +1;
    scale: 150%;
    color: rgb(0, 0, 0);
    mix-blend-mode: luminosity;
}
.five.columns{
  font-family: 'Heebo', sans-serif;
  font-size: medium;
  font-weight: 600;
  width: 70%; 
  position: absolute;
  top: 650px;
  color: rgb(0, 0, 0);
  left: 13%;
  background-color: rgba(255, 60, 0, 0);
  border-radius: 5px;


  
}
#forest{
  align-items: center;
  height: 650px;
  padding: 2%;
  padding-left: 0%;
  scale: 60%;
  border: 5%;
  border-color: aliceblue;
}
.animal{
  overflow: hidden;
position: relative;
display: flex;
top: 7000px;
left: 20%;
scale: 90%;
animation-name: slidecat;
animation-duration: 1s;
border-radius: 12%;
border-color: aqua;

}
#leopard{
  width: 100%;
  height: 100%;
  position: relative;

}
.nav{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: rgb(0, 0, 0);
}
nav,li,a,button{
  font-family: 'Heebo', sans-serif;
  font-size: 16;
  font-weight: 500;
  color: rgb(0, 0, 0);

}
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background-color: rgb(255, 238, 0);
  height: 20px;
  position: sticky;
  top: 0px;
  border-radius: 3px;
  z-index: 4;
}
.logo{
  height: 70px;
  width: auto;
  cursor: pointer;

}
.nav_links{
  list-style: none;
  display: flex;
  
}
.nav_links li{
  display: inline-block;
  padding: 0px 20px;

}
.overhunting{
  position: absolute;
  display: block;
  margin-top: 70%;
  padding-left: 52%;
}
#redsquare{
  font-family: 'Heebo', sans-serif;
  font-size: 30;
  font-weight: 600;
  border-radius: 5px; 
  width: 500px; 
  padding: 1%;
}
.climate.change{
  position: absolute;
  display: block;
  margin-top: 110%;
margin-left: 11%;
  padding-left: 22%;
  font-family: 'Heebo', sans-serif;
  font-size: 30;
  font-weight: 600;
  border-radius: 5px; 
  width: 500px; 
  padding: 1%;
}
.deforest{
  position: absolute;
  display: block;
  margin-top: 145%;
margin-left: 61%;
  padding-left: 22%;
  font-family: 'Heebo', sans-serif;
  font-size: 30;
  font-weight: 600;
  border-radius: 5px; 
  width: 500px; 
  padding: 1%;
}
.oil{
  position: absolute;
  display: block;
  margin-top: 180%;
margin-left: 11%;
  padding-left: 22%;
  font-family: 'Heebo', sans-serif;
  font-size: 30;
  font-weight: 600;
  border-radius: 5px; 
  width: 500px; 
  padding: 1%;
}
.Plastics{
  position: absolute;
  display: block;
  margin-top: 212%;
 margin-left: 56%;
  padding-left: 12%;
  font-family: 'Heebo', sans-serif;
  font-size: 30;
  font-weight: 600;
  border-radius: 5px; 
  width: 500px; 
  padding: 1%;
}
#forests{
  scale: 50%;
  display: flex;
  margin-top: -10%;
  margin-left: 5%;
  float: left;
  align-items: center;
  
}
#twelves{
  align-items: center;
  float: left;
  background-color: rgba(15, 15, 135, 0);
  display: flex;
  margin-top: 0%;
}
#caption{
  background-color: rgb(255, 255, 255);
  position: absolute;
  display:flex ;
  margin-top: 20%;
  margin-left: 26%;
  border-radius: 2px;
  width: 800px;
}
.rhino{
  margin-top: 150%;
  margin-left: -32%;
  transition-duration: 2s;
  transition: ease-in-out;
  
}
.rhino:hover{
  margin-left: -86%;
  transition-duration: 2s;
  transition-delay: .3s;
  }
#rhinocap{
  position: absolute;
  display: flex;
  width: 500px;
  margin-left: 151%;
  margin-top: -50%;
  font-size: x-large;
}
.leopard{
  margin-top: 290%;
  margin-left: -89%;
  transition-duration: 2s;
  transition: ease-in-out;
  
}
.leopard:hover{
  margin-left: -32%;
  transition-duration: 2s;
  transition-delay: .3s;
  }
#leopardcap{
  position: absolute;
  display: flex;
  width: 500px;
  margin-left: -65%;
  margin-top: -85%;
  font-size: x-large;
}
.tiger{
  margin-top: 500%;
  margin-left: -149%;
  transition-duration: 2s;
  transition: ease-in-out;
  
}
.tiger:hover{
  margin-left: -202%;
  transition-duration: 3s;
  transition-delay: .2s;
  }
#tigercap{
  position: absolute;
  display: flex;
  width: 500px;
  margin-left: 155%;
  margin-top: -65%;
  font-size: x-large;
}
#tigerzz{
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.gorilla{
  margin-top: 700%;
  margin-left: -69%;
  transition-duration: 2s;
  transition: ease-in-out;
  
}
.gorilla:hover{
  margin-left: -15%;
  transition-duration: 2s;
  transition-delay: .3s;
  }
#gorillacap{
  position: absolute;
  display: flex;
  width: 540px;
  margin-left: -65%;
  margin-top: -85%;
  font-size: x-large;
}
.orangutan{
  margin-top: 900%;
  margin-left: -149%;
  transition-duration: 2s;
  transition: ease-in-out;
  
}
.orangutan:hover{
  margin-left: -202%;
  transition-duration: 3s;
  transition-delay: .2s;
  }
#orangutancap{
  position: absolute;
  display: flex;
  width: 500px;
  margin-left: 155%;
  margin-top: -65%;
  font-size: x-large;
}
#orangutanzz{
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
/* .titleslide{
  font-family: 'Heebo', sans-serif;
  font-size: 30;
  font-weight: 900;
  font-size: 390%;
  display: flex;
  margin-top: 260%;
  margin-left: 15%;
  color: white;
  z-index: 6;
  


} */
#animaltitle{
  position: absolute;
  display: flex;
  width: 400px;
  margin-top: 160%;
  margin-left:  -55%;
  color: rgb(255, 0, 0);

}
#blink{
  animation-name: blinks;
  animation-duration: 2.6s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  padding-left: 1%;
  padding-bottom: 2.1%;
  scale: 120%;
}

@keyframes blinks {
    0%   { opacity: 100%;}
    24% { opacity:100%;}
    25%  { opacity: 0%;}
    49%  { opacity: 0%;}
    50%  { opacity: 100%;}
    51%  { opacity: 100%;}
    74% { opacity:100%;}
    75%  { opacity: 0%;}
    100% {  opacity: 0%;}
}