/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Page container with two columns */
.container {
    display: flex;              /* Enables flexbox layout */
    flex-wrap: wrap;             /* Allows wrapping on small screens */
    min-height: 100vh;           /* Full viewport height */
}

/* Left column */
.left-column {
    flex: 1;                     /* Take equal space unless specified */
    min-width: 250px;            /* Prevents column from becoming too narrow */
    background-color: #f4f4f4;
    padding: 20px;
}

/* Right column */
.right-column {
    flex: 2;                     /* Twice the width of left column */
    min-width: 300px;
    background-color: #ffffff;
    padding: 20px;
}

/* Optional: Responsive stacking for small screens */
@media (max-width: 768px) {
    .container {
        flex-direction: column;  /* Stack columns vertically */
    }
}