body {
    margin: 0;
    padding: 0;
}

.blue-background {
    display: grid;
    grid-template-columns: repeat(10, 10%);
    grid-template-rows: 40% 60%;
    height: 100vh;
  }
  
  .top-left {
    background-color: blue;
    color: white;
    grid-column: 1 / 8;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .bottom-left {
    background-color: gray;
    grid-column: 1 / 8;
  }
  
  .right-section {
    background-color: white;
    grid-column: 8 / 11;
    grid-row: 1 / 3;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .right-section h2 {
    margin: 0;
    padding: 10px 0;
  }
  
  #card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    padding: 20px;
  }
  
  .card {
    background-color: white;
    border: 1px solid black;
    padding: 10px;
  }
  
  .small-card {
    height: 400px;
  }
  
  .large-card {
    height: 400px;
    grid-column: span 2;
  }
  
  body {
    overflow: hidden;
  }
  
  .allow-scroll {
    overflow: auto;
  }
  
  .glow {
    box-shadow: 0 0 20px white;
    border: greenyellow solid 5px;
  }