mainStyle.css

/* The text of everything on the page */
p {
    font-family: Poppins, Ayuthaya;
    font-size: 17px;
}

.navbar-header .navbar-brand {
    color: black;
}

#footer {
    background-color: indigo;
    padding: 10px;
    text-align: center;
    color: white;
    font-style: italic;
}

#about {
    font-family: Poppins;
}


footer {
    text-align: center;
}


/* Style for the link. */
a {
    color: white;
    font-weight: bold;
}
a:link {
    color: blue;
    font-size: 22px;
}

a:visited {
    color:purple;
}

.navbar {
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    overflow: hidden;
}

#table {
    font-family: Poppins;
    font-size: 16px;
}
.column {
    float: left;
    padding: 35px;
}

#nav-links a:not(:first-of-type) {
    border-left: solid 1px black;
}
.wrapper2 {
    grid-template-columns: 50% 50%;
    display: grid;
}

/* Styling for the certification images and badges. */
.certifications {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Align items horizontally */
    align-items: center; /* Align items vertically */
}

/* Style each certification item */
.certification-item {
    flex: 0 0 20%; /* Set initial flex basis to 20% (5 items per row) */
    padding: 5px; /* Add padding between items */
    box-sizing: border-box; /* Include padding in the width */
    /* text-align: center; Center content horizontally */
}

/* Make images responsive */
.certification-item img {
    max-width: 100%; /* Ensure images don't exceed their container width */
    height: 100px; /* Maintain aspect ratio */
    display: block; /* Remove extra space below images */
    margin: auto; /* Center images horizontally */
}