/* ============================================================
   my life in berkeley — Infographic Poster
   geometry ported 1:1 from the Figma source (564 x 846)
   ============================================================ */

/* ---------- webfonts (all local) ---------- */
@font-face { font-family: 'Oswald';           font-style: normal; font-weight: 400; src: url('https://res.cloudinary.com/js8rdscp/raw/upload/haibao/oswald-400.ttf') format('truetype'); }
@font-face { font-family: 'Oswald';           font-style: normal; font-weight: 500; src: url('https://res.cloudinary.com/js8rdscp/raw/upload/haibao/oswald-500.ttf') format('truetype'); }
@font-face { font-family: 'Oswald';           font-style: normal; font-weight: 600; src: url('https://res.cloudinary.com/js8rdscp/raw/upload/haibao/oswald-600.ttf') format('truetype'); }
@font-face { font-family: 'Oswald';           font-style: normal; font-weight: 700; src: url('https://res.cloudinary.com/js8rdscp/raw/upload/haibao/oswald-700.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: url('https://res.cloudinary.com/js8rdscp/raw/upload/haibao/playfair-400.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; src: url('https://res.cloudinary.com/js8rdscp/raw/upload/haibao/playfair-400italic.ttf') format('truetype'); }
@font-face { font-family: 'DELIRIUM NCV';     font-style: normal; font-weight: 400; src: url('https://res.cloudinary.com/js8rdscp/raw/upload/haibao/delirium-ncv.ttf') format('truetype'); }
@font-face { font-family: 'Romestone';        font-style: normal; font-weight: 400; src: url('https://res.cloudinary.com/js8rdscp/raw/upload/haibao/romestone.ttf') format('truetype'); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
}

body {
  display: flex;
  justify-content: center;
}

p { margin: 0; }

/* ============================================================
   poster frame
   ============================================================ */
.infographicPoster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: none;
  overflow: hidden;
  width: 564px;
  height: 846px;
  padding: 13px 3px 4px 6px;
  background: #ebebed;
}

/* ============================================================
   header — my life in berkeley / STEPS / 5,795
   ============================================================ */
.autoWrapper {
  position: relative;
  margin-left: 21px;
  width: 505px;
  height: 121px;
}

.myLifeInBerkeley {
  position: absolute;
  top: 0;
  left: 0;
  width: 505px;
  height: 121px;
  color: #3a3436;
  font-family: Romestone, "PingFang SC", "Microsoft YaHei", SimHei, Arial, sans-serif;
  font-size: 96px;
  letter-spacing: .96px;
  white-space: nowrap;
}

.sTeps,
.a5795 {
  position: absolute;
  right: -17px;
  width: 126px;
  height: 100px;
  font-family: "DELIRIUM NCV", Arial, sans-serif;
  font-size: 98px;
  line-height: 103px;
  letter-spacing: .98px;
  transform: rotate(-90deg);
}

.sTeps { bottom: -3px; color: #eddf00; }

.a5795 { bottom: -97px; color: #3a3436; }

.averageDailyStepsTak {
  position: absolute;
  right: -128px;
  bottom: -14px;
  width: 228px;
  height: 42px;
  color: #3a3436;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 10px;
  font-style: italic;
  line-height: 12px;
  letter-spacing: .1px;
  transform: rotate(-90deg);
}

.vector3 {
  position: absolute;
  left: 1px;
  bottom: -1px;
  width: 384px;
  height: 2px;
  background: #a2a2a2;
}

/* ============================================================
   most commonly consumed goods
   ============================================================ */
.autoWrapper3 {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  justify-content: space-between;
  margin-top: 15px;
  padding: 0 141px 0 22px;
}

.autoWrapper2 {
  position: relative;
  margin-top: 1px;
  width: 243px;
  height: 122px;
}

.ellipse10,
.ellipse11,
.ellipse12,
.ellipse13 {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eddf00;
}

.ellipse10 { top: 2px;  left: 185px; }
.ellipse11 { top: 51px; left: 185px; }
.ellipse12 { top: 2px;  right: -60px; }
.ellipse13 { top: 51px; right: -60px; }

.mostCommonlyConsumed {
  position: absolute;
  top: 0;
  left: 0;
  width: 243px;
  height: 122px;
  color: #3a3436;
  font-family: Romestone, "PingFang SC", "Microsoft YaHei", SimHei, Arial, sans-serif;
  font-size: 46px;
  line-height: 49px;
  letter-spacing: .46px;
}

.vector4,
.vector6 {
  position: absolute;
  top: 117px;
  height: 2px;
  background: #a2a2a2;
}

.vector4 { left: 0;      width: 214px; }
.vector6 { right: -269px; width: 272px; }

.image5,
.image6,
.image7,
.image8 { position: absolute; }

.image5 { top: 3px;  left: 161px; width: 53px; height: 43px; }
.image6 { top: 49px; left: 161px; width: 58px; height: 49px; }
.image7 { top: 3px;  right: -56px; width: 69px; height: 42px; }
.image8 { top: 55px; right: -51px; width: 64px; height: 37px; }

.figsSalmonEggsAvocad {
  width: 70px;
  height: 75px;
  color: #3a3436;
  font-family: Oswald, Arial, sans-serif;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: .9px;
  white-space: nowrap;
}

/* ============================================================
   hot spots bars + most listened playlists
   ============================================================ */
.autoWrapper4 {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  margin-top: 8px;
  padding-right: 122px;
}

.autoWrapper4 > p:not(.mOstlistenedplaylist) {
  width: 62px;
  height: 14px;
  margin-top: 38px;
  color: #3a3436;
  font-family: Oswald, Arial, sans-serif;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: .12px;
  white-space: nowrap;
  transform: rotate(-90deg);
}

.jAcobshall { margin-left: 0; }
.sOdahall   { margin-left: -24px; color: #6a6a6a; }
.dWinelle   { margin-left: 23px; }
.cHeit      { margin-left: 22px; }
.mLkunion   { margin-left: 19px; }
.kResge     { margin-left: 20px; }

.rectangle4,
.rectangle5,
.rectangle6,
.rectangle7,
.rectangle8,
.rectangle9 { background: #eddf00; }

.rectangle4 { margin-top: 6px;  margin-left: -60px; width: 12px; height: 69px; }
.rectangle5 { margin-top: 14px; margin-left: -59px; width: 12px; height: 61px; }
.rectangle6 { margin-top: 46px; margin-left: -59px; width: 13px; height: 29px; }
.rectangle7 { margin-top: 62px; margin-left: -57px; width: 12px; height: 13px; }
.rectangle8 { margin-top: 54px; margin-left: -59px; width: 12px; height: 21px; }
.rectangle9 { margin-top: 66px; margin-left: 25px;  width: 12px; height: 9px; }

.mOstlistenedplaylist {
  margin-left: 26px;
  width: 171px;
  height: 75px;
  color: #3a3436;
  font-family: Romestone, "PingFang SC", "Microsoft YaHei", SimHei, Arial, sans-serif;
  font-size: 33px;
  line-height: 34px;
  letter-spacing: .33px;
}

/* ============================================================
   my hot spots
   ============================================================ */
.autoWrapper7 {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  justify-content: space-between;
  margin-top: 2px;
  padding: 0 204px 0 22px;
}

.autoWrapper6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin-top: 10px;
}

.autoWrapper5 {
  position: relative;
  width: 171px;
  height: 38px;
}

.myHotSpots {
  position: absolute;
  top: 0;
  left: 0;
  width: 171px;
  height: 38px;
  color: #3a3436;
  font-family: Romestone, "PingFang SC", "Microsoft YaHei", SimHei, Arial, sans-serif;
  font-size: 33px;
  line-height: 34px;
  letter-spacing: .33px;
}

.whichPlacesOnCampusI {
  position: absolute;
  right: -49px;
  bottom: -9px;
  width: 122px;
  height: 42px;
  color: #3a3436;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 10px;
  font-style: italic;
  line-height: 12px;
  letter-spacing: .1px;
}

.vector5 {
  margin-top: 11px;
  width: 214px;
  height: 2px;
  background: #a2a2a2;
}

.iLoveDreamPopExisten {
  width: 94px;
  height: 75px;
  color: #3a3436;
  font-family: Oswald, Arial, sans-serif;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .1px;
}

/* ============================================================
   transportation / pie / best places to eat
   ============================================================ */
.autoWrapper22 {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  justify-content: space-between;
  margin-top: 1px;
  padding: 0 13px 0 22px;
}

.autoWrapper8 {
  position: relative;
  flex: none;
  width: 156px;
  height: 146px;
}

.bUsscooterfootcar {
  position: absolute;
  top: 0;
  left: 0;
  width: 156px;
  height: 146px;
  color: #3a3436;
  font-family: Romestone, "PingFang SC", "Microsoft YaHei", SimHei, Arial, sans-serif;
  font-size: 33px;
  line-height: 34px;
  letter-spacing: .33px;
}

.myModesOfTransportat {
  position: absolute;
  right: -84px;
  bottom: -13px;
  width: 241px;
  height: 18px;
  color: #3a3436;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 10px;
  font-style: italic;
  line-height: 12px;
  letter-spacing: .1px;
}

.rectangle11,
.rectangle12,
.rectangle13,
.rectangle14 { position: absolute; background: #eddf00; }

.rectangle11 { top: 3px;   left: 27px;  width: 115px; height: 28px; }
.rectangle12 { top: 37px;  right: -17px; width: 117px; height: 28px; }
.rectangle13 { top: 71px;  right: -52px; width: 175px; height: 28px; }
.rectangle14 { top: 105px; left: 27px;  width: 115px; height: 28px; }
.rectangle14 { width: 64px; }

/* right column */
.autoWrapper21 {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin-top: 3px;
  width: 293px;
}

.onSpotifyMusic {
  margin-left: 13px;
  width: 241px;
  height: 18px;
  color: #3a3436;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 10px;
  font-style: italic;
  line-height: 12px;
  letter-spacing: .1px;
}

.autoWrapper18 {
  position: relative;
  align-self: stretch;
  margin-top: 92px;
  height: 45px;
}

/* ---------- pie ---------- */
.group7 {
  position: absolute;
  top: -157px;
  left: 109px;
  width: 170px;
  height: 174px;
  background: url('https://res.cloudinary.com/js8rdscp/image/upload/v1790319029/haibao/pie.svg') center / 170px 174px no-repeat;
}

.group7 p {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 44px;
  color: #3a3436;
  font-family: "DELIRIUM NCV", Arial, sans-serif;
  line-height: 1;
}

.a1 { font-size: 43px; left: 112px;   top: 93px; }
.a2 { font-size: 37px; left: 29.5px;  top: 95.5px; }
.a3 { font-size: 30px; left: 31.5px;  top: 28px; }
.a4 { font-size: 27px; left: 75.5px;  top: 10.5px; }
.a5 { font-size: 23px; left: 111.5px; top: 19.5px; }

/* ---------- rating box ---------- */
.rectangle15 {
  position: absolute;
  bottom: -10px;
  left: 14px;
  width: 266px;
  height: 125px;
  border: 1px solid #a2a2a2;
}

.autoWrapper9 {
  position: absolute;
  top: 7px;
  left: 9px;
  width: 203px;
  height: 41px;
}

.bEstplacestoeat {
  position: absolute;
  top: 0;
  left: 0;
  width: 203px;
  height: 41px;
  color: #3a3436;
  font-family: Romestone, "PingFang SC", "Microsoft YaHei", SimHei, Arial, sans-serif;
  font-size: 33px;
  line-height: 34px;
  letter-spacing: .33px;
}

.ratingBerkeleyRestau {
  position: absolute;
  right: -51px;
  bottom: -6px;
  width: 122px;
  height: 42px;
  color: #3a3436;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 10px;
  font-style: italic;
  line-height: 12px;
  letter-spacing: .1px;
}

/* restaurant labels (rotated -90deg, bottom aligned) */
.rname {
  position: absolute;
  top: 98px;
  height: 14px;
  color: #3a3436;
  font-family: Oswald, Arial, sans-serif;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: .12px;
  white-space: nowrap;
  transform-origin: 0 100%;
  transform: rotate(-90deg);
}

.n1 { left: 21.5px; }
.n2 { left: 53.5px; }
.n3 { left: 85.5px; }
.n4 { left: 118px; }
.n5 { left: 149.5px; }
.n6 { left: 181.5px; }
.n7 { left: 213.5px; }
.n8 { left: 245.5px; }

/* star columns (stacked upwards from the bottom edge) */
.stars {
  position: absolute;
  bottom: 9.1px;
  display: flex;
  flex-direction: column-reverse;
  width: 12px;
}

.stars img {
  display: block;
  width: 12px;
  height: 12px;
}

.stars img + img { margin-top: -.67px; }

.c1 { left: 22.5px; }
.c2 { left: 54.5px; }
.c3 { left: 86.5px; }
.c4 { left: 118.5px; }
.c5 { left: 150.5px; }
.c6 { left: 182.5px; }
.c7 { left: 214.5px; }
.c8 { left: 246.5px; }

/* ============================================================
   divider + weekly time spent
   ============================================================ */
.vector9 {
  margin-top: 10px;
  margin-left: 22px;
  width: 214px;
  height: 2px;
  background: #a2a2a2;
}

.group9 {
  position: relative;
  margin-top: 17px;
  margin-left: 22px;
  width: 509px;
  height: 102px;
}

.vector8 {
  position: absolute;
  top: 9px;
  left: 12px;
  width: 491px;
  height: 89px;
}

.vector7 {
  position: absolute;
  top: 97px;
  left: 0;
  width: 508px;
  height: 2px;
  background: #a2a2a2;
}

.wEeklytimespentinCom {
  position: absolute;
  top: 0;
  left: 2px;
  width: 171px;
  height: 38px;
  color: #3a3436;
  font-family: Romestone, "PingFang SC", "Microsoft YaHei", SimHei, Arial, sans-serif;
  font-size: 33px;
  line-height: 34px;
  letter-spacing: .33px;
}

.m,
.t,
.w,
.tH,
.f {
  position: absolute;
  top: 84px;
  width: 19px;
  height: 18px;
  color: #3a3436;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 10px;
  font-style: italic;
  line-height: 12px;
  letter-spacing: .1px;
}

.m  { left: 2px; }
.t  { left: 123px; }
.w  { left: 227px; }
.tH { left: 331px; }
.f  { left: 427px; }

/* ============================================================
   average wake / sleep time
   ============================================================ */
.autoWrapper24 {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  margin-top: 20px;
  padding-left: 21px;
}

.autoWrapper23 {
  position: relative;
  flex: none;
  width: 179px;
  height: 100px;
}

.a915Am {
  position: absolute;
  top: 0;
  left: 0;
  width: 179px;
  height: 100px;
  color: #3a3436;
  font-family: "DELIRIUM NCV", Arial, sans-serif;
  font-size: 98px;
  line-height: 103px;
  letter-spacing: .98px;
  white-space: nowrap;
}

.averageTimeIWakeUpAv {
  position: absolute;
  top: 21px;
  right: -121px;
  width: 122px;
  height: 42px;
  color: #3a3436;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 10px;
  font-style: italic;
  line-height: 12px;
  letter-spacing: .1px;
}

.a1245Am {
  flex: none;
  width: 207px;
  height: 100px;
  color: #3a3436;
  font-family: "DELIRIUM NCV", Arial, sans-serif;
  font-size: 98px;
  line-height: 103px;
  letter-spacing: .98px;
  white-space: nowrap;
}

.arrow1 {
  position: absolute;
  top: 28px;
  left: 198.5px;
  width: 136px;
  height: 23px;
}