* {
    box-sizing: border-box;
}
 
body{
    margin: 0vw;
    width: 100vw;
    overflow-x: hidden;
}

p,h2{
    margin-left: 2vw;
    margin-right: 2vw;
}

p,h2,a,li{
    font-family: 'Comfortaa', sans-serif;
}

h2{
    display:flex;
    justify-content: center;
}

p,li{
    line-height: 2vw; 
}

img{
    display: block;
}

a{
    text-decoration: none;
}

.title{
    font-family: 'Monoton', sans-serif;
    color: rgb(226, 218, 213);
    font-size: 6vw;
    letter-spacing: .25vw;
    position: absolute;
    left: 6vw;
}

.platypus{
    width: 100vw;
}

.navbar{
    display: flex;
    justify-content: center;
    align-items: center; 
    justify-content: space-between;
    background-color: rgb(98, 76, 59);
    padding: 1.5vw;
    height: 8vw;
    font-size: 2vw;
    width: 100vw;
    position: sticky;
    top: 0;
}

.gallery,.lc,.pop,.pc,.bio,.venom,.elect{
    color: white;
}

.elect{
    margin-right: 1vw;
}

a{
    color: rgb(160, 95, 44);
} 

a:hover{
    color: rgb(189, 255, 169);
}

.navbar a:hover{
    color: rgb(191, 159, 134);
}

.background{
    background-color:rgb(191, 159, 134);
    padding: 1.5vw;
}

.handb{
    display: flex;
    justify-content: space-between;
    justify-content:right; 
    background-color: rgb(233, 199, 173);
}

.habitat{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* width: 50vw; */
}

.burrow img{
    width: 35vw;
}

.dandf{
    display: flex;
    justify-content:right; 
    align-items: center;
    background-color: rgb(191, 159, 134);
}

.yabby{
    width: 40vw;
}

.lastrow{
    display: flex;
    align-items: right; 
   /* align-items: space-between; */
    background-color: rgb(233, 199, 173);
    padding: 1.5vw;
}

.population{
    width: 150vw;
}

.us{
    margin-left: 0;
}

.representation{
    background-color: rgb(191, 159, 134);
    display: flex;
    justify-content: right; 
    align-items: center;
}

.perryimg{
    margin: 2vw;
}

.pr{
    width: 70vw;
}

.perryimg{
    width: 25vw;
    height: 23.7vw;
    background-image: url("images/perry1.png");
    background-size: contain;
}

.perryimg:hover{
    background-image: url("images/perry2.png");

}

.facts{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(233, 199, 173);
    padding: 1vw;
}

.footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1vw;
    background-color:rgb(98, 76, 59);
    color: white;
}

.logo{
    width: 9vw;
    margin-left: 2vw;
}