/* Base Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: Helvetica, sans-serif; 
    line-height: 1.6; 
    padding: 0;
    margin:0;
}

/* FLEX CONTAINER: Navigation Bar */
nav {
    display: flex; /* Activates Flexbox */
    justify-content: space-between; /* Space between logo and links */
    align-items: center; /* Centers items vertically */
    background: #333;
    color: #fff;
    padding: 1rem 2rem;
}
nav ul {
    display: flex;
    list-style: none;
}
nav ul li { margin-left: 20px; }

p {
    font-size: 14px;
}
/* FLEX CONTAINER: Main Content Layout */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

/* FLEX ITEMS: Columns */
.column {
    display: flex;
    background-color: #f4f4f4;
    _padding: 20px;
    _flex: 1 1 300px;
    border-radius: 8px;
    text-align: center;
    min-height: 400px;
    width: 400px;
    flex-direction: column;
    justify-content: flex-end;
}

.background {
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
}

.large {
    padding:10px 40px;
    background-color: #ffffff70;
}

/* Footer */
footer {
    background: #222;
    color: white;
    text-align: center;
    padding: 2rem;
    margin-top: 20px;
}

@media screen and (max-width: 900px) {
    .column {
        background-color: #f4f4f4;
        padding: 20px;
        _flex: 1 1 300px; /* Grow:1, Shrink:1, Basis:300px (Min width before wrapping) */
        border-radius: 8px;
        text-align: center;
        min-height: 400px;
      
    }
}


@media screen and (max-width: 630px) {
    .column {
        background-color: #f4f4f4;
        padding: 20px;
        _flex: 1 1 300px; /* Grow:1, Shrink:1, Basis:300px (Min width before wrapping) */
        border-radius: 8px;
        text-align: center;
        min-height: 400px;
       
    }
}