body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  header {
    padding: 1rem;
    text-align: center;
  }
  header h1 {
    margin: 0;
    font-size: 2rem;
  }
  .section {
    padding: 2rem;
    max-width: 900px;
    margin: auto;
  }
  .section h2 {
    color: #37454b;
    font-size: 1.5rem;
    border-bottom: 2px solid #38bdf8;
    padding-bottom: 0.5rem;
    font-weight: 900;
  }
  .demo {
    margin-top: 1rem;
    text-align: center;
  }
  .demo iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 8px;
  }
  footer {
    text-align: center;
    padding: 1rem;
    color: aliceblue;
    background-color: #42454b;
    margin-top: 2rem;
  }
  a {
    color: #99b7c4;
    text-decoration: none;
    
  }
  
.download{
  font-size: larger;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 500;
  background-color: rgb(198, 243, 228);
  color: #000000;

}
.connection-diagram {
  width: 90%;
  margin-left: 5%; 
}

pre {
  font-family: Consolas,"courier new";
  color: crimson;
  background-color: #f1f1f1;
  padding: 2px;
  font-size: 105%;
}

.code-block {
      border: 1px solid #ccc;
      margin: 1em 0;
      padding: 1em;
      border-radius: 5px;
      overflow: scroll;
    }
.code-header {
      font-family: monospace;
      font-weight: 800;
      background: #bdb8b8;
      padding: 0.5em;
      margin: 0;
      border-bottom: 1px solid #ccc;
    }

div{
  padding: 5%;
}