:root {
    --primary-green: #9DC93E;
    --primary-red: #F5989E;
    --beige: #F3E8BA;
    --background: #EBF4D7;
}

body {
    background-image: url("/images/leaves-background.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    padding-top: 100px;
}

header {
    display: flex;
    justify-content: center; /* centers horizontally*/
}

.nav-container {
    background-color: var(--primary-green);
    width: 1000px;
    height: 50px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 1000px;
    height: 600px;
    margin: 1rem auto 1rem auto;
}

.welcome-container {
    background-color: var(--primary-red);
    grid-column: span 3;
}

.status-container {
    background-color: var(--beige);
}

.blog-container {
    background-color: var(--primary-green);
    grid-column: span 4;
}