/* Set default font-family to sans-serif */
body {
  font-family: sans-serif;
  background-color: #FFFFFF;
  margin: 0;
}

.point {
  background-color: #FFFF99;
  font-weight: 800;
  font-size:medium;
  padding: 10px;

}
/* Style for header */
header {
  background-color: #CCCCFF;
  height: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

/* Style for header left */
header .left {
  width: 20%;
  text-align: left;
  margin-left: 10px;
}

/* Style for header topic */
header .topic {
  width: 60%;
  text-align: center;
}

/* Style for header right */
header .right {
  width: 20%;
  text-align: right;
  margin-right: 10px;
}

/* Style for content */
.content {
  display: flex;
  flex-direction: row;
  height: 80%;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Left content area */
.content .left {
  width: 10%;

  margin-right: 10px;
  margin-left: 10px;
}

/* Middle content area */
.content .middle {
  width: 80%;
  margin-right: 10px;
}

/* Right content area */
.content .right {
  width: 10%;

  margin-left: 10px;
  margin-right: 10px;
}

/* Style for footer */
footer {
  background-color: #CCFFFF;
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
  padding:10px; 
}

/* Style for footer text */
footer p {
  margin: 0;
}

/* rwd 指定2 */
/* Responsive design using media queries */
@media screen and (min-width: 480px) {
  header .left, header .right {
    width: 20%;
  }
  header .topic {
    width: 60%;
  }
  .content .left, .content .right {
    width: 5%;
  }
  .content .middle {
    width: 90%;
  }
}

@media screen and (max-width: 479px) {
  header .left, header .topic, header .right {
    width: 100%;
    text-align: center;
  }
  /* 原來寫法 .content .left, .content .middle, .content .right 因左右邊沒資料，所以改為如下 */
  .content .middle {
    width: 100%;
  }
}
#map {
  height: 300px;
  width: 80%;
  margin: 0 auto; /* To center the map */
}

.assigment {
        background-color: hsl(60, 3%, 87%);
        padding: 20px;
  }
.answer {
  background-color: rgb(175, 248, 248);
  padding: 20px;
}

.wheatnote {
    background-color: wheat;
    padding: 20px;
}


    
      .sidebar {
          position: fixed;
          top: 60px; /* below the fixed header */
          left: 0;
          height: calc(100% - 60px);
          width: 80px;
          background-color: #f8f8f8;
          overflow-y: auto;
          padding: 20px 0;
      }
      .content {
          margin-left: 300px;
          padding: 20px;
      }
      section {
          margin-bottom: 40px;
      }
      td {
          background-color: hsl(61, 93%, 73%);
          padding: 20px;
          font-size: larger;
      }