body {
    font-family: 'Nunito Sans', sans-serif;
    margin: 0 10%;
  }
  h1 {
    font-family: 'Press Start 2P', serif;
  }
  .container {
    border: 2px solid #a2a2a6;
    padding: 10px;
    margin: 10px auto;
  }
  
  .color-container {
    width: 100%;
  }
  
  .color-panel {
    display: inline-block;
    width: 32%;
    text-align: center;
    margin: 20px auto;
    min-height: 100px;
  }
  
  .red {
    background-color: #FF0000;
    color: #fff;
  }
  
  .green {
    background-color: #00FF00;
    color: #FFF;
  }
  
  .blue {
    background-color: #0000FF;
    color: #FFF;
  }
  
  .font-panel {
    width: 45%;
    display: inline-block;
  }
  
  .font-label {
    font-size: 20px;
    text-decoration: underline;
  }
  
  .regular {
    font-style: normal;
  }
  
  .italic {
    font-style: italic;
  }
  
  .bold {
    font-weight: 700;
  }
  
  .nunito-sans {
    font-family: 'Nunito Sans', sans-serif;
  }
  
  .source-code-pro {
    font-family: 'Source Code Pro', monospace;
  }
  
  .poppins {
    font-family: 'Poppins', sans-serif;
  }
  
  .pressstart2p {
    font-family:'Press Start 2P', sans-serif
  }
  .text-panel h1 {
    font-weight: 700;
    font-size: 26px;
    font-family: 'Press Start 2P', sans-serif;
  }
  
  .text-panel h2 {
    font-weight: 500;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
  }
  
  .text-panel p {
    font-weight: 400;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
  }