/* 教学1、教学2约 18:01：@font-face 引入本地字体。 */
@font-face {
  font-family: "Six Caps";
  src: url("https://res.cloudinary.com/phjx0wfz/raw/upload/v1790189009/SixCaps-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Oswald";
  src: url("https://res.cloudinary.com/phjx0wfz/raw/upload/v1790189008/Oswald-Regular.ttf") format("truetype");
}

/* project3、project5：清除默认间距、盒模型、颜色、字体。 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  color: #373435;
  font-family: "Oswald", Arial, sans-serif;
}

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

h1 {
  font-family: "Six Caps", "Arial Narrow", sans-serif;
  font-size: 128px;
  font-weight: bold;
  text-transform: uppercase;
}

h2 {
  font-family: "Six Caps", "Arial Narrow", sans-serif;
  font-size: 38px;
  font-weight: bold;
  text-transform: uppercase;
}

.poster {
  width: 748px;
  margin: 0 auto;
  padding: 6px 36px 20px;
  border: 6px solid #373435;
  background-color: #ebebeb;
}

.note {
  font-family: "Times New Roman", serif;
  font-size: 15px;
  font-style: italic;
}

/* project5：display:flex、space-between、gap。 */
.top {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 26px;
}

.top-left {
  width: 504px;
}

.heading {
  padding-bottom: 0;
  margin-bottom: 18px;
  border: 0 solid #aaaaaa;
  border-width: 0 0 2px;
}

.foods {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.food-title {
  width: 192px;
}

.food-heading {
  font-size: 50px;
}

.food-picture {
  width: 182px;
}

.food-list {
  width: 90px;
  padding: 0 0 0 17px;
  font-size: 20px;
}

.steps {
  width: 140px;
  padding: 20px 0 0;
  text-align: center;
}




.step-number {
  font-size: 94px;
}

.step-word {
  font-family: "Six Caps", sans-serif;
  font-size: 85px;
  color: #e9df00;
  text-transform: uppercase;
}

.middle {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.left-column {
  width: 280px;
}

.right-column {
  width: 352px;
}

.hotspots {
  border: 0 solid #aaaaaa;
  border-width: 2px 0;
  padding: 16px 0 10px;
  margin-bottom: 14px;
}

.campus-chart {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.campus-item {
  width: 40px;
  text-align: center;
}

.campus-space {
  display: flex;
  min-height: 92px;
}

.campus-bar {
  width: 17px;
  margin: 0 auto;
  background-color: #e9df00;
}

/* 用上方间距与 min-height，让六根柱子的底部落在同一水平线上。 */
.jacobs-bar { min-height: 90px; margin-top: 2px; }
.soda-bar { min-height: 80px; margin-top: 12px; }
.dwinelle-bar { min-height: 38px; margin-top: 54px; }
.cheit-bar { min-height: 17px; margin-top: 75px; }
.mlk-bar { min-height: 28px; margin-top: 64px; }
.kresge-bar { min-height: 12px; margin-top: 80px; }

.campus-name {
  font-size: 11px;
  margin-top: 4px;
  text-transform: uppercase;
}

.hotspot-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.hotspot-note {
  width: 150px;
  font-size: 14px;
}

.transport {
  padding-bottom: 15px;
  border: 0 solid #aaaaaa;
  border-width: 0 0 2px;
}

.transport-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.transport-name {
  font-family: "Six Caps", sans-serif;
  font-size: 34px;
  font-weight: bold;
  text-transform: uppercase;
}

.transport-bar {
  min-height: 36px;
  background-color: #e9df00;
}

.bus-bar { width: 151px; }
.scooter-bar { width: 154px; }
.foot-bar { width: 229px; }
.car-bar { width: 84px; }

.transport-note {
  margin-top: 8px;
}

.playlists {
  display: flex;
  gap: 7px;
  border: 0 solid #aaaaaa;
  border-width: 2px 0 0;
  padding: 14px 0 0;
  margin-bottom: 23px;
}

.playlist-text {
  width: 124px;
}

.playlist-list {
  list-style: none;
  font-size: 13px;
  margin-top: 13px;
}

.spotify {
  margin-top: 8px;
}

.pie-picture {
  width: 221px;
  margin: auto;
}

.restaurants {
  border: 1px solid #aaaaaa;
  padding: 9px;
}

.restaurant-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.restaurant-note {
  width: 144px;
  font-size: 14px;
}

/* project7：用 1fr 写相同宽度的列。 */
.restaurant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px 6px;
}

.restaurant {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
}

.stars {
  color: #e9df00;
  font-family: Arial, sans-serif;
  font-size: 15px;
}

.weekly {
  margin-top: 22px;
}

.weekly-picture {
  display: block;
  width: 100%;
}

.sleep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.clock {
  font-family: "Six Caps", sans-serif;
  font-size: 118px;
  font-weight: bold;
}

.sleep-caption {
  width: 175px;
  text-align: center;
}

.arrow {
  font-family: Arial, sans-serif;
  font-size: 44px;
  color: #aaaaaa;
}