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


/* =======================================
   BASIC
======================================= */

* {
  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;

}



/* =======================================
   VARIABLES
======================================= */

:root {

  --paper: #ebebed;

  --ink: #3a3436;

  --yellow: #eddf00;

  --gray: #a2a2a2;

  --display:
    "Bebas Neue",
    Impact,
    "Arial Narrow",
    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);

}



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

.main-title {

  position: absolute;

  top: 33px;

  left: 27px;

  margin: 0;

  width: 390px;

  font-family: var(--display);

  font-size: 58px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.5px;

  white-space: nowrap;

  transform: scaleY(1.42);

  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: 151px;

  margin: 0;

  font-family: var(--display);

  font-size: 31px;

  font-weight: 400;

  line-height: 0.96;

}



/* =======================================
   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;

  width: 58px;

  height: 44px;

  object-fit: contain;

  display: flex;

  align-items: center;

  justify-content: center;

  

 

  color: #666;

  font-family: var(--normal);

  font-size: 7px;

}


.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: 444px;

  top: 25px;

  width: 100px;

  height: 126px;

  font-family: var(--display);

  font-size: 63px;

  color: var(--yellow);

  line-height: 1;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

}


.steps-number {

  position: absolute;

  left: 444px;

  top: 118px;

  width: 100px;

  height: 126px;

  font-family: var(--display);

  font-size: 63px;

  color: var(--ink);

  line-height: 1;

  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: 368px;

  margin: 0;

  font-family: var(--display);

  font-size: 29px;

  font-weight: 400;

  line-height: 1;

}


.italic {

  margin: 0;

  font-family: var(--italic);

  font-style: italic;

  font-size: 9px;

  line-height: 1.15;

}


.hot-caption {

  position: absolute;

  left: 155px;

  top: 373px;

  width: 125px;

}



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

.playlist-title {

  position: absolute;

  left: 268px;

  top: 282px;

  margin: 0;

  font-family: var(--display);

  font-size: 28px;

  font-weight: 400;

  line-height: 0.95;

}


.playlist-list {

  position: absolute;

  left: 263px;

  top: 360px;

  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
======================================= */

.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 41.2deg,

  var(--yellow) 41.2deg 91deg,
  var(--paper) 91deg 92.2deg,

  var(--yellow) 92.2deg 179deg,
  var(--paper) 179deg 180.2deg,

  var(--yellow) 180.2deg 259deg,
  var(--paper) 259deg 260.2deg,

  var(--yellow) 260.2deg 357deg,
  var(--paper) 357deg 358.2deg,

  var(--yellow) 358.2deg 360deg
);
}


.pie-number {

  position: absolute;

  font-family: var(--display);

  font-size: 28px;

  line-height: 1;

}


.pie1 {

  left: 118px;

  top: 94px;

}


.pie2 {

  left: 60px;

  top: 110px;

}


.pie3 {

  left: 37px;

  top: 32px;

}


.pie4 {

  left: 80px;

  top: 17px;

}


.pie5 {

  left: 118px;

  top: 30px;

}



/* =======================================
   TRANSPORT
======================================= */

.transport-title {

  position: absolute;

  left: 28px;

  top: 433px;

  z-index: 3;

  margin: 0;

  font-family: var(--display);

  font-size: 27px;

  font-weight: 400;

  line-height: 1.27;

}


.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;

  font-family: var(--display);

  font-size: 26px;

  font-weight: 400;

  white-space: nowrap;

}


.restaurant-caption {

  position: absolute;

  left: 172px;

  top: 14px;

  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);

}



/* =======================================
   WEEK
======================================= */

.weekly-title {

  position: absolute;

  left: 30px;

  top: 620px;

  z-index: 3;

  margin: 0;

  font-family: var(--display);

  font-size: 27px;

  font-weight: 400;

  line-height: 0.92;

}


.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);

}



/* =======================================
   TIME
======================================= */

.wake-time,
.sleep-time {

  position: absolute;

  top: 741px;

  font-family: var(--display);

  font-size: 72px;

  line-height: 1;

  letter-spacing: -1px;

  white-space: nowrap;

  transform: scaleX(0.87);

  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;

}



/* =======================================
   MOBILE
======================================= */

@media (max-width: 620px) {

  body {

    justify-content: flex-start;

    padding: 0;

    overflow-x: auto;

  }

}