html, body {
    margin:0;
    padding:0;

    /* animation */
    /* scroll-behavior: smooth; */
}

body {
    font-family: "Roboto", serif;
}

h1 {
    color:orangered;
    font-size: 80px;
    padding-top: 2rem;
    text-align: center;
}

/* .gallery {
    width: 100%;
    height: 50vh;
} */

h4 {
    text-align: center;
    color:antiquewhite;
    font-size: 2rem;
}

.row {
    display: flex;
    width: 100%;
    height: 40%;

    /* vertical margin */
    margin: 2rem 0;

}

.box {
    width: 100%;
    height: 100%;
    background-color: lightgray;
    margin: 1rem 1rem;

    border-radius: 6px;
    
    /* move text */
    display: flex;
    justify-content: center;
    align-items: end;

    color: #fff;

    /* size for boxes image */
    background-size: cover;
    background-position: center;

}

#box1 {
    background-image: url('../images/anmial-1.jpg');
}

#box2 {
    background-image: url('../images/anmial-2.jpg');
}

#box3 {
    background-image: url('../images/anmial-3.jpg');
}

#box4 {
    background-image: url('../images/anmial-4.jpg');
}

#box5 {
    background-image: url('../images/anmial-5.jpg');
}

#box6 {
    background-image: url('../images/anmial-6.jpg');
}

#box7 {
    background-image: url('../images/anmial-7.jpg');
}

#box8 {
    background-image: url('../images/anmial-8.jpg');
}

#box9 {
    background-image: url('../images/anmial-9.jpg');
}

#box10 {
    background-image: url('../images/anmial-10.jpg');
}

#box11 {
    background-image: url('../images/anmial-11.jpg');
}

#box12 {
    background-image: url('../images/anmial-12.jpg');
}

footer {
    width:100%;
    height: 10%;
    background-color: aquamarine;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer h5 {
    color: black;
}