@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');
:root {
    --white: #f7faf7;
    --black: #010101;
    --background: #151515;
    --darkBackground: #0f0f0f;
    --darkGreen: #142016;
    --green: #38563d;
    --lightGreen: #6B8F71;
    --lighterGreen: #aed6b5;
    --lightestGreen: #cdeed4;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif, system-ui;;
    background-color: var(--white);
    color: var(--black);
}

.titleBand {
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    background-color: var(--green);
}

.titleBand::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 4px;
    background-color: var(--green);
    content:"";
}

.titleBand h1 {
    color: var(--white);
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.mainBodyFullWidth {
    width: 100vw;
    display: flex;
    justify-content: center;
}

.mainBody {
    padding: 10px 40px;
    justify-content: center;
    column-width: 300px;
    column-gap: 20px;
    width: 100%;
    max-width: 1650px;
}

.mainBodyContainer {
    padding: 0 15px 5px 15px;
    border: 2px solid var(--green);
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: var(--lightestGreen);
    break-inside: avoid;
}

h4 {
    margin: 0;
}