/* reset css defaults */
html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'montserrat' , sans-serif;
}



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

/* h2 will go heremlater */
h2 {
    text-align: center;
}


.row {
    display: flex;
    width: 100%;
    height: 40%;
    margin: 1rem 0;
}

/* base styling for all boxes */
.box {
    background: lightgrey;
    /* refferencing width and hieght of row element */
    width: 100%;
    height:100%;
    margin: 1rem;
    border-radius: 8px;

    /* appply background image sizing*/
    background-size: cover;
    background-position: center;

    /* apply flexbox realighn the text */
    display: flex;
    justify-content: center;
    align-items: end;
}

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

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

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

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

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

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

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

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

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

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

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

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


/* footer */
footer {
    width: 100%;
    min-height: 300px;
    background-color: black;
}


footer p {
    color: white;
}