@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&family=Playfair+Display:ital@1&display=swap");



@font-face {

  font-family: "Romestone";

  src: url("fonts/Romestone.otf") format("opentype");

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}


@font-face {

  font-family: "DeliriumNCV";

  src: url("fonts/DeliriumNCV.ttf") format("truetype");

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}



* {

  box-sizing: border-box;

}


html,
body {

  margin: 0;

  padding: 0;

}


body {

  min-height: 100vh;

  background: #d8d8dc;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  padding: 30px;

}



:root {

  --paper: #ebebed;

  --ink: #3a3436;

  --yellow: #eddf00;

  --gray: #a2a2a2;


  /* Figma里面的大标题字体 */

  --headline:
    "Romestone",
    sans-serif;


  /* Figma里面超高超窄数字字体 */

  --display:
    "DeliriumNCV",
    sans-serif;


  /* 普通文字 */

  --normal:
    "Oswald",
    "Arial Narrow",
    sans-serif;


  /* 小斜体 */

  --italic:
    "Playfair Display",
    Georgia,
    serif;

}



/* =======================================
   POSTER
======================================= */

.poster {

  position: relative;

  width: 564px;

  height: 846px;

  flex: 0 0 564px;

  overflow: hidden;

  background: var(--paper);

  color: var(--ink);

}



/* =======================================
   MAIN TITLE
======================================= */

.main-title {

  position: absolute;

  top: 13px;

  left: 27px;

  margin: 0;

  width: 505px;

  font-family: var(--headline);

  font-size: 96px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.96px;

  white-space: nowrap;

  transform-origin: left top;

}



/* =======================================
   RULES
======================================= */

.rule {

  position: absolute;

  height: 1.5px;

  background: var(--gray);

}


.rule-top {

  left: 28px;

  top: 132px;

  width: 384px;

}


.rule-hot {

  left: 28px;

  top: 267px;

  width: 214px;

}


.rule-playlist {

  left: 268px;

  top: 267px;

  width: 272px;

}


.rule-transport {

  left: 28px;

  top: 416px;

  width: 214px;

}


.rule-week {

  left: 28px;

  top: 601px;

  width: 214px;

}



/* =======================================
   FOOD TITLE
======================================= */

.goods-title {

  position: absolute;

  left: 28px;

  top: 150px;

  margin: 0;

  width: 243px;

  font-family: var(--headline);

  font-size: 46.194px;

  font-weight: 400;

  line-height: 0.890074;

  letter-spacing: 0.4619px;

}



/* =======================================
   FOOD IMAGES
======================================= */

.food-box {

  position: absolute;

  width: 70px;

  height: 50px;

}


.figs-box {

  left: 188px;

  top: 152px;

}


.salmon-box {

  left: 258px;

  top: 152px;

}


.eggs-box {

  left: 188px;

  top: 201px;

}


.avocado-box {

  left: 258px;

  top: 201px;

}


.yellow-circle {

  position: absolute;

  top: 0;

  right: 0;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: var(--yellow);

}


.food-photo {

  position: absolute;

  left: 0;

  top: 0;

  z-index: 2;

  display: block;

  object-fit: contain;

  border: none;

  background: transparent;

}


.figs-box .food-photo {

  width: 53px;

  height: 43px;

}


.salmon-box .food-photo {

  width: 69px;

  height: 42px;

}


.eggs-box .food-photo {

  width: 58px;

  height: 49px;

}


.avocado-box .food-photo {

  top: 4px;

  width: 64px;

  height: 37px;

}



/* =======================================
   FOOD LIST
======================================= */

.food-list {

  position: absolute;

  left: 340px;

  top: 149px;

  margin: 0;

  padding-left: 22px;

  font-family: var(--normal);

  font-size: 15px;

  line-height: 1.6;

}



/* =======================================
   STEPS
======================================= */

.steps-word {

  position: absolute;

  left: 436px;

  top: 25px;

  width: 100px;

  height: 126px;

  font-family: var(--display);

  font-size: 98.285px;

  color: var(--yellow);

  line-height: 1.053;

  letter-spacing: 0.9829px;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

}


.steps-number {

  position: absolute;

  left: 436px;

  top: 118px;

  width: 100px;

  height: 126px;

  font-family: var(--display);

  font-size: 98.285px;

  color: var(--ink);

  line-height: 1.053;

  letter-spacing: 0.9829px;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

}


.steps-caption {

  position: absolute;

  left: 525px;

  top: 15px;

  margin: 0;

  width: 18px;

  height: 228px;

  font-family: var(--italic);

  font-size: 9px;

  line-height: 1.1;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

}



/* =======================================
   HOT SPOTS
======================================= */

.hot-chart {

  position: absolute;

  left: 28px;

  top: 286px;

  width: 214px;

  height: 69px;

}


.hot-bar {

  position: absolute;

  bottom: 0;

  background: var(--yellow);

}


.hot1 {

  left: 18px;

  width: 12px;

  height: 69px;

}


.hot2 {

  left: 56px;

  width: 12px;

  height: 61px;

}


.hot3 {

  left: 93px;

  width: 13px;

  height: 29px;

}


.hot4 {

  left: 130px;

  width: 12px;

  height: 13px;

}


.hot5 {

  left: 165px;

  width: 12px;

  height: 21px;

}


.hot6 {

  left: 202px;

  width: 12px;

  height: 9px;

}


.hot-name {

  position: absolute;

  bottom: 0;

  font-family: var(--normal);

  font-size: 10px;

  line-height: 1;

  white-space: nowrap;

  transform: rotate(-90deg);

  transform-origin: left bottom;

}


.hn1 {

  left: 11px;

}


.hn2 {

  left: 49px;

  color: #666;

}


.hn3 {

  left: 86px;

}


.hn4 {

  left: 123px;

}


.hn5 {

  left: 158px;

}


.hn6 {

  left: 195px;

}


.hot-title {

  position: absolute;

  left: 28px;

  top: 367px;

  margin: 0;

  width: 171px;

  font-family: var(--headline);

  font-size: 32.563px;

  font-weight: 400;

  line-height: 0.890074;

  letter-spacing: 0.3256px;

}


.italic {

  margin: 0;

  font-family: var(--italic);

  font-style: italic;

  font-size: 9px;

  line-height: 1.15;

}


.hot-caption {

  position: absolute;

  left: 126px;

  top: 373px;

  width: 125px;

}



/* =======================================
   PLAYLIST
======================================= */

.playlist-title {

  position: absolute;

  left: 268px;

  top: 280px;

  margin: 0;

  width: 171px;

  font-family: var(--headline);

  font-size: 32.563px;

  font-weight: 400;

  line-height: 0.890074;

  letter-spacing: 0.3256px;

}


.playlist-list {

  position: absolute;

  left: 263px;

  top: 357px;

  width: 105px;

  margin: 0;

  padding-left: 16px;

  font-family: var(--normal);

  font-size: 9px;

  line-height: 1.45;

}


.spotify {

  position: absolute;

  left: 268px;

  top: 436px;

}




.pie-chart {

  position: absolute;

  left: 367px;

  top: 285px;

  width: 167px;

  height: 167px;

  border-radius: 50%;

  background:

    conic-gradient(

      from -18deg,

      var(--yellow) 0deg 40deg,

      var(--paper) 40deg 43deg,

      var(--yellow) 43deg 91deg,

      var(--paper) 91deg 94deg,

      var(--yellow) 94deg 179deg,

      var(--paper) 179deg 182deg,

      var(--yellow) 182deg 259deg,

      var(--paper) 259deg 262deg,

      var(--yellow) 262deg 357deg,

      var(--paper) 357deg 360deg

    );

}


.pie-number {

  position: absolute;

  font-family: var(--display);

  font-size: 28px;

  line-height: 1;

}


.pie1 {

  left: 118px;

  top: 94px;

}


.pie2 {
  left: 50px;
  top: 112px;

  font-size: 34px;
}


.pie3 {

  left: 37px;

  top: 32px;

}


.pie4 {

  left: 80px;

  top: 17px;

}


.pie5 {

  left: 118px;

  top: 30px;

}




.transport-title {

  position: absolute;

  left: 28px;

  top: 433px;

  z-index: 3;

  margin: 0;

  width: 156px;

  font-family: var(--headline);

  font-size: 32.563px;

  font-weight: 400;

  line-height: 1.04;

  letter-spacing: 0.3256px;

}


.transport-chart {

  position: absolute;

  left: 55px;

  top: 436px;

}


.transport-bar {

  position: absolute;

  height: 28px;

  background: var(--yellow);

}


.bus {

  top: 0;

  left: 0;

  width: 115px;

}


.scooter {

  top: 34px;

  left: 29px;

  width: 117px;

}


.foot {

  top: 68px;

  left: 6px;

  width: 175px;

}


.car {

  top: 102px;

  left: 0;

  width: 64px;

}


.transport-caption {

  position: absolute;

  left: 28px;

  top: 576px;

  width: 240px;

}



/* =======================================
   RESTAURANTS
======================================= */

.restaurant-box {

  position: absolute;

  left: 269px;

  top: 476px;

  width: 266px;

  height: 125px;

  border: 1px solid var(--gray);

}


.restaurant-title {

  position: absolute;

  left: 9px;

  top: 7px;

  margin: 0;

  width: 203px;

  font-family: var(--headline);

  font-size: 32.563px;

  font-weight: 400;

  line-height: 0.890074;

  letter-spacing: 0.3256px;

  white-space: nowrap;

}


.restaurant-caption {

  position: absolute;

  left: 140px;

  top: 11px;

  width: 118px;

  font-size: 8px;

}


.restaurant-data {

  position: absolute;

  left: 8px;

  right: 5px;

  bottom: 5px;

  height: 66px;

  display: flex;

  justify-content: space-between;

}


.restaurant-item {

  position: relative;

  width: 29px;

  height: 66px;

}


.restaurant-name {

  position: absolute;

  left: 0;

  bottom: 0;

  height: 61px;

  font-family: var(--normal);

  font-size: 8px;

  line-height: 1;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

  white-space: nowrap;

}


.stars {

  position: absolute;

  left: 13px;

  bottom: 0;

  color: var(--yellow);

  font-size: 12px;

  line-height: 0.88;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

}



/* =======================================
   WEEKLY
======================================= */

.weekly-title {

  position: absolute;

  left: 30px;

  top: 619px;

  z-index: 3;

  margin: 0;

  width: 171px;

  font-family: var(--headline);

  font-size: 32.563px;

  font-weight: 400;

  line-height: 0.890074;

  letter-spacing: 0.3256px;

}


.weekly-chart {

  position: absolute;

  left: 30px;

  top: 629px;

  width: 507px;

  height: 90px;

}


.weekly-chart polygon {

  fill: var(--yellow);

}


.weekday {

  position: absolute;

  top: 703px;

  z-index: 4;

  font-family: var(--italic);

  font-size: 9px;

  font-style: italic;

}


.day-m {

  left: 30px;

}


.day-t {

  left: 151px;

}


.day-w {

  left: 255px;

}


.day-th {

  left: 359px;

}


.day-f {

  left: 455px;

}


.weekly-line {

  position: absolute;

  left: 28px;

  top: 718px;

  width: 508px;

  height: 1px;

  background: var(--gray);

}




.wake-time,
.sleep-time {

  position: absolute;

  top: 741px;

  font-family: var(--display);

  font-size: 98.285px;

  line-height: 1.053;

  letter-spacing: 0.9829px;

  white-space: nowrap;

  transform-origin: left top;

}


.wake-time {

  left: 27px;

}


.sleep-time {

  left: 354px;

}


.time-caption {

  position: absolute;

  left: 205px;

  top: 764px;

  width: 140px;

  display: flex;

  flex-direction: column;

  gap: 12px;

  font-family: var(--italic);

  font-size: 8px;

  font-style: italic;

}


.arrow {

  position: absolute;

  left: 101px;

  top: -8px;

  font-family: Arial, sans-serif;

  font-size: 37px;

  font-style: normal;

  color: #999;

}




@media (max-width: 620px) {

  body {

    justify-content: flex-start;

    padding: 0;

    overflow-x: auto;

  }

}