h1 {
    font-size: 3em;
    font-family: Arial;
    color: grey;
    text-align: center;
    padding: 10px;
    /* border: 2px #eee solid; */
}

h2 {
    font-size: 2em;
    font-family: Arial;
    color: grey;
    text-align: center;
    padding: 10px;
    /* border: 2px #eee solid; */
}

h3 {
    font-size: 1em;
    font-family: Arial;
    color: grey;
    text-align: center;
    padding: 10px;
    /* border: 2px #eee solid; */
}

p1, p2, p3 {
    font-family: Arial;
}

nav a {
    font-size: 1em;
    font-family: Arial;
    color: grey;
    margin-left: 50px;
    text-decoration: none;
}

input {
    margin: auto;
    display: block;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* width: 50%; */
}

/* static/css/styles.css */
.matrix-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust the gap between items as needed */
}

.matrix-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #ccc; /* Optional: Add a border to each item */
    padding: 10px; /* Optional: Add padding to each item */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

.matrix-item img {
    width: 100%;
    height: auto;
    max-height: 50%; /* Ensure the image takes up half the area */
    object-fit: cover; /* Ensure the image covers the area without distortion */
}

.matrix-item p {
    width: 100%;
    text-align: center;
    margin-top: 10px; /* Adjust the margin as needed */
}

.matrix-item.left-align p {
    text-align: left;
}