/*Universal Rules*/
html{
    margin:0px;
    font-family: sans-serif;
}
p{
    margin:inherit;
}
body{
    margin:inherit;
}
.wrapper{
    width:100%;
    max-width: 390px;
    max-height:840px;
    margin:auto;
}
::before{
    font-family: Arial;
    font-weight: bold;
    font-size:30px;
    display:flex;
    justify-content: center;
    margin-bottom:20px;
    margin-top:25%;
}
a{
    margin-top:10%;
    width:100%;
}
img{
    margin-top:10%;
    width:100%;
}



/*Header*/
    .header{
        position: fixed;
        width:100%;
        max-width: inherit;
        height:90px;
        top:-5px;
        background:#e603c8;
        border-bottom-left-radius: 35px;
        border-bottom-right-radius: 35px;
    }    
        .masthead{
            margin-top:10px;
            margin-left:8px;
        }
            .logo{
                width:54px;
                height:61px;
                margin:inherit;
                float:left;
            }
            .menu{
                margin:0px;
                width:43px;
                height:27px;
                position:absolute;
                left: 326px;
                top: 35px;
            }
            .masthead p{
                color:white;
                font-family: 'Happy Monkey';
                font-size: 28px;
                font-weight: 400;
                line-height: 26px;
                letter-spacing: 0em;
                float:left;
                padding-top:3px;
            }
    /*Side Buttons*/
        .navigation{
            width: 54px;
            position:absolute;
            left: 330px;
            top: 505px;
        }
        .navigation img{
            width:90%;
        }

    .tagline{
        width:100%;
        height:110px;
        background:#e603c8;
        border-bottom-left-radius: 35px;
        border-bottom-right-radius: 35px;
    }
        .tagline p{
            display:flex;
            justify-content: center;
            font-style: italic;
            font-weight: bold;
            padding-top: 84px;
            color: white;
        }


/*animals*/    
    .animals::before{
        content:'MOST POPULAR';
        margin-top:0px;
    }
    .recipes{
        width:100%;
        margin-top:15%;   
    }
        .fish{
            width:inherit;
            margin-top:0px;
        }
            .link1{
                position:absolute;
                top:50%;
                width:100px;
                height:50px;
                background:#0575f5;
                border-top-right-radius: 29px;
                border-bottom-right-radius: 29px;
            }
                .link1 p{
                    display:flex;
                    justify-content:center;
                    margin-top:8px;
                    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                    font-size:240%;
                    color:white;
                }
        /*raindeer*/    
             .link2{
                    position:absolute;
                    top:95%;
                    width:100px;
                    height:50px;
                    background:#54f1ba;
                    border-top-right-radius: 29px;
                    border-bottom-right-radius: 29px;
                }
                .link2 p{
                        display:flex;
                        justify-content:center;
                        margin-top:12px;
                        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                        font-size:160%;
                        color:white;
                    }
        .two::before{
            content:'2 FAVORITES';
            margin-top:25%;
        }
        .dragon{
            margin-top:0px;
        }
            .link3{
                position:absolute;
                top:152%;
                width:200px;
                height:50px;
                background:rgb(237, 68, 68);
                border-top-right-radius: 29px;
                border-bottom-right-radius: 29px;
            }
                .link3 p{
                    display:flex;
                        justify-content:center;
                        margin-top:12px;
                        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                        font-size:160%;
                        color:white;
                }
        /*2 animals*/
            .link4{
                    position:absolute;
                    top:195%;
                    width:200px;
                    height:50px;
                    background:rgb(82, 79, 79);
                    border-top-right-radius: 29px;
                    border-bottom-right-radius: 29px;
                }
                .link4 p{
                    display:flex;
                    justify-content:center;
                    margin-top:12px;
                    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                    font-size:160%;
                    color:white;
                    }
        
/*About Section*/
    .about::before{
        content:'MEET THE CREW';
    } 
    .about{
        width:inherit;
     }
        .about p{
            display:flex;
            justify-content: center;
            color:black;
            margin-top:20px;
            margin-bottom:100px;
            margin-left:50px;
            margin-right:70px;
        }
    .crew{
        display:flex;
        margin:auto;
        width:80%;
        height:100%;
        object-fit: cover;

    }
    .volunteer p{
        display:flex;
        justify-content: center;
    }

/*Rounded Corners*/
    .banner{
        position:relative;
        width:100%;
        height:35px;
        background:none;
        border-bottom-left-radius: 35px;
        border-bottom-right-radius: 35px;
        top:720px;
    }

/*Footer*/
    .footer{
        width:95%;
        height:220px;
        background:#f08de3;
        display:flex;
        flex-direction: row;
        justify-content: center;
    }
        .footer img{
            width:100%;
            height:20%;
            margin-top:15%;
        }
        .tiktok{
            padding-left:200px
        }
        .snapchat{
            padding-right:200px
        }
        .copyright{
            position:relative;
            top:-110px;
            color: white;
            text-align: center;
            font-size: small;
        }