* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: #111;
  background: #fff;
  font-family: Helvetica, Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-weight: 300;
}

a { color: #2f86eb; text-decoration: none; }
a:hover { color: #2065c4; }

.navbar-top {
  width: 100%;
  padding: 10px 0;
  overflow-x: auto;
  background: #2f86eb;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}

.navbar-top a { color: #fff; }
#navitems { display: inline-block; margin: 0 auto; }
.navitem { display: inline-block; margin: 0 15px; font-size: 14px; text-align: center; }

#coursename {
  margin: 30px 40px 20px;
  color: #2f86eb;
  font-size: 40px;
  font-weight: 300;
  line-height: 45px;
}

#coursename a { color: #2f86eb; }
#courseid { margin-right: 10px; color: #2065c4; font-size: 60px; }
#courseinfo { margin-left: 40px; }
#content { margin: 20px 40px 40px; }

.segment {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #2f86eb;
}

.segmenttitle { margin-bottom: 10px; font-size: 18px; font-weight: 600; }
.segment p { margin: 10px 0; line-height: 24px; }
.segment ol { line-height: 1.45; }

.sidebar { position: sticky; top: 20px; z-index: 5; }
.sidebar span {
  float: right;
  margin: 5px 0;
  padding: 5px;
  background: rgb(255 255 255 / 80%);
  text-align: right;
}

.announcement-wrapper { text-align: center; }
.announcements {
  display: inline-block;
  width: 700px;
  height: 250px;
  margin: 0 15px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.announcement-item { width: 95%; text-align: left; }
.announcement-title-wrapper { max-width: 700px; margin: 0 auto; }
.tr { display: table-row; }
.td { display: table-cell; width: 100%; }
.announcement-item .title { max-width: 600px; font-weight: 600; text-align: center; vertical-align: middle; }
.prev, .next { display: inline-block; padding: 10px 0; color: #2f86eb; font-size: 36px; font-weight: 600; }
.unreleased { color: rgb(0 0 0 / 25%); }
.post-metadata { font-size: 14px; text-align: right; }
.announcement-item h3 { margin: 20px 0 10px; padding: 0; border: 0; font-size: 24px; }
.announcement-item p, .announcement-item ul { max-width: none; }

.calendar-scroll { width: 100%; overflow-x: auto; }
table#calendar { width: 100%; margin: 20px 0; border-collapse: collapse; }
table#calendar, table#calendar th, table#calendar td { border: 1px solid #000; }
table#calendar th { font-size: 16px; font-weight: 600; }
table#calendar td { padding: 0 10px; font-size: 14px; font-weight: 300; line-height: 24px; text-align: center; }
table#calendar td > p { margin: 0; font-size: 14px; line-height: 24px; }
table#calendar .odd { background: #ddd; }
table#calendar .emph1, table#calendar .emph1 a { color: #fff; background: #2f86eb; }
table#calendar .emph2 { color: #fff; background: #777; }
table#calendar .emph3 { color: #fff; background: #c00; }
table#calendar .emph4 { color: #000; background: #fdd2f7; }
table#calendar .proj { color: #4cbb17; }

.calendar-segment { clear: both; }
.week-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; }
.week-toolbar h3 { margin: 0; padding: 0; border: 0; font-size: 18px; }
.week-toolbar span { padding: 5px 9px; border: 1px solid #ccc; border-radius: 3px; background: #f5f5f5; font-size: 12px; }
.week-calendar {
  display: grid;
  grid-template-columns: 48px repeat(7, minmax(90px, 1fr));
  grid-template-rows: 28px 570px;
  min-width: 780px;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.week-corner, .week-day-heading { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.week-day-heading { padding: 5px 2px; font-size: 12px; font-weight: 600; text-align: center; }
.week-time-axis { position: relative; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.week-time-axis span {
  position: absolute;
  top: calc(var(--hour) * 47.5px - 7px);
  right: 5px;
  color: #555;
  font-size: 10px;
}
.week-day-column {
  position: relative;
  overflow: hidden;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: repeating-linear-gradient(to bottom, #fff 0, #fff 23px, #eee 23.5px, #fff 24px, #fff 47px, #ddd 47.5px);
}
.week-event {
  position: absolute;
  top: calc(var(--start) * 0.7916667px);
  left: calc(var(--left) * 1%);
  width: calc(var(--width) * 1%);
  height: max(22px, calc(var(--duration) * 0.7916667px));
  padding: 2px 3px;
  overflow: hidden;
  border: 1px solid #1e87ff;
  border-radius: 2px;
  background: #2f86eb;
  color: #fff;
  font-size: 9px;
  line-height: 1.15;
  text-align: center;
}
.week-event a { color: #fff; }
.week-event span { display: block; font-size: 8px; }
.calendar-source-links { margin-top: 8px; font-size: 12px; text-align: right; }
#build_time { margin-top: 18px; font-size: 12px; text-align: right; }

@media (max-width: 750px) {
  .navitem { margin: 0 10px; }
  #coursename { margin: 22px 12px 14px; font-size: 28px; line-height: 34px; }
  #courseid { display: block; font-size: 42px; line-height: 44px; }
  #courseinfo { margin-left: 12px; font-size: 14px; }
  #content { margin: 16px 12px 30px; }
  .sidebar { position: static; min-height: 32px; }
  .announcements { width: calc(100% - 8px); margin: 0; }
  .announcement-item h3 { font-size: 20px; }
  .calendar-scroll { max-width: 100%; }
  table#calendar { min-width: 1180px; }
  .week-calendar { min-width: 780px; }
  .calendar-segment { overflow-x: auto; }
  .calendar-segment > .segmenttitle,
  .calendar-segment > p,
  .calendar-segment > ol,
  .calendar-segment > .week-toolbar,
  .calendar-segment > .calendar-source-links { position: sticky; left: 0; width: calc(100vw - 24px); }
}