demo4a.css

/* This is how you write a comment in CSS! */

/* Make the navbar links sliiide to their targets, instead of jumping. */
html {
    scroll-behavior: smooth;
}

/* Color the background and add some space to the sides of the main column. */
.container-fluid {
    background-color: #F8B003;
    /* We use !important to override the padding setting that Bootstrap already put for the container-fluid class. */
    padding-left: 10% !important;
    padding-right: 10% !important;
}

/* Color the main column background white. */
.col {
    background-color: white;
}

/* Put a nice frame with smoothened corners and a soft shadow around all images on the page. */
img {
    border: 4px solid white;
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(17,17,17,0.2);
}

/* Color the second (photography) section's background light gray for contrast. */
#photography {
    background-color: whitesmoke;
}

/* Space out the photos in our gallery a little. */
.thumbnail {
    margin: 4%;
}

.col.main {
    background-color: white;
    box-shadow: 0 0 50px rgba(17,17,17,0.5);
}

.row.section {
    padding: 5%;
}

.navbar {
    box-shadow: 0px 4px 8px rgba(17,17,17,0.2);
}

/* Bold the navbar's brand and put spacing on its left so it shifts right. */
.navbar-brand {
    font-weight: bold;
    padding-left: 12%;
}

#home {
    padding: 20%;
    background-image: url("media/pavement.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.bigtext {
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    color: white;
    text-shadow: 0 2px 8px rgba(17,17,17,0.6);
}