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

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

body{
        font-family: Georgia, 'Times New Roman', Times, serif
    }

/* NAV BAR */
.navigation{
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
}

.links ul{
    display: flex;
    list-style: none;
    padding: 0 2rem;
}

.links ul li{
    margin: 0 5rem;
}

.links ul li a{
    color: plum;
    text-decoration: none;
}

/* hero image */
.header{
    width: 100%;
    height: 70%;

    /* use flex box */
    display: flex;
    justify-content: center;
    align-items: center;


    /* setting background image */
    background-image: url('../Images/AdobeStock_108963532_Preview.jpeg');
    background-size: cover;
    background-position: center;
}


h1{
    font-size: 80px;
    color: lavender;
}

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

/* projectss */
h2{
    text-align: center;
}

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

    /* vertical margin */
    margin: 1rem 0;
}

/* boxes */
.box{
    width: 75%;
    height: 75%;
    background: lavender;
    margin: 1rem;

    /* round corners */
    border-radius: 8px;

    /* move text */
    display: flex;
    justify-content: center;
    align-items: end;

    color: plum;
    background-size: cover;
}

#box1{
    background-image: url(../Images/AdobeStock_102159048_Preview.jpeg);
}
#box2{
    background-image: url(../Images/AdobeStock_145067807_Preview.jpeg);
}
#box3{
    background-image: url(../Images/AdobeStock_190144535_Preview.jpeg);
}
#box4{
    background-image: url(../Images/AdobeStock_231076264_Preview.jpeg);
}
#box5{
    background-image: url(../Images/AdobeStock_251133408_Preview.jpeg);
}
#box6{
    background-image: url(../Images/AdobeStock_295786114_Preview.jpeg);
}
#box7{
    background-image: url(../Images/AdobeStock_303122808_Preview.jpeg);
}
#box8{
    background-image: url(../Images/AdobeStock_303122862_Preview.jpeg);
}
#box9{
    background-image: url(../Images/AdobeStock_303911099_Preview.jpeg);
}
#box10{
    background-image: url(../Images/AdobeStock_350520010_Preview.jpeg);
}
#box11{
    background-image: url(../Images/AdobeStock_357609274_Preview.jpeg);
}
#box12{
    background-image: url(../Images/AdobeStock_108963532_Preview.jpeg);
}



footer{
    width: 100%;
    height: 200px;
    background-color: pink;

}