html,body{
 background-color: white;
 margin: 0;
 padding: 0;
}

.top-header {

    background-color: white;
    padding: 20x;
    text-align: left;
    max-width: 700;
}

.main-content {
 max-width: 700px;
 margin: 30px;  
}

.box {
 background-color: white;
 padding: 20px;
 margin: 30px;

}
.image {

    width:100%;
}
.button {

    color: blue;
    background-color: white;
    padding: 10px;
    display: inline-block;
}

.bottom-footer {

    background-color: skyblue;
    padding: 20px;
    text-align: center;
}

.code-box {
      background-color: #f5f5f5;  /* พื้นหลังสีเทาอ่อน */
      border: 1px solid #ccc;     /* เส้นขอบ */
      border-radius: 8px;         /* มุมโค้งมน */
      padding: 10px;              /* เว้นระยะขอบด้านใน */
      font-family: "Courier New", monospace; /* ฟอนต์แบบโค้ด */
      font-size: 14px;
      overflow-x: auto;           /* ถ้ามีโค้ดยาวเกิน กำหนดให้เลื่อนได้ */
    }