style.css

html {
    scroll-padding-top: 35px; /* height of your navbar */
}

/* --- navbar --- */
.navbar {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* --- spacing on all sections --- */
.section {
    margin-top: 50px; /* adjust as needed */
    margin-bottom: 50px; /* adjust as needed */
}
.section:last-of-type {
    padding-bottom: 4rem;
}
    
/* --- background image and text --- */
.bgimage {
    height:65vh;
    background: url('images/surf.jpeg');
    background-size:cover;
    background-position: center 25%;
    position: relative;
    padding: 0;
    margin: 0;
}

.home_title {
    padding-top: 10rem;
    font-size: 4.5rem;
}

.home_desc {
    font-size: 2rem;
}

.home_desc_pop{
    font-size: 2rem;
    color: firebrick;
}

.home_text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.fab {
    color: #000000;
}

/* --- metadata column --- */

.meta-data-link {
    color: skyblue;
    word-wrap: break-word;
    text-align: left;
}

.meta-data-element {
    margin-bottom: 20px;
    margin-top: 10px;
}

.servicesIcon {
    font-size: 30px;
    text-align: center;
    width: 100%;
}

.headshot-img {
    border-radius: 50%;
}

/* --- main info column --- */

.img-float-right {
    float: right;       /* Makes the image float to the left */
    width: 30%;        /* Takes up 30% of its parent container's width */
    max-width: 200px;  /* Sets a maximum width for the image */
    margin-left: 15px; /* Add space to the left of the image */
    margin-bottom: 15px; /* Add space below the image */
}

.media-img {
    width: 400px;      
    height: 100px;     
    object-fit: cover; /* this ensures the image covers the full width & height without distorting */
    display: block;    /* to remove any default spacing/gaps */
}