/* Grid Layout */
.container {
    display: grid;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    height: 100vh;
  }
  
  .header {
    grid-area: header;
    background-color: #f8f9fa;
    border:#adb5bd 1px solid;
  }
  
  .sidebar {
    grid-area: sidebar;
    background-color: #e9ecef;
  }
  
  .main-content {
    grid-area: main;
    background-color: #dee2e6;
  }
  
  .footer {
    grid-area: footer;
    background-color: #f8f9fa;
  }
  
  /* Flexbox Layout */
  .flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 100%;
  }
  
  .flex-item {
    background-color: #adb5bd;
    padding: 20px;
    margin: 10px;
    flex: 1;
    text-align: center;
  }