@font-face {
  font-family: Namu-1990;
  src: url('../fonts/NAMU-1990.woff2') format("woff2"), url('../fonts/NAMU-1990.woff') format("woff"), url('../fonts/NAMU-1990.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --dark: #000;
  --body-family: Namu-1990, Arial, sans-serif;
  --title-family: Literata, sans-serif;
  --light: white;
  --accent: #ffaddd;
}

.w-layout-layout {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-columns: 1fr;
  justify-content: center;
  padding: 20px;
}

.w-layout-cell {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

body {
  background-color: var(--dark);
  font-family: var(--body-family);
  color: var(--dark);
  padding-top: 2rem;
  padding-bottom: 6rem;
  font-size: 1.125rem;
  line-height: 1.25em;
}

h2 {
  font-family: var(--title-family);
  color: var(--dark);
  text-align: center;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1em;
}

h3 {
  font-family: var(--title-family);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.25em;
}

a {
  color: var(--dark);
  border-radius: 2rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: inline-block;
}

.bill-wrapper {
  background-color: var(--light);
  will-change: transform;
  width: 100%;
  padding: 1rem 1rem 2rem;
  position: relative;
}

.item {
  font-family: var(--title-family);
}

.menu-block {
  border-top: 1px dashed #000;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.menu-block.simple {
  border: 0 solid #000;
  padding-top: 0;
  padding-bottom: 0;
}

.menu-line {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: space-between;
  padding: 0;
  display: flex;
}

.price-cell {
  justify-content: flex-end;
  align-items: flex-end;
}

.intro-section {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  flex-flow: column;
  align-items: center;
  padding-top: .5rem;
  padding-bottom: 2rem;
  display: flex;
}

.hoku-container {
  width: 100%;
}

.align-r {
  text-align: right;
}

.align-c {
  text-align: center;
}

.hanok-logo {
  width: 75%;
}

.hanok-dude {
  width: 8rem;
}

.dude-wrapper {
  justify-content: center;
  align-items: flex-end;
  padding-top: 2rem;
  position: relative;
}

.light {
  background-image: linear-gradient(#fff0, #fff);
  height: 2rem;
  position: absolute;
  inset: auto 0% 0%;
}

.shade {
  z-index: 999;
  pointer-events: none;
  background-image: linear-gradient(#0000, #000c);
  height: 4rem;
  position: fixed;
  inset: auto 0% 0%;
}

.links {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.vyraz-link {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  opacity: .8;
  color: var(--light);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  font-size: .96rem;
  line-height: 1em;
  text-decoration: none;
  transition: opacity .25s;
  display: flex;
}

.vyraz-link:hover {
  opacity: 1;
}

.vyraz-link:active {
  opacity: .8;
}

.vyraz-logo {
  filter: invert();
  height: 2.5rem;
}

.wrapper {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  width: 23rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.button-link {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--light);
  text-align: center;
  will-change: transform;
  border-radius: 3rem;
  justify-content: center;
  align-items: center;
  height: 6rem;
  text-decoration: none;
  transition-property: transform, background-color;
  transition-duration: .2s, .35s;
  transition-timing-function: ease, cubic-bezier(.215, .61, .355, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.button-link:hover {
  background-color: var(--accent);
  transform: scale(1.06);
}

.button-link:active {
  transform: scale(.98);
}

.bill-top {
  background-image: url('../images/bill-top.svg');
  background-position: 50% 0;
  background-repeat: repeat-x;
  background-size: auto;
  height: .5rem;
  position: absolute;
  inset: 0% 0% auto;
}

.bill-bot {
  background-image: url('../images/bill-bot.svg');
  background-position: 50% 0;
  background-repeat: repeat-x;
  background-size: auto;
  height: .5rem;
  position: absolute;
  inset: auto 0% 0%;
}

.tips-icon {
  pointer-events: none;
  width: 2.5rem;
}

.serif {
  font-family: var(--title-family);
  font-weight: 400;
}

.serif.black {
  font-weight: 900;
}

.btn-highlight {
  mix-blend-mode: multiply;
  background-image: linear-gradient(270deg, #fff0, #ff7e3326 30%, #ff00bb26 60%, #fff0);
  width: 12rem;
  height: 6rem;
  position: absolute;
  left: -12rem;
}

.dudes-footer {
  width: 75%;
}

.dudes-wrapper {
  justify-content: center;
  align-items: center;
}

.decorations {
  height: 0;
}

.d-bean {
  position: absolute;
  top: 52%;
  left: 25%;
}

.d-milk {
  z-index: 3;
  position: absolute;
  bottom: 28%;
  right: 15%;
}

.d-cup {
  position: absolute;
  bottom: 5%;
  right: 15%;
}

.d-kettle {
  position: absolute;
  bottom: 16%;
  left: 15%;
}

.sticker-image {
  height: 8rem;
  transition: transform .2s, filter .2s;
}

.sticker-image:hover {
  filter: drop-shadow(4px 8px 4px #0000001a);
  transform: translate(0, -2px);
}

.speech-bubble {
  transform-origin: 50% 100%;
  font-family: var(--title-family);
  text-align: center;
  background-color: #fff;
  border: 1px solid #0003;
  border-radius: 2rem;
  max-width: 8rem;
  padding: .25rem 1rem .5rem;
  position: absolute;
  bottom: 102%;
  left: 0;
  transform: scale(0);
  box-shadow: 0 1px 23px #0000001a, 0 2px 12px #0000001a;
}

.body {
  background-color: var(--dark);
}

.menu-link {
  background-color: #0000001a;
  padding-left: 1rem;
  padding-right: 1rem;
  transition: background-color .35s cubic-bezier(.165, .84, .44, 1);
}

.menu-link:hover {
  background-color: var(--accent);
}

.hl-wrapper {
  transform-origin: 50% 100%;
  transform: skew(-45deg);
}

.banner {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  background-color: var(--accent);
  border-radius: 2rem;
  flex-flow: column;
  margin-bottom: 1rem;
  padding: 1rem 2rem 1.5rem;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 .5rem 1.5rem #0003;
}

.banner-highlight {
  pointer-events: none;
  mix-blend-mode: soft-light;
  background-image: linear-gradient(90deg, #fff0 25%, #fff 50%, #fff0 75%);
  width: 12rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hidden {
  display: none;
}

@media screen and (max-width: 479px) {
  body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .wrapper {
    width: 100%;
  }
}

#w-node-_567b37b1-583a-910b-8c22-434b23ea100d-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1014-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea101b-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1022-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea102c-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1033-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea103a-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1041-7f71c726 {
  grid-template-rows: auto;
  grid-template-columns: 1fr .5fr;
}

#w-node-_567b37b1-583a-910b-8c22-434b23ea1048-7f71c726 {
  grid-template-rows: auto;
  grid-template-columns: 1fr .25fr;
}

#w-node-_567b37b1-583a-910b-8c22-434b23ea1052-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1059-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1060-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1067-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea106e-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1075-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea107c-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1083-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea108a-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1091-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea1098-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10a2-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10a9-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10b0-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10b7-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10c1-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10c8-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10cf-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10d9-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10e0-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10ea-7f71c726, #w-node-_567b37b1-583a-910b-8c22-434b23ea10f1-7f71c726, #w-node-_0ecd259b-24c0-4087-3574-bf54f151eb0a-73419fc2, #w-node-a2f460c3-b829-0b3c-3070-61380ef2376b-73419fc2, #w-node-_6c1021ec-2847-8824-b8bc-6d1fe2a4439d-73419fc2, #w-node-d5c21c36-9330-a41d-82dd-3ab00775c0ba-73419fc2, #w-node-_47d880d6-04f8-fac6-8c66-501226657f0e-73419fc2, #w-node-_47d880d6-04f8-fac6-8c66-501226657f15-73419fc2, #w-node-_47d880d6-04f8-fac6-8c66-501226657f1c-73419fc2, #w-node-_47d880d6-04f8-fac6-8c66-501226657f23-73419fc2 {
  grid-template-rows: auto;
  grid-template-columns: 1fr .5fr;
}

#w-node-_47d880d6-04f8-fac6-8c66-501226657f2a-73419fc2 {
  grid-template-rows: auto;
  grid-template-columns: 1fr .25fr;
}

#w-node-_4ca3dd32-0446-7228-75b5-0fe6f2acdb91-73419fc2, #w-node-_4ca3dd32-0446-7228-75b5-0fe6f2acdb98-73419fc2, #w-node-_4ca3dd32-0446-7228-75b5-0fe6f2acdb9f-73419fc2, #w-node-_4ca3dd32-0446-7228-75b5-0fe6f2acdba6-73419fc2, #w-node-_4ca3dd32-0446-7228-75b5-0fe6f2acdbad-73419fc2, #w-node-_9616b270-b49b-acfd-3b2a-81e4645ad07e-73419fc2, #w-node-_62c01ae6-30ac-4c52-a13e-59563fc140d8-73419fc2, #w-node-_8757c6fc-8a45-be16-ae1d-2b0c8e21c89b-73419fc2, #w-node-_708bf500-841f-c690-61ff-302df7db759a-73419fc2, #w-node-edfa547c-a886-ebb6-e2b7-08463c4b34a5-73419fc2, #w-node-b4d7644f-a07b-fc6a-8ca9-77be35eb1766-73419fc2, #w-node-b809484b-997f-3dc4-b08b-9d15af63469b-73419fc2, #w-node-b809484b-997f-3dc4-b08b-9d15af6346a2-73419fc2, #w-node-b809484b-997f-3dc4-b08b-9d15af6346a9-73419fc2, #w-node-b809484b-997f-3dc4-b08b-9d15af6346b0-73419fc2, #w-node-_26aaa598-14ac-0b79-d15a-f393004dc40b-73419fc2, #w-node-_26aaa598-14ac-0b79-d15a-f393004dc412-73419fc2, #w-node-_26aaa598-14ac-0b79-d15a-f393004dc419-73419fc2, #w-node-_1858bcd9-024d-39c1-5ad6-419965340efa-73419fc2, #w-node-_1858bcd9-024d-39c1-5ad6-419965340f01-73419fc2, #w-node-_8dc77c43-e37d-9a63-1aac-23fb59f2ad2c-73419fc2, #w-node-_8dc77c43-e37d-9a63-1aac-23fb59f2ad33-73419fc2 {
  grid-template-rows: auto;
  grid-template-columns: 1fr .5fr;
}


@font-face {
  font-family: 'Namu-1990';
  src: url('../fonts/NAMU-1990.woff2') format('woff2'), url('../fonts/NAMU-1990.woff') format('woff'), url('../fonts/NAMU-1990.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}