/* colors */
@property --soft-linen {
  /* gentle off-white, cozy and clean */
  inherits: false;
  initial-value: #EEEEDD;
  syntax: "<color>";
}
@property --sage-mist {
  /* muted green, calm and natural */
  inherits: false;
  initial-value: #AABBAA;
  syntax: "<color>";
}
@property --quiet-fern {
  /* cool green-gray, smooth and balanced */
  inherits: false;
  initial-value: #768981;
  syntax: "<color>";
}
@property --fresh-mint {
  /* cheerful green with a hint of energy */
  inherits: false;
  initial-value: #63BA95;
  syntax: "<color>";
}
@property --forest-stone {
  /* deep, grounded green-gray, steady and trustworthy */
  inherits: false;
  initial-value: #566961;
  syntax: "<color>";
}
@property --golden-meadow {
  /* soft sun-warmed yellow, cheerful but mellow */
  inherits: false;
  initial-value: #EBBD66;
  syntax: "<color>";
}
/* elements */
html{
  /* prevent font scaling in landscape mode while allowing user zoom */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  margin: 0;
  padding: 0;
}
input, button, select, textarea {
  /* remove platform-specific styling */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
img, #title, #selected-day-left, #selected-day-center, #selected-day-right, #select-day, #weather-forecast, #social-left, #social-right {
  /* make unselectable */
  -webkit-user-select: none; /* Safari / iOS */
  user-select: none;
}
body {
  background-color: #000000;
  background-image: radial-gradient(circle, #61796c, #6d6e69, #61796c);  
  /*background-image: linear-gradient(to bottom, #4d4e49 5%, #61796c 50%, #6d6e69 100%);  */
  color: var(--soft-linen);
  font-family: 'denkone';
  font-size:18px;
  padding: 0 15px 0 15px;
  text-align: center;
  margin: 0 0 50px 0;
}
body::selection {
  background: var(--forest-stone);
}
body::moz-selection {
  background: var(--forest-stone);
}
/*  */
#logo {
  height: 192px;
  margin: 15px auto 20px auto;
  position: relative;
  width: 192px;
  background-image: radial-gradient(circle, #1d1e19, transparent 55%);
}
#logo img {
  height: inherit;
  left: 0;
  position: absolute;
  top: 0;
  width: inherit;
}
#logo-image {
  animation: shake_logo 0.6s;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
}
#main {
  /* everything below header */
  opacity: 0;
  animation-iteration-count: 1;
  animation: show_content 1.2s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  margin-top: 40px;
}
#selected-day-left, #selected-day-right {
  background-color: var(--forest-stone);
  display: inline-block;
  height:5px;
  margin-bottom: 5px;
  width: 100px;
}
#selected-day-center {
  cursor: pointer;
  display: inline-block;
  font-size: 22px;
  width: 130px; /* fixed size to ensure two digit weeks don't expand */
}

#social-left, #social-right {
  background-color: var(--forest-stone);
  display: inline-block;
  height:5px;
  margin-bottom: 22px;
  width: 100px;
}
#social-center {
  cursor: pointer;
  display: inline-block;
  width: 110px; /* fixed size to ensure two digit weeks don't expand */
}

#selected-day-current-week {
  display: none;
}
#selected-day-expand {
  height: 20px;
  margin-left: 8px;
  width: 20px;
}
/* --------------------- */
.asterisk {
  height: 16px;
  width: 16px;
  margin-bottom: -2px;
}
textarea:focus, input:focus{
    outline: none;
}
.all-week {
  display: none;
}
#holiday {
  color: var(--sage-mist);
  font-size: 18px;
  display: none;
  margin: 40px 0 -10px 0;
}
#holiday span {
  font-size: 22px;
  line-height: 50px;
  color: var(--fresh-mint);
}
#holiday-shield {
  height: 92px;
  width: 92px;
  margin-left: 20px;
  margin-bottom: 0;
}
#nominate_url {
  background-color: var(--forest-stone);
  border-radius: 15%;
  border-style: none;
  color: var(--fresh-mint);
  font-size: 16px;
  margin-top: 10px;
  padding: 5px;
  width: 300px;
}
.weather {display: none;}
#meat-menu, #fish-menu, #veg-menu {
  margin-top: -20px;
}
.checked {
  height: 16px;
  width: 16px;
  margin-left: 5px;
}
.strikethrough {
  text-decoration: line-through;
  text-decoration-color: var(--golden-meadow);
  text-decoration-thickness: 3px;
}
.underlined {
  position: relative;
  /*margin-right: 1rem;*/
}
.underlined:after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -1px;
  height: 12px;
  width: 95%;
  border: solid 3px var(--golden-meadow);
  border-color: var(--golden-meadow) transparent transparent transparent;
  border-radius: 35% 40%;
}
.underlined2 {
  text-decoration: underline;
  text-decoration-color: var(--golden-meadow);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.slash {
  /*color: var(--golden-meadow);*/
  /*color: var(--quiet-fern);*/
  /*color: var(--fresh-mint);*/
  /*color: var(--forest-stone);*/
  color: var(--soft-linen);
  margin-right: 8px;
}
.dishes-daily {
  display: inline-block;
  color: var(--sage-mist);
  font-size: 17px;
  /*font-weight: bolder;*/
  margin: 10px 0 15px 8px;
}

.dishes-weekly {
  display: inline-block;
  color: var(--sage-mist);
  font-size: 17px;
  margin: 30px 0 15px 8px;
}

.tooltip {
  display: none;
  position: relative;
  margin-top: 3px;
  /*font-style: italic;*/
  /*width: 100px;*/
  /*background: rgba(0, 0, 0, 0.85);*/
  color: var(--golden-meadow);
  /*padding: 3px 5px;*/
  /*border-radius: 4px;*/
  /*font-size: 14px;*/
  white-space: nowrap;
  /*pointer-events: none;*/
  /*transition: opacity 0.2s ease;*/
  line-height: 40px;
}

#nominate_url::selection {
  background: var(--quiet-fern);
}
#nominate_url::moz-selection {
  background: var(--quiet-fern);
}

.copy {
  cursor: pointer;
  height: 18px;
  margin-left: 5px;
  width: 18px;
}
.mon, .tue, .wed, .thu, .fri {
  display: none;
}
.nowrap {
  white-space: nowrap;
}
.weekly {
  display: inline-block;
  font-size: 65%;
  vertical-align: top;
  /*vertical-align: top;*/
  /*margin-left: 10px;*/
  /*color: var(--golden-meadow);*/
  color: var(--golden-meadow);
  transform: rotate(-10deg);
  font-family: monospace;
}
.code {
  font-family: monospace;
  color: var(--fresh-mint);
  background-color: var(--forest-stone);
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 15%;
}
.code-comment {
  margin-bottom: 4px;
}
.faq-question {
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
}
.quote {
  color: var(--fresh-mint);
  margin: 0 4px 0 4px;
  font-size: 24px;
}
.faq-answer {
  color: var(--sage-mist);
  display: none;
  font-size: 16px;
  line-height: 30px;
  margin: 30px auto 20px auto;  
  padding: 0 10px;
  max-width: 400px;
}
.faq-backend-small {
  display: none;
  height: 18px;
  width: 18px;
  margin-bottom: 5px;
}
.faq-backend {
  display: none;
  height: 20px;
  width: 20px;
  margin-bottom: 5px;
}
.faq-backend-large {
  display: none;
  height: 32px;  
  width: 32px;
  margin-bottom: 5px;
}
.faq-backend-extra-large {
  display: none;
  height: 48px;  
  width: 48px;
  margin-bottom: 5px;
  /*margin: -16px 0;*/
}
.highlighted {
  display: inline-block;
  color: var(--golden-meadow);
  /*font-style: italic;*/
}
.code-divider {
  color: var(--golden-meadow);
  font-size: 16px;
  font-family: monospace;
  /*font-weight: bold;*/
  margin: 15px auto 15px auto;  
}
.faq-number {
  display: inline-block;
  color: var(--golden-meadow);
  font-size: 16px;
  font-family: monospace;
  margin-right: 20px;
  width: 50px;
  text-align: right;
  vertical-align: top;
}
.faq-text {
  display: inline-block;
  text-align: left;
  width: 200px;
  margin-bottom: 10px;
}
#weekdays {
  display: none;
}
@font-face {
  font-family: 'denkone';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/denkone-regular.woff2') format('woff2'),
       url('fonts/denkone-regular.woff') format('woff');
}
/* header */
.hint-sides, .hint-faq {
  color: var(--sage-mist);
  font-size: 15px;
  margin-top: -10px;
}
.hint-faq {
  margin-bottom: 30px;
}
.hint-sides {
  margin-bottom: 50px;
}

.tap {
  height: 24px;
  margin: 0 10px -5px 0;
  width: 24px;
}
.close {
  cursor: pointer;
  height: 16px;
  margin: 0 0 5px 5px;
  width: 16px;
}
.hr {
  background-color: var(--quiet-fern);
  border-radius: 30%;
  height: 3px;
  margin: 14px auto 20px auto;
  width: 170px;
}
.faq-hr {
  background-color: var(--quiet-fern);
  border-radius: 30%;
  height: 3px;
  margin: 30px auto 30px auto;
  width: 150px;
}
.hr-tall {
  background-color: var(--golden-meadow);
  border-radius: 30%;
  height: 1px;
  margin: 30px auto 25px auto;
  width: 100px;  
}
#header-description {
  font-size: 22px;
  line-height: 30px;
  margin-top: 20px;
}
#header-title {
  color: var(--fresh-mint);
}
#slogan {
  margin-top: 14px;
  color: var(--sage-mist);
  font-size: 20px;
  text-shadow: 0 0 100px var(--soft-linen);
}
/* main */
#select-day {
  display: none;
  margin-top: 20px;
  margin-bottom: 10px;
}
.select-day-weekday {
  background-color: var(--quiet-fern);
  /*border-radius: 10px 5px;*/
  border-radius: 25%;
  color: var(--soft-linen);
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  margin: 20px 5px 0 5px;
  padding: 8px 20px 8px 20px;
  border-style: solid;
  border-color: #555;
  border-width: 1px;
}
#weather-hr {
  margin-top: 40px;
}
#weather-hr-left, #weather-hr-right {
  background-color: var(--forest-stone);
  display: inline-block;
  height: 5px;
  margin-bottom: 8px;
  width: 139.5px;
}
#weather-hr-center {
  display: inline-block;
  width: 40px;
}
#weather-hr-center img {
  height: 24px;
  margin-top: 5px;
  width: 24px;
}
#weather-forecast img {
  height: 40px;
  width: 40px;
  margin-bottom: 5px; 
  margin-right: 44px;
  margin-top:-20px;
}
#weather-forecast img:nth-of-type(3) {
  margin-right: 0;
}
#weather-forecast span {
  /*background-color: var(--forest-stone);*/
  border-radius: 20%;
  display: inline-block;
  font-size: 15px;
  margin-top: 5px;
  padding: 5px 0;
  width: 75px;
}
.menu {
  display: inline-block;
  font-size: 16px;
  line-height: 30px;
  margin: 5px auto;
  vertical-align: top;  
}
.restaurant {
  color: var(--fresh-mint);
  text-align: right;
  width: 120px;
}
.restaurant a {
  color: var(--fresh-mint);
  text-decoration: none;
}
.sides {
  color: var(--sage-mist);
  display: none;
  cursor: text;
}
.divider {
  color: var(--golden-meadow);
  width: 30px;
  font-size: 10px;
  vertical-align: top;
}
.dish {
  color: var(--soft-linen);
  text-align: left;
  width: 180px;
}
.dish span {
  cursor: pointer;
}
/* animations */
#title {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px auto 0 auto;  
  /*height: 100vh;*/
  color: var(--soft-linen);
  display: inline-block;
  /*justify-content: center;*/
  /*align-items: center;*/
}
#title-left {
  background-color: var(--forest-stone);
  border-bottom-left-radius: 15%;
  border-color: #555;
  border-style: solid;
  border-top-left-radius: 15%;
  border-width: 1px 1px 2px 4px;
  color: var(--fresh-mint);
  display: inline-block;
  letter-spacing: 1.5px;
  padding:6px 15px 6px 15px;
  transform: rotate(-2deg);
  /*box-shadow: 1px 1px 10px #1d1e19;*/
}
#title-right {
  background-color: var(--quiet-fern);
  border-bottom-right-radius: 15%;
  border-color: #555;
  border-style: solid;
  border-top-right-radius: 15%;
  border-width: 1px 4px 2px 1px;
  display: inline-block;
  letter-spacing: 1.5px;
  padding:6px 15px 6px 15px;
  transform: rotate(1.55deg);
  margin-left:-3px;
  /*box-shadow: 1px 1px 10px #1d1e19;*/
}
@keyframes shake_logo {
  0% { transform: translate(1px, 1px) rotate(0deg);}
  10% { transform: translate(-1px, -2px) rotate(-1deg);}
  20% { transform: translate(-3px, 0px) rotate(1deg);}
  30% { transform: translate(3px, 2px) rotate(0deg);}
  40% { transform: translate(1px, -1px) rotate(1deg);}
  50% { transform: translate(-1px, 2px) rotate(-1deg);}
  60% { transform: translate(-3px, 1px) rotate(0deg);}
  70% { transform: translate(3px, 1px) rotate(-1deg);}
  80% { transform: translate(-1px, -1px) rotate(1deg);}
  90% { transform: translate(1px, 2px) rotate(0deg);}
  100% { transform: translate(1px, -2px) rotate(-1deg);}
}
@keyframes show_content {
    0% {
        opacity: 0;
        margin-top:150px;
    }
    100% {
        opacity: 1;
        margin-top:40px;
    }
}
#weather-forecast {
  margin-bottom: 0;
  margin-top: 46px;
}

.fryingpans {
  opacity: 0;
  transition: 3s all ease;  
}
.fryingpans.active {
  opacity: 1;
}

#fryingpan-meat {
  opacity: 0;
  transition: 3s all ease;  
}

#fryingpan-meat.active {
  opacity: 1;
}

.meat, .veg {
  margin-right: 0;
  margin-top: 40px;
  height: 92px;
  opacity: 0;
  padding-bottom:0;
  transform: rotate(-45deg);
  transition: 1s all ease;
  width: 92px;
}
.meat.active, .veg.active {
  margin-right: -20px;
  opacity: 1;
  padding-bottom: 0;
  transform: rotate(0deg);
}
.fish{
  height: 92px;  
  margin-right: 4px;
  opacity: 0;
  padding-bottom:0;
  transform: rotate(45deg);
  transition: 1s all ease;
  width: 92px;  
}
.fish.active{
  margin-right: 24px;
  opacity: 1;
  padding-bottom:0;
  transform: rotate(0deg);
}
.faq{
  margin-top: 75px;
  opacity: 0;
  padding-left: 75px;
  transition: 0.5s linear;
}
.faq.active{
  margin-top: 0;
  opacity: 1;
  padding-left: 0;
}

#credits {
  margin-bottom: 50px;
}

.faq-answer a {
  color: var(--fresh-mint);
  text-decoration: none;
}

#credits a {
  margin-top: 5px;
  color: var(--fresh-mint);
  text-decoration: none;
}

.credits-image {
  margin-bottom: 150px;
  margin-left: -150px;
  opacity: 0;
  transition: 1s;
}
.credits-image.active {
  margin-bottom: 0;
  margin-left: -35px;
  opacity: 1;
}

.button {
  border: none;
  cursor: pointer;
  display: inline-block;
  font-family: 'denkone';
  font-size:16px;
  margin: 15px 3px 0 3px;
  padding: 4px 12px;
  text-align: center;
  text-decoration: none;
}
.button1 {
  background-color: var(--fresh-mint); 
  border-radius: 10px 5px;
  color: #121; 
}
.button2 {
  background-color: var(--quiet-fern); 
  color: var(--soft-linen);
  border-radius: 15%;
  /*border-radius: 10px 5px;*/
}
.button1:hover {
}
/* override styling for landscape orientation */
@media (orientation: landscape) {
  .restaurant {
    width: 230px; /* default = 130px */
  }
  .dish {
    width: 400px; /* default = 165px */
  }  
  .faq-answer {
    max-width: 600px; /* default = 400px */
  }    
}
/* override styling for screens wider than or equal to 1024px */
@media (min-width: 1024px) {
  body {
    padding-left: 20px; /* default = 10px */
    padding-right: 20px; /* default = 10px */
    margin-bottom: 150px; /* default = 50px */
  }
  .meat, .fish, .veg, #holiday-shield {
     height: 104px;  /* default=  92px */
     width: 104px;  /* default=  92px */
  }
  #logo {
    height: 256px; /* default = 192px */
    width: 256px; /* default = 192px */
    margin-top: 40px; /* default = 10px */
  }
  #slogan {
    font-size: 22px; /* default = 20px */
  }
  #title {
    font-size: 26px; /* default = 22px */
  }
  #title-left {
    padding:8px 20px 8px 20px; /* default = 6px 15px 6px 15px */
  }
  #title-right {
    padding:8px 20px 8px 20px; /* default = 6px 15px 6px 15px */
  }
  .slash {
    margin-right: 6px;
  }
  .select-day-weekday {
    font-size: 15px; /* default = 13px */
  }  
  .menu, .dishes-daily, .dishes-weekly {
    font-size: 18px; /* default = 16px */
  } 
  .restaurant {
    width: 450px; /* default = 130px */
  }
  .dish {
    width: 450px; /* default = 165px */
  }
  .dishes-daily, .dishes-weekly {
    margin-left: 0;
  }
  .faq-answer {
    max-width: 975px; /* default = 400px */
  }  
  #weather-hr-left, #weather-hr-right {
    width: 199.5px; /* default = 139.5px*/
  }
  #selected-day-left, #selected-day-right {
    width: 177px; /* default = 117 px */
  }
  .faq-text {
    width: 350px; /* default = 200px */
  }
  #credits {
    margin-bottom: 75px; /* default = 50px */
  }
}