html, body{
margin:0;
padding:0;
box-sizing:border-box;
font-weight:bold;
}





.container{

    box-sizing:border-box;
    padding:2rem;
    background-color:#fffce0;
    height:100%;
    display:grid;
    grid-row-gap:3rem;
    column-gap:3rem;
    grid-template-columns:repeat(auto-fit, minmax(0,1fr));
    grid-template-rows:auto auto auto auto auto auto auto auto;
    grid-template-areas:
    "h h h h h h h h h h h"
    "c c c . g g g . d d d"
    "w w w w w w w w w w w"
    "p p p p p p p p p p p"
    ". . k k k . i i i . ."
    "z z z z z z z z z z z"
    "b b b . a a a . s s s"
    "t t t t t t t t t t t"
    "f f f f f f f f f f f"
    "f f f f f f f f f f f";
  
}

img{
    width:100%;
    height:100%;
}


.header{
    grid-area: h;
    background-image:url("../images/bambooforest.jpg");
    background-color:lightcyan;
    text-transform:uppercase;
    text-align:center;
    color:white;
    border: 0.13rem solid black;
    padding:0.625rem 0;
    font-family:'Times New Roman', Times, serif;
}

nav ul{
    list-style-type:none;
    display:flex;
    justify-content:space-evenly;
}

nav > ul > a> li{
    color:white;
    font-size:1.3rem;
    font-weight:2rem;
    
}

 
.colorful{
    background-color:transparent;
    border-radius:.8rem;
    color:white;
    cursor:pointer;
    padding: .25rem .25rem;

}

.colorful:hover{
    background-image:linear-gradient(90deg, darkgreen 0%, beige 49%, lightyellow 80%, black 100%);
    animation:slide 3s linear infinite;
}

@keyframes slide{
    to{
        background-position:5vw;
    }
}

.dropdown .dropbtn{
    font-size:1.3rem;
    width:7rem;
    height:3rem;
    color:white;
    background-color:inherit;
    font-family:inherit;
    margin-bottom:.5rem;
    border: 0.13rem dashed white;
}

a:hover .dropdown:hover .dropbtn{
    background-color:lightgrey;
}

.dropdown-content{
    display:none;
    position:absolute;
    width:4rem;
    font-size:.7rem;
}

.dropdown-content a{
    color:black;
    text-decoration:none;
    display:block;
    padding-left:.5rem;
    padding-bottom:2rem;
}

.dropdown-content a:hover{
    background-color:lightgrey;
}

.dropdown:hover .dropdown-content{
    display:block;
}


.contentc{
    grid-area:c;
    
    background-color:darkgreen;
    border: 0.13rem solid black;
    overflow-wrap:anywhere;
    overflow-y:scroll;

}


.contentc::-webkit-scrollbar{
    display:none;
 }

a:link{
    color:white;
}
   
a:visited{
    color:white;
}

a:hover{
    color: palegreen;
    text-decoration: none;
}

a:active{
    color:rgb(198,182,255);
     
}
    
    

 

.contentg{
    grid-area:g;
    background-color:darkgreen; 
    border: 0.13rem solid black;
    overflow-wrap:anywhere;
    overflow-y:scroll;
}

.contentg::-webkit-scrollbar{
    display:none;
 }
 
.contentd{
    grid-area:d;
    background-color:darkgreen;
    border: 0.13rem solid black;
    overflow-wrap:anywhere;
    overflow-y:scroll;
}
.contentd::-webkit-scrollbar{
    display:none;
 }
 

.contentp{
    grid-area:p;
    background-color:lightgrey;
    border: 0.13rem solid black;
    font-size:2.5rem;
    text-align:center;
    font-family:'Times New Roman', Times, serif;
    overflow-wrap:anywhere;
    overflow-y:scroll;
}

.contentp::-webkit-scrollbar{
    display:none;
    }
 
.contentk{
    grid-area:k;
    background-color:darkgreen;
    border: 0.13rem solid black;
    padding-top:5rem;
    position:relative;
    padding-bottom:56.25%;
    width:100%;
    overflow:hidden;
  
}

.contentk::-webkit-scrollbar{
    display:none;
    }

.iframe-container{
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;

}

.contenti{
    grid-area:i;
    background-color:darkgreen;
    border: 0.13rem solid black;
    position:relative;
    padding-bottom:56.25%;
    width:100%;
    overflow:hidden;
}

.contenti::-webkit-scrollbar{
    display:none;
    }
 

.contentz{
    grid-area:z;
    background: linear-gradient(lightgrey,green);
    border: 0.13rem solid black;
    font-size:2.5rem;
    text-align:center;
    font-family:'Times New Roman', Times, serif;
    overflow-wrap:anywhere;
    overflow-y:scroll;
    

}

.contentz::-webkit-scrollbar{
    display:none;
    }

.contentb{
    grid-area:b;
    background-color:lightgray;
    border: 0.13rem solid black;
}

.contentb img{
    display:block;
    width:100%;
    height:100%;
    }


.contentb::-webkit-scrollbar{
    display:none;
    }

.contenta{
    grid-area:a;
    background-color:lightgray;
    border: 0.13rem solid black;
}

.contenta img{
display:block;
width:100%;
height:100%;
}
.contenta::-webkit-scrollbar{
    display:none;
    }

.contents{
    grid-area:s;
    background-color:lightgray;
    border: 0.13rem solid black;
}

.contents img{
    display:block;
    width:100%;
    height:100%;
    }

.contents::-webkit-scrollbar{
    display:none;
    }

.table{
    grid-area:t;
    margin-left:auto;
    margin-right:auto;
    border: 0.13rem solid black;
    background-color:lightgray;
    font-size:0.70rem;
}

.featured-title{
    font-weight:bolder;
    font-family:Georgia, 'Times New Roman', Times, serif;
    color:brown;
    text-decoration:underline;
}



.box{
  position:absolute;
  margin: -10% 10% 10% 2.5%;
    height:auto;
    width:auto;
     opacity:0;
     transition:.5s ease;
     border: 0.13rem solid black;
}
.container:hover .image{
    opacity: .1;
}
 
.container:hover .box{
    opacity: 1;
}


.text{
    color:black;
    font-size:1.56rem;
    background-color:white;
    padding:0.625rem;
}


.footer{
    grid-area:f;
    text-align:center;
    border: 0.13rem solid black;
    justify-content:space-around;
    display:flex;
    align-items:center;
    background-image:url("../images/bambooforest.jpg");
    background-repeat: no-repeat;
    color:black;
    font-size:1.5rem;
}

.footer > ul{
    margin-left:0rem;
    list-style-type:none;
}

.footer > ul > a{
    text-decoration:none;
}

.footer > ul > a > li{
    color:black;
}

.symbol ul{
    padding-left: .3rem;

}

.fa{
    padding: .3rem;
    text-align:center;
    text-decoration:none;
    margin: .04rem .04rem;

}

.fa:hover{
    opacity: 0.7;
}

.fa-facebook{
    background:#3B5998;
    color:white;
}

.fa-twitter{
background:#55ACEE;
color:white;
}

.fa-instagram{
background:#125688;
color:white;
}

.fa-snapchat-ghost{
    background:#fffc00;
    color:white;
    text-shadow: -.06rem black, 0 .06rem black, .06rem 0 black, 0 -.06rem black;
}

.backgroundimage{
background-image:url('../images/pandabackground.jpg');
background-color:white;
height:31.25rem;
background-position:center;
background-size:cover;
position:relative;
}

.parallaxw{
    background-image: url('../images/giantpandamain.jpg');
    border: 0.13rem solid black;
    max-width:100%;
    min-height:25rem;
    grid-area:w;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
 
}

.parallaxa{
    background-image: url('../images/pandashabitat2.jpg');
    border: 0.13rem solid black;
    max-width:100%;
    min-height:25rem;
    grid-area:w;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
 
}

.parallaxb{
    background-image: url('../images/reserves.jpg');
    border: 0.13rem solid black;
    max-width:100%;
    min-height:25rem;
    grid-area:w;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
 
}

.parallaxc{
    background-image: url('../images/redpandapara.jpg');
    border: 0.13rem solid black;
    max-width:100%;
    min-height:25rem;
    grid-area:w;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
}

.parallaxd{
    background-image: url('../images/nationalzoo2.jpg');
    border: 0.13rem solid black;
    max-width:100%;
    min-height:25rem;
    grid-area:w;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
}

.parallaxe{
    background-image: url('../images/berlinzoo.jpeg');
    border: 0.13rem solid black;
    max-width:100%;
    min-height:25rem;
    grid-area:w;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
   
}

.parallaxf{
    background-image: url('../images/shanghaizoo.jpg');
    border: 0.13rem solid black;
    max-width:100%;
    min-height:25rem;
    grid-area:w;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
   
}

#grad1 { 
    height:12.5rem; 
    background: linear-gradient(lightgrey,green); 
}

#grad2{
    height:12.5rem; 
    background: linear-gradient(lightgrey, darkgrey); 
}


@media only screen and (max-device-width: 48.75rem) {
    .container{
        grid-row-gap:.7rem;
        grid-column-gap:.7rem;
        padding:.5rem;
    }

    .parallaxw{
        background-attachment:scroll;
    }
  
    h1{
        font-size:.7rem;

    }

    nav ul{
        font-size:.75rem;
    }

    .dropdown .dropbtn{
        font-size:.7rem;
        width:4rem;
    }

    .text{
        color:black;
        font-size:.56rem;
        background-color:white;
        padding:0.325rem;

    }

    .contentz{
        font-size:1.2rem;
    }

    .footer{
        font-size:.5rem;

    }

    .container2{
        font-size:.4rem;
    }
}



#contentgg{
    background-color:lightgrey;
    font-weight:2rem;
}

#contentdd{
    background-color:lightgrey;
    font-weight:2rem;
}

#contentcc{
    background-color:lightgrey;
}

#two{
    background-color:#F9E0C2;
    background-image:url('../images/backgroundrepeat.jpg');
    background-image:repeat;
}

#three{
    background-color:#B0D8E6;
}

#four{
    background-color:#FCBAC4;
}

#five{
    background-color:rgb(120, 167, 151)
}

#six{
    background-color:#a77081;
}

#seven{
    background-color:#abe0da
}

