h1 {
    color:rosybrown;
    background-color: blanchedalmond;
    padding: 15px;
    margin: 10px;
    text-align: center;
    font-size:25px ;
    
}

button{
    background-color: rgb(132, 221, 233);
    border-radius: 7px;
    margin: 5px;
    color:rgb(10, 8, 8) ;
    border: none;
    cursor: pointer;
}

.bg-color{
    background-color: rgb(166, 214, 135);
    padding: 1.2rem;
}

div h2{
    font-size: 14px;
    font-family: 'Times New Roman';
}

div h3{
    color: palevioletred;
    padding: 1.2rem;
    background-color: antiquewhite;
    font-size: 14px;
    font-weight: 10px;
    font-family: 'Times New Roman';
}

div h4{
  font-size: 14px;
 font-family: 'Times New Roman';  
}

div img{
    max-width: 100%;
    height: auto;
}

div h6{
    color: black;
    padding: 1.2rem;
    background-color: rgb(167, 255, 186);
    font-size: 14px;
    font-weight: 10px;
    font-family: 'Times New Roman';
}

    /*  */
body.dark-mode{
    background-color: black;
}

body.dark-mode p{
    color: white;
}

body.dark-mode {
     color: white;
}

/* #= id ปุ่มกลางคืน  */
#dark-toggle {
    border-radius: 10px;
    background-color: azure;
    padding: 8px;
    cursor: pointer;
    margin: 10px;
    border-style: none;
}
#flip{
    cursor: pointer;
     color : black;
}

#namepanel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e1e87e;
  border-radius: 10px;
}

#namepanel {
  padding: 50px;
  display: none;
  font-size: 14px;
  color : black;
} 
h2{
    font-size: 20px;
    background-color: burlywood;
    border-radius: 7px;
    text-align: center;
    padding: 10px;
}
body {
  font-family: Arial;
  padding: 20px;
}

.faq-item {
  border: 1px solid  rgb(89, 166, 233);
  margin-bottom: 10px;
}

.question {
  padding: 15px;
  background: #aaf9f5;
  cursor: pointer;
  font-weight: bold;
  color: black;
}

.question.open {
  color: dark;
}

.answer {
  display: none;
  padding: 15px;
  background: white;
  color: black;
}

body {
  font-family: Arial;
}

/* ************* */
.tab-buttons {
  font-weight: bold;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.tab-btn {
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  background: pink;
}

.tab-btn.active {
  background:rgb(236, 221, 85);
  color: black;
}

.tab-panel {
  display: none;
  padding: 15px;
  border: 1px solid #ddd;
}

.tab-panel p{
    color: black;
}
footer{
    background-color:black;
    color: white;
    padding: 10px;
    margin: 10px;
    text-align: center;
    font-size: 16px;
}

@media (min-width: 1200px){
    body {
    width: 767px;
    margin: auto;
    grid-template-columns: 1fr;
}
}