*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  --burger-width: 500px;
  --fastfood-width: 100px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  -webkit-font-smoothing: antialiased;
}

picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p{
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: ; */
  background: center /15%
    url("/image/MNKR_435.png");
  
  position: relative;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
  #fafafa;
    opacity: 0.95;
    z-index: -1;
}

html, body {
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}

@font-face {
    font-family: 'munroregular';
    src: url('./font/munro-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;

}



.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 0 1px #a82228;
  position: relative;
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
  #fafafa;
    opacity: 0.25;
    z-index: -1;
}

#motto {
  font-family: 'munroregular';
  font-display: swap;
  font-size: 19px;
  line-height: 1.1;
  color: #ADA250;
}

#burger_container {
  width: calc(var(--burger-width) * 0.7);
  height: calc(var(--burger-width) * 0.7);
  padding: 10px 10px 0 10px;
}

#burger {
  width: 100%;
  height: 100%;
}

.container_2 {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  width: calc(var(--burger-width) * 0.7);
  padding: 10px;
  
  
  position: relative;
}

#mute_container {
  cursor: pointer;
  position: absolute;
  right: 8px;
  bottom: 8px;
}

#fastfood_t80 {
  width: calc(var(--fastfood-width) * 0.7);
  height: calc(var(--fastfood-width) * 0.7);
  border-radius: 4px;
  padding: 2px;
  border:#ADA250 1px solid;
  background-color: #fafafa;
}

@media (min-width: 640px) and (max-width: 960px) and (min-height: 780px) {
  body {
    background: center /25%
    url("/image/MNKR_435.png");
  }

  #burger_container {
    width: calc(var(--burger-width) * 0.8);
    height: calc(var(--burger-width) * 0.8);
  }

  #motto {
    font-size: 22px;
  }

  .container_2 {
    width: calc(var(--burger-width) * 0.8);
  }

  #fastfood_t80 {
  width: calc(var(--fastfood-width) * 0.8);
  height: calc(var(--fastfood-width) * 0.8);
}

}

@media (max-width: 390px) {
  body {
    background: center /35%
    url("/image/MNKR_435.png");
  }
  
  #motto {
    font-size: 19px;
  }

  #burger_container {
    width: calc(var(--burger-width) * 0.7);
    height: calc(var(--burger-width) * 0.7);
  }

  .container_2 {
    width: calc(var(--burger-width) * 0.7);
  }

  #fastfood_t80 {
  width: calc(var(--fastfood-width) * 0.7);
  height: calc(var(--fastfood-width) * 0.7);
}
}

@media (max-width: 326px) {
  #motto {
    font-size: 16px;
  }

  #burger_container {
    width: calc(var(--burger-width) * 0.6);
    height: calc(var(--burger-width) * 0.6);
  }

  .container_2 {
    width: calc(var(--burger-width) * 0.6);
  }

  #fastfood_t80 {
    width: calc(var(--fastfood-width) * 0.6);
    height: calc(var(--fastfood-width) * 0.6);
  }
  /* a{
    font-size: 18px;
  } */
}

@media (max-width: 300px) {
  #motto {
    font-size: 13px;
  }

  #burger_container {
    width: calc(var(--burger-width) * 0.5);
    height: calc(var(--burger-width) * 0.5);
  }

  .container_2 {
    width: calc(var(--burger-width) * 0.5);
  }

  #fastfood_t80 {
    width: calc(var(--fastfood-width) * 0.5);
    height: calc(var(--fastfood-width) * 0.5);
  }
}