@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Color+Emoji&display=swap');

* {
  margin: 0;
  box-sizing: border-box;
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  25% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes grin {
  0%, 74%, 100% {}
  75%, 99% {
    background: url("svg/u1f638.svg") no-repeat center center;
  }
}

@keyframes yawn {
  0%, 74%, 100% {}
  75%, 99% {
    background: url("svg/u1f638.svg") no-repeat center center;
  }
}

@keyframes weary {
  0%, 74%, 100% {}
  75%, 99% {
    background: url("svg/u1f640.svg") no-repeat center center;
  }
}

/* for preloading */
.yawn { background: url("svg/u1f638.svg") no-repeat center center !important; }
.weary { background: url("svg/u1f640.svg") no-repeat center center !important; }
.grin { background: url("svg/u1f638.svg") no-repeat center center !important; }

@keyframes nom {
  0% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(-2deg);
  }

  70% {
    transform: rotate(2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

html {
  background-color: #f9f9f9;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  user-select: none;
  color: #808080;
  height: 100%;
  /* Default background */
  background-image: linear-gradient(to top, aliceblue, antiquewhite);

  /* Nekograms Theme */
  /* background-image: url(images/pawprint.png), linear-gradient(to top, #8ed1c3, #b9db9c); */
  background-repeat: repeat, no-repeat;
  background-size: 200px auto, cover;
}

h1 {
  text-transform: uppercase;
}

h1,
h2,
h3,
h4 {
  font-weight: normal;
}

body {
  width: 360px;
  border: 2px dashed #cccccc;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0px;
}

header {
  padding: 16px;
  border-bottom: 2px dashed #cccccc;
}

main {
  background-color: white;
}

.logo {
  margin-top: 48px;
  height: 160px;
  background-image: url("svg/u1f431.svg");
  animation: nom 2s infinite, yawn 3s infinite;
  animation-timing-function: ease, steps(1);
  filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
}

/* xmas Main Icon*/
/*
.intro {
  margin-top: 48px;
  height: 160px;
  background-image: url("svg/u1f431.svg");
  animation: nom 2s infinite, grin 3s infinite;
  animation-timing-function: ease, steps(1);
  filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
}
.intro:after {
  position: absolute;
  background-image: url("svg/u1f381.svg");
  width:60px;
  height: 60px;
  content: " ";
  font-size: 24px;
  transform: translate(-30px, 0px);
  left: 50%;
  top: -5px;
}
*/

/* lunar Main Icon*/
/*
.intro {
  margin-top: 48px;
  height: 160px;
  background-image: url("svg/u1f431.svg");
  animation: nom 2s infinite, grin 3s infinite;
  animation-timing-function: ease, steps(1);
  filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
}
.intro:after {
  position: absolute;
  background-image: url("svg/u1f9cb.svg");
  width:60px;
  height: 60px;
  content: " ";
  font-size: 24px;
  transform: translate(-40px, 120px);
  left: 50%;
  top: -5px;
}
*/

/* Valentine's Day Main Icon*/
/* .intro {
  margin-top: 48px;
  height: 160px;
  background-image: url("svg/u1f431.svg");
  animation: nom 2s infinite, grin 3s infinite;
  animation-timing-function: ease, steps(1);
  filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
}
.intro:after {
  position: absolute;
  background-image: url("svg/u1f48c.svg");
  width:60px;
  height: 60px;
  content: " ";
  font-size: 24px;
  transform: translate(-30px, 125px) rotate(10deg) ;
  left: 50%;
  top: -5px;
} */

#guesses {
  padding: 8px;
  border-bottom: 2px dashed #cccccc;
}

.guess {
  display: grid;
  grid-template-columns: auto auto auto auto auto;

  border-bottom: 2px solid white;
}

.guess:last-child {
  border-bottom: none;
}

.cell {
  display: grid-item;
  width: 68px;
  height: 68px;
  display: inline;

  background-color: #f9f9f9;

  transition: all 0.2s;
}

.guess:nth-child(even)>.cell:nth-child(even) {
  background-color: #f5f5f5;
}

.guess:nth-child(odd)>.cell:nth-child(odd) {
  background-color: #f5f5f5;
}

.cat {
  position: absolute;
  height: 64px;
  width: 64px;
  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.4));
}

.guess.current>.cell>.cat {
  opacity: 0.4;
}

.cat.correct {
  animation: nom 0.5s, grin 3s;
  animation-timing-function: ease, steps(1);
  animation-iteration-count: 3, 1;
}

.cat.correct {
  background-image: url("svg/u1f431.svg")
}

.cat.incorrect {
  opacity: 0.1;
}

.cat.left,
.cat.right {
  background-image: url("svg/u1f408.svg")
}
.cat.right {
  transform: scaleX(-1);
}

.cat_0
{
  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.4));
}

.cat_1
{
  filter: sepia(80%) drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.4));
}

.cat_2
{
  filter: hue-rotate(-30deg) drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.4));
}

.cat_3
{
  filter: grayscale(60%) drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.4));
}

.cat_4
{
  filter: saturate(0%) drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.4));
}

.logo.cat_0
{
  filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2)) !important;
}

.logo.cat_1
{
  filter: sepia(80%) drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2)) !important;
}

.logo.cat_2
{
  filter: hue-rotate(-30deg) drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2)) !important;
}

.logo.cat_3
{
  filter: grayscale(60%) drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2)) !important;
}

.logo.cat_4
{
  filter: saturate(0%) drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2)) !important;
}

.logo.cat_5
{
  animation: nom 2s infinite !important;
  background-image: url("svg/custom/caroline.svg") !important;
  filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2)) !important;
}

.logo:before {
  display:inline-block;
  margin-top:150px;
  background-color: antiquewhite;
  padding: 2px;
  border-radius: 4px;
  font-size: small;
  z-index: 100;
  position: absolute;
  transform: translate(-50%,0);
}

.logo.cat_0:before {
  content: "Today's cat is: Titan";
}

.logo.cat_1:before {
  content: "Today's cat is: Apollo";
}

.logo.cat_2:before {
  content: "Today's cat is: Oliver";
}

.logo.cat_3:before {
  content: "Today's cat is: Donna";
}

.logo.cat_4:before {
  content: "Today's cat is: Luna";
}

.logo.cat_5:before {
  content: "Today's cat is: Caroline";
}


.logo.cake:before {
  width: 64px;
  height: 64px;
  position:absolute;
  margin-left: -32px;
  margin-top: 110px;
  background-color: transparent;
  background-image: url("svg/u1f382.svg");
  content: "";
}

.cake-hero {
  text-align: center;
  background-image: url("svg/u1f382.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0;
  height: 112px;
}

.food {
  position: relative;
  height: 64px;
  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.4));

  transition: all 0.2s;

  z-index: 1;
}

/* Standard */
.food_0 { background-image: url("svg/u1f349.svg") }
.food_1 { background-image: url("svg/u1f370.svg") }
.food_2 { background-image: url("svg/u1f369.svg") }
.food_3 { background-image: url("svg/u1f365.svg") }
.food_4 { background-image: url("svg/u1f364.svg") }
.food_5 { background-image: url("svg/u1f363.svg") }
.food_6 { background-image: url("svg/u1f359.svg") }
.food_7 { background-image: url("svg/u1f96a.svg") }
.food_8 { background-image: url("svg/u1f355.svg") }
.food_9 { background-image: url("svg/u1f95e.svg") }

#preload  {
  position: fixed;
  top: -99999px;
  left: -99999px;
}

/* Lunar New Year */

/*
.food_0 { background-image: url("svg/u1f3ee.svg") }
.food_1 { background-image: url("svg/u1f40d.svg") }
.food_2 { background-image: url("svg/u1f311.svg") }
.food_3 { background-image: url("svg/u1f95f.svg") }
.food_4 { background-image: url("svg/u1f34a.svg") }
.food_5 { background-image: url("svg/u1f343.svg") }
.food_6 { background-image: url("svg/u1f9cb.svg") }
.food_7 { background-image: url("svg/u1f9e7.svg") }
.food_8 { background-image: url("svg/u1f9e8.svg") }
.food_9 { background-image: url("svg/u1f534.svg") }
*/

/* Xmas */
/*
.food_0 { background-image: url("svg/u1f357.svg") }
.food_1 { background-image: url("svg/u1f36c.svg") }
.food_2 { background-image: url("svg/u1f389.svg") }
.food_3 { background-image: url("svg/u1f95b.svg") }
.food_4 { background-image: url("svg/u1f342.svg") }
.food_5 { background-image: url("svg/u1f9f6.svg") }
.food_6 { background-image: url("svg/u1f36a.svg") }
.food_7 { background-image: url("svg/u1f9f8.svg") }
.food_8 { background-image: url("svg/u1f36b.svg") }
.food_9 { background-image: url("svg/u1f381.svg") }
*/

/* Valentine's Day Foods */
/* .food_0 { background-image: url("svg/u1f9c1.svg") }
.food_1 { background-image: url("svg/u1f49d.svg") }
.food_2 { background-image: url("svg/u1f48c.svg") }
.food_3 { background-image: url("svg/u1f339.svg") }
.food_4 { background-image: url("svg/u1f490.svg") }
.food_5 { background-image: url("svg/u1f36b.svg") }
.food_6 { background-image: url("svg/u1f9f8.svg") }
.food_7 { background-image: url("svg/u1f380.svg") }
.food_8 { background-image: url("svg/u1f381.svg") }
.food_9 { background-image: url("svg/u1f48d.svg") } */

/* Nekograms Theme Items  */
/* .food_0 { background-image: url("svg/custom/bento-min.svg") }
.food_1 { background-image: url("svg/custom/bread-min.svg") }
.food_2 { background-image: url("svg/custom/bucket-min.svg") }
.food_3 { background-image: url("svg/custom/coffee-min.svg") }
.food_4 { background-image: url("svg/custom/dango-min.svg") }
.food_5 { background-image: url("svg/custom/fish-min.svg") }
.food_6 { background-image: url("svg/custom/mask-min.svg") }
.food_7 { background-image: url("svg/custom/pancake-min.svg") }
.food_8 { background-image: url("svg/custom/potplant-min.svg") }
.food_9 { background-image: url("svg/custom/sakura-min.svg") } */

.guess>.cell>.food.unchecked {
  height: 64px;
  margin-top: 0px;
}

.food_0,
.food_1,
.food_2,
.food_3,
.food_4,
.food_5,
.food_6,
.food_7,
.food_8,
.food_9
{
  animation: pop 1s;
  animation-iteration-count: 1;
}

.guess>.cell>.food {
  height: 28px;
  margin-top: 40px;
  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.4));
}

#palette {
  padding: 8px;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

#palette>.cell {
  background: none;
}

#palette>.cell>.food {
  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.4));
}

#palette>.cell>.food:hover {
  transform: scale(1.1) translateY(-4px);
  filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.3));
}

footer {
  padding: 8px;
  border-top: 2px dashed #cccccc;
}

footer>div>p {
  padding: 8px;
  margin: 8px;
}

button {
  color: inherit;

  border-style: none;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 1em;
  padding: 8px;
  margin: 8px;
  width: 120px;
  display: inline-block;

  transition: all 0.2s;

  background-color: antiquewhite;
}

button:disabled {
  background-color: #e6e6e6;
}

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 2;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

p {
  margin: 16px;
}

.small {
  font-size: smaller;
}

ul {
  text-align: left;
}

a {
    color: grey;  /* Unvisited link color */
}

.purrdle {
  animation: nom 0.5s;
  animation-iteration-count: infinite;
}

.modal > div {
  margin: 24px;
}

header>.title {
  margin-left: 24px;
}

header>.help {
  float: right;
  width: 24px;
}

button.undo {}

button.submit {}

.howtoplay {
  padding: 0px;
}

/* shiv for short screens */
@media only screen and (max-height: 668px) {
  body {
    transform: translate(-50%, -50%) scale(0.8);
  }
}

hr {
  border: none;
  border-bottom: 2px dashed #ccc;
}

li {
  margin-top: 8px;
}

/* HTML: <div class="loader"></div> */
.loader {
  display: none;
}
body.loading {
  border: none;
}
body.loading > * {
  display: none;
}
.loading > .loader {
  display: block;
  margin:auto;
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}
@keyframes l5 {
    0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
    33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
    66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
    100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
}

.emoji {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.referral {
  padding: 8px;
  animation: nom 2s 1s infinite;
}

.modal {
  overflow: hidden;
}

.itemCategory:before {
  content: var(--itemCategory);
}

.itemCategoryPlural:before {
  content: var(--itemCategoryPlural);
}

/* Results */
#results {
  max-height: 200px;
  overflow-y: scroll;
  background: antiquewhite;
  padding: 1em;
  border-radius: 1em;
  width: 60%;
  margin: auto;
  color: black;
}

/* share link emojis */
html {
  --nearbyGuessEmoji: 😾;
  --incorrectGuessEmoji: 🐾;
  --correctGuessEmoji: 😻;
  --itemCategory: "food";
  --itemCategoryPlural: "foods";
}

/* Holiday testing */

/* todo:
   - add mesage of the day URL in code
   - add share link emojis in code
   - add SVG preload to code
*/

/*
 * Halloween theme
 */

/* cat logo */
html.yearly_10-31 {
  --correctGuessEmoji: 🙀;
  --holidayText: 🎃 Happy Halloween 🎃;
  --holidayURL: https://en.wikipedia.org/wiki/Halloween;
  --holidayHashtag: #Halloween;
  --itemCategory: "item";
  --itemCategoryPlural: "items";

  background-color: #000;
  background-image: linear-gradient(to top, orange, black);

  .intro {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, weary 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  /* items */
  .food_0 { background-image: url("svg/u1f577.svg"); } /* 🕷️ */
  .food_1 { background-image: url("svg/u1f383.svg"); } /* 🎃 */
  .food_2 { background-image: url("svg/u1f987.svg"); } /* 🦇 */
  .food_3 { background-image: url("svg/u1fab1.svg"); } /* 🪱 */
  .food_4 { background-image: url("svg/u1f578.svg"); } /* 🕸️ */
  .food_5 { background-image: url("svg/u1f36b.svg"); } /* 🍫 */
  .food_6 { background-image: url("svg/u1f36c.svg"); } /* 🍬 */
  .food_7 { background-image: url("svg/u1f36d.svg"); } /* 🍭 */
  .food_8 { background-image: url("svg/u1f47b.svg"); } /* 👻 */
  .food_9 { background-image: url("svg/u1f480.svg"); } /* 💀 */
}

/*
 * Christmas theme
 */
html.yearly_12-25 {
  --correctGuessEmoji: 😸;
  --holidayText: 🎄 Merry Christmas 🎄;
  --holidayURL: https://en.wikipedia.org/wiki/Christmas;
  --holidayHashtag: #Christmas;
  --itemCategory: "item";
  --itemCategoryPlural: "items";

  .intro {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .intro:after {
    position: absolute;
    background-image: url("svg/u1f381.svg"); /* 🎁 */
    width: 60px;
    height: 60px;
    content: " ";
    font-size: 24px;
    transform: translate(-30px, 0px);
    left: 50%;
    top: -5px;
  }

  /* Christmas items - based on old Xmas configuration */
  .food_0 { background-image: url("svg/u1f357.svg"); } /* 🍗 */
  .food_1 { background-image: url("svg/u1f36c.svg"); } /* 🍬 */
  .food_2 { background-image: url("svg/u1f389.svg"); } /* 🎉 */
  .food_3 { background-image: url("svg/u1f95b.svg"); } /* 🥛 */
  .food_4 { background-image: url("svg/u1f342.svg"); } /* 🍂 */
  .food_5 { background-image: url("svg/u1f9f6.svg"); } /* 🧶 */
  .food_6 { background-image: url("svg/u1f36a.svg"); } /* 🍪 */
  .food_7 { background-image: url("svg/u1f9f8.svg"); } /* 🧸 */
  .food_8 { background-image: url("svg/u1f36b.svg"); } /* 🍫 */
  .food_9 { background-image: url("svg/u1f381.svg"); } /* 🎁 */
}

/*
 * Nekograms Day theme (December 16)
 */
html.yearly_12-16 {
  --correctGuessEmoji: 😸;
  --holidayText: 😸 Nekograms Day 😸;
  --holidayURL: https://nekograms.com;
  --holidayHashtag: #Nekograms;
  --itemCategory: "item";
  --itemCategoryPlural: "items";

  background-color: #8ed1c3;
  background-image: url(images/pawprint.png), linear-gradient(to top, #8ed1c3, #b9db9c);
  background-repeat: repeat, no-repeat;
  background-size: 200px auto, cover;

  .intro {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  /* Nekograms theme items */
  .food_0 { background-image: url("svg/custom/bento-min.svg"); } /* Bento */
  .food_1 { background-image: url("svg/custom/bread-min.svg"); } /* Bread */
  .food_2 { background-image: url("svg/custom/bucket-min.svg"); } /* Bucket */
  .food_3 { background-image: url("svg/custom/coffee-min.svg"); } /* Coffee */
  .food_4 { background-image: url("svg/custom/dango-min.svg"); } /* Dango */
  .food_5 { background-image: url("svg/custom/fish-min.svg"); } /* Fish */
  .food_6 { background-image: url("svg/custom/mask-min.svg"); } /* Mask */
  .food_7 { background-image: url("svg/custom/pancake-min.svg"); } /* Pancake */
  .food_8 { background-image: url("svg/custom/potplant-min.svg"); } /* Pot Plant */
  .food_9 { background-image: url("svg/custom/sakura-min.svg"); } /* Sakura */
}

/*
 * World Music Day theme (June 21)
 */
html.yearly_06-21 {
  --correctGuessEmoji: 🎵;
  --holidayText: 🎵 World Music Day 🎵;
  --holidayURL: https://en.wikipedia.org/wiki/F%C3%AAte_de_la_Musique;
  --holidayHashtag: #WorldMusicDay;
  --itemCategory: "instrument";
  --itemCategoryPlural: "instruments";

  .intro {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .intro:after {
    position: absolute;
    background-image: url("svg/u1f3b5.svg"); /* 🎵 */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    left: 50%;
    top: -10px;
  }

  /* Musical instrument themed items - all different instruments */
  .food_0 { background-image: url("svg/u1f3b8.svg"); } /* 🎸 Guitar */
  .food_1 { background-image: url("svg/u1f3b9.svg"); } /* 🎹 Piano */
  .food_2 { background-image: url("svg/u1f3ba.svg"); } /* 🎺 Trumpet */
  .food_3 { background-image: url("svg/u1f3bb.svg"); } /* 🎻 Violin */
  .food_4 { background-image: url("svg/u1f941.svg"); } /* 🥁 Drum */
  .food_5 { background-image: url("svg/u1f3b7.svg"); } /* 🎷 Saxophone */
  .food_6 { background-image: url("svg/u1fa98.svg"); } /* 🪘 Long Drum */
  .food_7 { background-image: url("svg/u1fa97.svg"); } /* 🪗 Accordion */
  .food_8 { background-image: url("svg/u1fa95.svg"); } /* 🪕 Banjo */
  .food_9 { background-image: url("svg/u1f3a4.svg"); } /* 🎤 Microphone */
}

/*
 * International Joke Day theme (July 1)
 */
html.yearly_07-01 {
  --correctGuessEmoji: 😹;
  --holidayText: 😂 International Joke Day 😂;
  --holidayURL: https://en.wikipedia.org/wiki/Joke#International_Joke_Day;
  --holidayHashtag: #InternationalJokeDay;
  --itemCategory: "item";
  --itemCategoryPlural: "items";

  .intro {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  /* Comedy/fun themed items */
  .food_0 { background-image: url("svg/u1f602.svg"); } /* 😂 */
  .food_1 { background-image: url("svg/u1f923.svg"); } /* 🤣 */
  .food_2 { background-image: url("svg/u1f639.svg"); } /* 😹 */
  .food_3 { background-image: url("svg/u1f921.svg"); } /* 🤡 */
  .food_4 { background-image: url("svg/u1f92a.svg"); } /* 🤪 */
  .food_5 { background-image: url("svg/u1f389.svg"); } /* 🎉 */
  .food_6 { background-image: url("svg/u1f3ad.svg"); } /* 🎭 */
  .food_7 { background-image: url("svg/u1f60d.svg"); } /* 😍 */
  .food_8 { background-image: url("svg/u1f388.svg"); } /* 🎈 */
  .food_9 { background-image: url("svg/u1f973.svg"); } /* 🥳 */
}

/*
 * World Chocolate Day theme (July 7)
 */
html.yearly_07-07 {
  --holidayText: 🍫 World Chocolate Day 🍫;
  --holidayURL: https://en.wikipedia.org/wiki/Chocolate;
  --holidayHashtag: #WorldChocolateDay;
  --itemCategory: "treat";
  --itemCategoryPlural: "treats";

  .intro {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .intro:after {
    position: absolute;
    background-image: url("svg/u1f36b.svg"); /* 🍫 */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    left: 60%;
    bottom: -30px;
  }

  /* Chocolate themed items */  .food_0 { background-image: url("svg/u1f36b.svg"); } /* 🍫 */
  .food_1 { background-image: url("svg/u1f36a.svg"); } /* 🍪 */
  .food_2 { background-image: url("svg/u1f36e.svg"); } /* 🍮 */
  .food_3 { background-image: url("svg/u1f382.svg"); } /* 🎂 */
  .food_4 { background-image: url("svg/u1f370.svg"); } /* 🍰 */
  .food_5 { background-image: url("svg/u1f369.svg"); } /* 🍩 */
  .food_6 { background-image: url("svg/u1f368.svg"); } /* 🍨 */
  .food_7 { background-image: url("svg/u1f366.svg"); } /* 🍦 */
  .food_8 { background-image: url("svg/u1f9c1.svg"); } /* 🧁 */
  .food_9 { background-image: url("svg/u1f36c.svg"); } /* 🍬 */
}

/*
 * National Ice Cream Day theme (July 20)
 */
html.yearly_07-20 {
  --holidayText: 🍦 National Ice Cream Day 🍦;
  --holidayURL: https://en.wikipedia.org/wiki/Ice_cream;
  --holidayHashtag: #NationalIceCreamDay;
  --itemCategory: "treat";
  --itemCategoryPlural: "treats";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f366.svg"); /* 🍦 */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    left: 55%;
    bottom: -30px;
  }

  /* Ice cream themed items */
  .food_0 { background-image: url("svg/u1f366.svg"); } /* 🍦 */
  .food_1 { background-image: url("svg/u1f368.svg"); } /* 🍨 */
  .food_2 { background-image: url("svg/u1f967.svg"); } /* 🥧 */
  .food_3 { background-image: url("svg/u1f36d.svg"); } /* 🍭 */
  .food_4 { background-image: url("svg/u1f9c1.svg"); } /* 🧁 */
  .food_5 { background-image: url("svg/u1f36a.svg"); } /* 🍪 */
  .food_6 { background-image: url("svg/u1f370.svg"); } /* 🍰 */
  .food_7 { background-image: url("svg/u1f382.svg"); } /* 🎂 */
  .food_8 { background-image: url("svg/u1f349.svg"); } /* 🍉 */
  .food_9 { background-image: url("svg/u1f353.svg"); } /* 🍓 */
}

/*
 * World Wide Web Day theme (August 1)
 */
html.yearly_08-01 {
  --holidayText: 🌐 World Wide Web Day 🌐;
  --holidayURL: https://en.wikipedia.org/wiki/World_Wide_Web;
  --holidayHashtag: #WorldWideWebDay;
  --itemCategory: "item";
  --itemCategoryPlural: "items";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f310.svg"); /* 🌐 */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    left: 50%;
    top: 0px;
  }

  /* Tech themed items */
  .food_0 { background-image: url("svg/u1f4bb.svg"); } /* 💻 */
  .food_1 { background-image: url("svg/u1f4f1.svg"); } /* 📱 */
  .food_2 { background-image: url("svg/u1f310.svg"); } /* 🌐 */
  .food_3 { background-image: url("svg/u1f4e7.svg"); } /* 📧 */
  .food_4 { background-image: url("svg/u1f5a5.svg"); } /* 🖥️ */
  .food_5 { background-image: url("svg/u1f5b1.svg"); } /* 🖱️ */
  .food_6 { background-image: url("svg/u1f4be.svg"); } /* 💾 */
  .food_7 { background-image: url("svg/u1f4bf.svg"); } /* 💿 */
  .food_8 { background-image: url("svg/u2328.svg"); } /* ⌨️ */
  .food_9 { background-image: url("svg/u1f4e1.svg"); } /* 📡 */
}

/*
 * International Cat Day theme (August 8)
 */
html.yearly_08-08 {
  --correctGuessEmoji: 😻;
  --holidayText: 🐱 International Cat Day 🐱;
  --holidayURL: https://en.wikipedia.org/wiki/International_Cat_Day;
  --holidayHashtag: #InternationalCatDay;
  --itemCategory: "toy";
  --itemCategoryPlural: "toys";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  /* Cat themed items */
  .food_0 { background-image: url("svg/u1f3a3.svg"); } /* 🎣 */
  .food_1 { background-image: url("svg/u1f401.svg"); } /* 🐁 */
  .food_2 { background-image: url("svg/u1f514.svg"); } /* 🔔 */
  .food_3 { background-image: url("svg/u1f4e6.svg"); } /* 📦 */
  .food_4 { background-image: url("svg/u1f420.svg"); } /* 🐠 */
  .food_5 { background-image: url("svg/u1f95b.svg"); } /* 🥛 */
  .food_6 { background-image: url("svg/u1f9f6.svg"); } /* 🧶 */
  .food_7 { background-image: url("svg/u1f9f8.svg"); } /* 🧸 */
  .food_8 { background-image: url("svg/u1f3c0.svg"); } /* 🏀️ */
  .food_9 { background-image: url("svg/u1fa80.svg"); } /* 🪀 */
}

/*
 * National Relaxation Day theme (August 15)
 */
html.yearly_08-15 {
  --holidayText: 🧘 National Relaxation Day 🧘;
  --holidayURL: https://en.wikipedia.org/wiki/National_Relaxation_Day;
  --holidayHashtag: #NationalRelaxationDay;
  --itemCategory: "relaxing item";
  --itemCategoryPlural: "items";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, yawn 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f9d8.svg"); /* 🧘 */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    left: 50%;
    top: 0px;
  }

  /* Relaxation themed items */
  .food_0 { background-image: url("svg/u1f9d8.svg"); } /* 🧘 */
  .food_1 { background-image: url("svg/u1f6c0.svg"); } /* 🛀 */
  .food_2 { background-image: url("svg/u1f375.svg"); } /* 🍵 */
  .food_3 { background-image: url("svg/u1f4d6.svg"); } /* 📖 */
  .food_4 { background-image: url("svg/u1f33f.svg"); } /* 🌿 */
  .food_5 { background-image: url("svg/u1f3d6.svg"); } /* 🏖️ */
  .food_6 { background-image: url("svg/u1f31e.svg"); } /* 🌞 */
  .food_7 { background-image: url("svg/u1f98b.svg"); } /* 🦋 */
  .food_8 { background-image: url("svg/u1f3a8.svg"); } /* 🎨 */
  .food_9 { background-image: url("svg/u1f308.svg"); } /* 🌈 */
}

/*
 * World Humanitarian Day theme (August 19)
 */
html.yearly_08-19 {
  --holidayText: 🤝 World Humanitarian Day 🤝;
  --holidayURL: https://en.wikipedia.org/wiki/World_Humanitarian_Day;
  --holidayHashtag: #WorldHumanitarianDay;
  --itemCategory: "item";
  --itemCategoryPlural: "items";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  /* Humanitarian themed items */
  .food_0 { background-image: url("svg/u1f91d.svg"); } /* 🤝 */
  .food_1 { background-image: url("svg/u2764.svg"); } /* ❤️ */
  .food_2 { background-image: url("svg/u1f30d.svg"); } /* 🌍 */
  .food_3 { background-image: url("svg/u1f3e0.svg"); } /* 🏠 */
  .food_4 { background-image: url("svg/u1f35e.svg"); } /* 🍞 */
  .food_5 { background-image: url("svg/u1f4a7.svg"); } /* 💧 */
  .food_6 { background-image: url("svg/u1f3e5.svg"); } /* 🏥 */
  .food_7 { background-image: url("svg/u1f393.svg"); } /* 🎓 */
  .food_8 { background-image: url("svg/u1f54a.svg"); } /* 🕊️ */
  .food_9 { background-image: url("svg/u1f64f.svg"); } /* 🙏 */
}

/*
 * World Letter Writing Day theme (September 1)
 */
html.yearly_09-01 {
  --holidayText: ✉️ World Letter Writing Day ✉️;
  --holidayURL: https://en.wikipedia.org/wiki/Letter_(message);
  --holidayHashtag: #WorldLetterWritingDay;
  --itemCategory: "writing item";
  --itemCategoryPlural: "writing items";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u2709.svg"); /* ✉️ */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    left: 50%;
    top: 0px;
  }

  /* Writing themed items */
  .food_0 { background-image: url("svg/u2709.svg"); } /* ✉️ */
  .food_1 { background-image: url("svg/u1f4dd.svg"); } /* 📝 */
  .food_2 { background-image: url("svg/u1f4dc.svg"); } /* 📜 */
  .food_3 { background-image: url("svg/u270f.svg"); } /* ✏️ */
  .food_4 { background-image: url("svg/u1f58a.svg"); } /* 🖊️ */
  .food_5 { background-image: url("svg/u1f4c4.svg"); } /* 📄 */
  .food_6 { background-image: url("svg/u1f4d6.svg"); } /* 📖 */
  .food_7 { background-image: url("svg/u1f58b.svg"); } /* 🖋️ */
  .food_8 { background-image: url("svg/u2712.svg"); } /* ✒️ */
  .food_9 { background-image: url("svg/u1f58d.svg"); } /* 🖍️ */
}

/*
 * Read a Book Day theme (September 6)
 */
html.yearly_09-06 {
  --correctGuessEmoji: 📕;
  --holidayText: 📚 Read a Book Day 📚;
  --holidayURL: https://en.wikipedia.org/wiki/Reading;
  --holidayHashtag: #ReadABookDay;
  --itemCategory: "book";
  --itemCategoryPlural: "books";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f4d6.svg"); /* 📖 */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    left: 50%;
    bottom: -30px;
  }

  /* Read a Book Day items */
  .food_0 { background-image: url("svg/u1f4d6.svg"); } /* 📖 */
  .food_1 { background-image: url("svg/u1f4da.svg"); } /* 📚 */
  .food_2 { background-image: url("svg/u1f4d3.svg"); } /* 📓 */
  .food_3 { background-image: url("svg/u1f4d5.svg"); } /* 📕 */
  .food_4 { background-image: url("svg/u1f4f0.svg"); } /* 📰️ */
  .food_5 { background-image: url("svg/u1f516.svg"); } /* 🔖 */
  .food_6 { background-image: url("svg/u1f453.svg"); } /* 👓 */
  .food_7 { background-image: url("svg/u1f4d4.svg"); } /* 📔 */
  .food_8 { background-image: url("svg/u1f4c3.svg"); } /* 📃 */
  .food_9 { background-image: url("svg/u1f4dc.svg"); } /* 📜 */
}

/*
 * National Video Games Day theme (September 12)
 */
html.yearly_09-12 {
  --correctGuessEmoji: 🎮;
  --holidayText: 🎮 National Video Games Day 🎮;
  --holidayURL: https://en.wikipedia.org/wiki/Video_game;
  --holidayHashtag: #NationalVideoGamesDay;
  --itemCategory: "game";
  --itemCategoryPlural: "games";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f3ae.svg"); /* 🎮 */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    left: 50%;
    bottom: -30px;
  }

  /* Gaming themed items */
  .food_0 { background-image: url("svg/u1f3ae.svg"); } /* 🎮 */
  .food_1 { background-image: url("svg/u1f4bb.svg"); } /* 💻 */
  .food_2 { background-image: url("svg/u1f4f1.svg"); } /* 📱 */
  .food_3 { background-image: url("svg/u1f3af.svg"); } /* 🎯 */
  .food_4 { background-image: url("svg/u1f3c6.svg"); } /* 🏆 */
  .food_5 { background-image: url("svg/u1f451.svg"); } /* 👑 */
  .food_6 { background-image: url("svg/u1f680.svg"); } /* 🚀 */
  .food_7 { background-image: url("svg/u1f47e.svg"); } /* 👾 */
  .food_8 { background-image: url("svg/u2728.svg"); } /* ✨ */
  .food_9 { background-image: url("svg/u1f4a5.svg"); } /* 💥 */
}


/*
 * International Day of Peace (September 21)
 */
html.yearly_09-21 {
  --correctGuessEmoji: ☮️;
  --holidayText: 🕊️ International Day of Peace 🕊️;
  --holidayURL: https://en.wikipedia.org/wiki/International_Day_of_Peace;
  --holidayHashtag: #InternationalDayOfPeace;
  --itemCategory: "symbol";
  --itemCategoryPlural: "symbols";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f54a.svg"); /* 🕊️ Dove */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-85px, -170px);
    left: 55%;
    bottom: -30px;
  }

  /* Peace symbols */
  .food_0 { background-image: url("svg/u262e.svg"); }  /* ☮ Peace symbol */
  .food_1 { background-image: url("svg/u1f54a.svg"); } /* 🕊 Dove */
  .food_2 { background-image: url("svg/u1f91d.svg"); } /* 🤝 Handshake */
  .food_3 { background-image: url("svg/u1f33f.svg"); } /* 🌿 Herb (olive branch) */
  .food_4 { background-image: url("svg/u1f49a.svg"); } /* 💚 Green Heart */
  .food_5 { background-image: url("svg/u1f308.svg"); } /* 🌈 Rainbow */
  .food_6 { background-image: url("svg/u1f56f.svg"); } /* 🕯 Candle */
  .food_7 { background-image: url("svg/u270c.svg"); }  /* ✌ Victory Hand */
  .food_8 { background-image: url("svg/u1f932.svg"); } /* 🤲 Palms Up Together */
  .food_9 { background-image: url("svg/u1f64f.svg"); } /* 🙏 Folded Hands */
}

/*
 * World Tourism Day (September 27)
 */
html.yearly_09-27 {
  --correctGuessEmoji: 📷;
  --holidayText: 🌍 World Tourism Day 🌍;
  --holidayURL: https://en.wikipedia.org/wiki/World_Tourism_Day;
  --holidayHashtag: #WorldTourismDay;
  --itemCategory: "holiday";
  --itemCategoryPlural: "holidays";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f4f7.svg"); /* Camera */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -20px);
    bottom: -30px;
  }

  /* World Tourism Day (September 27) */
  .food_0 { background-image: url("svg/u1f3d5.svg"); } /* 🏕️ Camping */
  .food_1 { background-image: url("svg/u1f3d6.svg"); } /* 🏖️ Beach with Umbrella */
  .food_2 { background-image: url("svg/u26f0.svg"); } /* ⛰️ Mountain */
  .food_3 { background-image: url("svg/u1f3db.svg"); } /* 🏛️ Classical Building */
  .food_4 { background-image: url("svg/u1f3df.svg"); } /* 🏟️ Stadium */
  .food_5 { background-image: url("svg/u1f3f0.svg"); } /* 🏰 Castle */
  .food_6 { background-image: url("svg/u1f3d9.svg"); } /* 🏙️ Cityscape */
  .food_7 { background-image: url("svg/u1f3a2.svg"); } /* 🎢 Roller Coaster */
  .food_8 { background-image: url("svg/u1f69e.svg"); } /* 🚞 Mountain Railway */
  .food_9 { background-image: url("svg/u1f6f3.svg"); } /* 🛳️ Passenger Ship */
}

/*
 * World Animal Day (October 4)
 */
html.yearly_10-04 {
  --holidayText: 🐾 World Animal Day 🐾;
  --holidayURL: https://en.wikipedia.org/wiki/World_Animal_Day;
  --holidayHashtag: #WorldAnimalDay;
  --itemCategory: "animal";
  --itemCategoryPlural: "animals";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }


  /* Animal faces */
  .food_0 { background-image: url("svg/u1f436.svg"); } /* 🐶 Dog */
  .food_1 { background-image: url("svg/u1f434.svg"); } /* � Horse */
  .food_2 { background-image: url("svg/u1f430.svg"); } /* 🐰 Rabbit */
  .food_3 { background-image: url("svg/u1f43c.svg"); } /* 🐼 Panda */
  .food_4 { background-image: url("svg/u1f42f.svg"); } /* 🐯 Tiger */
  .food_5 { background-image: url("svg/u1f981.svg"); } /* 🦁 Lion */
  .food_6 { background-image: url("svg/u1f98a.svg"); } /* 🦊 Fox */
  .food_7 { background-image: url("svg/u1f43b.svg"); } /* 🐻 Bear */
  .food_8 { background-image: url("svg/u1f435.svg"); } /* 🐵 Monkey */
  .food_9 { background-image: url("svg/u1f418.svg"); } /* � Elephant */
}

/*
 * World Mental Health Day (October 10)
 */
html.yearly_10-10 {
  --holidayText: 💚 World Mental Health Day 💚;
  --holidayURL: https://en.wikipedia.org/wiki/World_Mental_Health_Day;
  --holidayHashtag: #WorldMentalHealthDay;
  --itemCategory: "wellness item";
  --itemCategoryPlural: "wellness items";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f4ad.svg"); /* 💭 Thought Balloon */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -160px);
    left: 55%;
    bottom: -30px;
  }

  /* Wellness and mental health icons */
  .food_0 { background-image: url("svg/u1f33b.svg"); } /* 🌻 Sunflower */
  .food_1 { background-image: url("svg/u1f49a.svg"); } /* 💚 Green Heart */
  .food_2 { background-image: url("svg/u1f9d8.svg"); } /* 🧘 Person in Lotus Position */
  .food_3 { background-image: url("svg/u1f4ad.svg"); } /* 💭 Thought Balloon */
  .food_4 { background-image: url("svg/u1f9e9.svg"); } /* 🧩 Puzzle Piece */
  .food_5 { background-image: url("svg/u1f331.svg"); } /* 🌱 Seedling */
  .food_6 { background-image: url("svg/u1f305.svg"); } /* 🌅 Sunrise */
  .food_7 { background-image: url("svg/u1f343.svg"); } /* 🍃 Leaf Fluttering in Wind */
  .food_8 { background-image: url("svg/u1f917.svg"); } /* 🤗 Hugging Face */
  .food_9 { background-image: url("svg/u1f388.svg"); } /* 🎈 Balloon */
}

/*
 * World Food Day (October 16)
 */
html.yearly_10-16 {
    --correctGuessEmoji: 🍽️;
  --holidayText: 🍽️ World Food Day 🍽️;
  --holidayURL: https://en.wikipedia.org/wiki/World_Food_Day;
  --holidayHashtag: #WorldFoodDay;
  --itemCategory: "food";
  --itemCategoryPlural: "foods";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f957.svg"); /* 🥗 Green Salad */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    left: 55%;
    bottom: -30px;
  }

  /* Global food items */
  .food_0 { background-image: url("svg/u1f34e.svg"); } /* 🍎 Red Apple */
  .food_1 { background-image: url("svg/u1f956.svg"); } /* 🥖 Baguette Bread */
  .food_2 { background-image: url("svg/u1f957.svg"); } /* 🥗 Green Salad */
  .food_3 { background-image: url("svg/u1f35a.svg"); } /* 🍚 Cooked Rice */
  .food_4 { background-image: url("svg/u1f372.svg"); } /* 🍲 Pot of Food */
  .food_5 { background-image: url("svg/u1f35e.svg"); } /* 🍞 Bread */
  .food_6 { background-image: url("svg/u1f9c0.svg"); } /* 🧀 Cheese Wedge */
  .food_7 { background-image: url("svg/u1f33d.svg"); } /* 🌽 Ear of Corn */
  .food_8 { background-image: url("svg/u1f347.svg"); } /* 🍇 Grapes */
  .food_9 { background-image: url("svg/u1f357.svg"); } /* 🍗 Poultry Leg */
}

/*
 * STEM Day (November 8)
 */
html.yearly_11-08 {
  --correctGuessEmoji: 🔬;
  --holidayText: 🔬 STEM Day 🔬;
  --holidayURL: https://en.wikipedia.org/wiki/Science,_technology,_engineering,_and_mathematics;
  --holidayHashtag: #STEMDay;
  --itemCategory: "STEM item";
  --itemCategoryPlural: "STEM items";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f52c.svg"); /* 🔬 Microscope */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    bottom: -30px;
  }

  /* STEM items */
  .food_0 { background-image: url("svg/u1f52c.svg"); } /* 🔬 Microscope */
  .food_1 { background-image: url("svg/u1f9ea.svg"); } /* 🧪 Test Tube */
  .food_2 { background-image: url("svg/u1f4bb.svg"); } /* 💻 Laptop */
  .food_3 { background-image: url("svg/u2699.svg"); } /* ⚙️ Gear */
  .food_4 { background-image: url("svg/u1f680.svg"); } /* 🚀 Rocket */
  .food_5 { background-image: url("svg/u1f4d0.svg"); } /* 📐 Triangular Ruler */
  .food_6 { background-image: url("svg/u1f4a1.svg"); } /* 💡 Light Bulb */
  .food_7 { background-image: url("svg/u1f9ec.svg"); } /* 🧬 DNA */
  .food_8 { background-image: url("svg/u1f4e1.svg"); } /* 📡 Satellite Antenna */
  .food_9 { background-image: url("svg/u1f4c8.svg"); } /* 📈 Chart Increasing */
}

/*
 * World Kindness Day (November 13)
 */
html.yearly_11-13 {
  --holidayText: 💕 World Kindness Day 💕;
  --holidayURL: https://en.wikipedia.org/wiki/World_Kindness_Day;
  --holidayHashtag: #WKD;
  --itemCategory: "kindness symbol";
  --itemCategoryPlural: "kindness symbols";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f49d.svg"); /* 💝 Heart with Ribbon */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    bottom: -30px;
  }

  /* Kindness symbols */
  .food_0 { background-image: url("svg/u2764.svg"); } /* ❤️ Red Heart */
  .food_1 { background-image: url("svg/u1f917.svg"); } /* 🤗 Hugging Face */
  .food_2 { background-image: url("svg/u1f49d.svg"); } /* 💝 Heart with Ribbon */
  .food_3 { background-image: url("svg/u1f91d.svg"); } /* 🤝 Handshake */
  .food_4 { background-image: url("svg/u1f339.svg"); } /* 🌹 Rose */
  .food_5 { background-image: url("svg/u1f381.svg"); } /* 🎁 Wrapped Gift */
  .food_6 { background-image: url("svg/u1f60a.svg"); } /* 😊 Smiling Face with Smiling Eyes */
  .food_7 { background-image: url("svg/u1f64f.svg"); } /* 🙏 Folded Hands */
  .food_8 { background-image: url("svg/u2600.svg"); } /* ☀️ Sun */
  .food_9 { background-image: url("svg/u1f98b.svg"); } /* 🦋 Butterfly */
}

/*
 * Universal Children's Day (November 20)
 */
html.yearly_11-20 {
  --holidayText:🧒 Universal Children`s Day 👶;
  --holidayURL: https://en.wikipedia.org/wiki/Universal_Children%27s_Day;
  --holidayHashtag: #UNChildrensDay;
  --itemCategory: "childhood item";
  --itemCategoryPlural: "childhood items";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f9f8.svg"); /* 🧸 Teddy Bear */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    bottom: -30px;
  }

  /* Childhood items */
  .food_0 { background-image: url("svg/u1f9f8.svg"); } /* 🧸 Teddy Bear */
  .food_1 { background-image: url("svg/u1f381.svg"); } /* 🎁 Wrapped Gift */
  .food_2 { background-image: url("svg/u1f388.svg"); } /* 🎈 Balloon */
  .food_3 { background-image: url("svg/u1f3a0.svg"); } /* 🎠 Carousel Horse */
  .food_4 { background-image: url("svg/u1f4da.svg"); } /* 📚 Books */
  .food_5 { background-image: url("svg/u1f3c0.svg"); } /* 🏀 Basketball */
  .food_6 { background-image: url("svg/u1f36d.svg"); } /* 🍭 Lollipop */
  .food_7 { background-image: url("svg/u1f3a8.svg"); } /* 🎨 Artist Palette */
  .food_8 { background-image: url("svg/u1f6f4.svg"); } /* 🛴 Kick Scooter */
  .food_9 { background-image: url("svg/u1f389.svg"); } /* 🎉 Party Popper */
}


/*
 * International Hot and Spicy Food Day (January 16)
 */
html.yearly_01-16 {
  --correctGuessEmoji: 🥵;
  --holidayText: 🌶️ International Hot and Spicy Food Day 🌶️;
  --holidayURL: https://en.wikipedia.org/wiki/Spice;
  --holidayHashtag: #InternationalHotandSpicyFoodDay;
  --itemCategory: "spicy food";
  --itemCategoryPlural: "spicy foods";

  .intro {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, weary 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f525.svg"); /* fire emoji */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -140px);
    bottom: -30px;
  }

  /* Hot and spicy foods */
  .food_0 { background-image: url("svg/u1f336.svg"); } /* 🌶️ Hot Pepper */
  .food_1 { background-image: url("svg/u1f32e.svg"); } /* 🌮 Taco */
  .food_2 { background-image: url("svg/u1f35c.svg"); } /* 🍜 Steaming Bowl */
  .food_3 { background-image: url("svg/u1f372.svg"); } /* 🍲 Pot of Food */
  .food_4 { background-image: url("svg/u1f624.svg"); } /* 😤 Face with Steam From Nose */
  .food_5 { background-image: url("svg/u1f959.svg"); } /* � Stuffed Flatbread */
  .food_6 { background-image: url("svg/u1f35b.svg"); } /* 🍛 Curry Rice */
  .food_7 { background-image: url("svg/u1f525.svg"); } /* 🔥 Fire */
  .food_8 { background-image: url("svg/u1f975.svg"); } /* 🥵 Hot Face */
  .food_9 { background-image: url("svg/u1f9c4.svg"); } /* 🧄 Garlic */
}

/*
 * International Education Day (January 24)
 */
html.yearly_01-24 {
  --holidayText: 📚 International Education Day 📚;
  --holidayURL: https://en.wikipedia.org/wiki/International_Day_of_Education;
  --holidayHashtag: #InternationalDayofEducation;
  --itemCategory: "educational item";
  --itemCategoryPlural: "educational items";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f4da.svg"); /* 📚 Books */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    bottom: -30px;
  }

  /* Educational items */
  .food_0 { background-image: url("svg/u1f4da.svg"); } /* 📚 Books */
  .food_1 { background-image: url("svg/u1f393.svg"); } /* 🎓 Graduation Cap */
  .food_2 { background-image: url("svg/u270f.svg"); } /* ✏️ Pencil */
  .food_3 { background-image: url("svg/u1f4d0.svg"); } /* 📐 Triangular Ruler */
  .food_4 { background-image: url("svg/u1f310.svg"); } /* 🌐 Globe with Meridians */
  .food_5 { background-image: url("svg/u1f4a1.svg"); } /* 💡 Light Bulb */
  .food_6 { background-image: url("svg/u1f52c.svg"); } /* 🔬 Microscope */
  .food_7 { background-image: url("svg/u1f4bb.svg"); } /* 💻 Laptop */
  .food_8 { background-image: url("svg/u1f3eb.svg"); } /* 🏫 School */
  .food_9 { background-image: url("svg/u1f4d6.svg"); } /* 📖 Open Book */
}

/*
 * World Cancer Day (February 4)
 */
html.yearly_02-04 {
  --holidayText: 🎗️ World Cancer Day 🎗️;
  --holidayURL: https://en.wikipedia.org/wiki/World_Cancer_Day;
  --holidayHashtag: #WorldCancerDay;
  --itemCategory: "awareness symbol";
  --itemCategoryPlural: "awareness symbols";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f397.svg"); /* 🎗️ Reminder Ribbon */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    bottom: -30px;
  }

  /* Cancer awareness symbols */
  .food_0 { background-image: url("svg/u1f397.svg"); } /* 🎗️ Reminder Ribbon */
  .food_1 { background-image: url("svg/u2764.svg"); } /* ❤️ Red Heart */
  .food_2 { background-image: url("svg/u1f4aa.svg"); } /* 💪 Flexed Biceps */
  .food_3 { background-image: url("svg/u1f31f.svg"); } /* 🌟 Glowing Star */
  .food_4 { background-image: url("svg/u1f917.svg"); } /* 🤗 Hugging Face */
  .food_5 { background-image: url("svg/u1f331.svg"); } /* 🌱 Seedling */
  .food_6 { background-image: url("svg/u2600.svg"); } /* ☀️ Sun */
  .food_7 { background-image: url("svg/u1f64f.svg"); } /* 🙏 Folded Hands */
  .food_8 { background-image: url("svg/u1f3c6.svg"); } /* 🏆 Trophy */
  .food_9 { background-image: url("svg/u1f338.svg"); } /* 🌸 Cherry Blossom */
}

/*
 * International Day of Women and Girls in Science (February 11)
 */
html.yearly_02-11 {
  --holidayText: 👩‍🔬 International Day of Women and Girls in Science 👩‍🔬;
  --holidayURL: https://en.wikipedia.org/wiki/International_Day_of_Women_and_Girls_in_Science;
  --holidayHashtag: #WomenInScience;
  --itemCategory: "science item";
  --itemCategoryPlural: "science items";

  .logo {
    margin-top: 48px;
    height: 160px;
    background-image: url("svg/u1f431.svg");
    animation: nom 2s infinite, grin 3s infinite;
    animation-timing-function: ease, steps(1);
    filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.2));
  }

  .logo:after {
    position: absolute;
    background-image: url("svg/u1f9ea.svg"); /* 👩‍🔬 Woman Scientist */
    width: 50px;
    height: 50px;
    content: " ";
    transform: translate(-25px, -10px);
    bottom: -30px;
  }

  /* Science items */
  .food_0 { background-image: url("svg/u1f469_200d_1f52c.svg"); } /* 👩‍🔬 Woman Scientist */
  .food_1 { background-image: url("svg/u1f52c.svg"); } /* 🔬 Microscope */
  .food_2 { background-image: url("svg/u1f9ea.svg"); } /* 🧪 Test Tube */
  .food_3 { background-image: url("svg/u1f9ec.svg"); } /* 🧬 DNA */
  .food_4 { background-image: url("svg/u2696.svg"); } /* ⚖️ Balance Scale */
  .food_5 { background-image: url("svg/u1f9eb.svg"); } /* 🧫 Petri Dish */
  .food_6 { background-image: url("svg/u1f4a1.svg"); } /* 💡 Light Bulb */
  .food_7 { background-image: url("svg/u1f680.svg"); } /* 🚀 Rocket */
  .food_8 { background-image: url("svg/u1f4c8.svg"); } /* 📈 Chart Increasing */
  .food_9 { background-image: url("svg/u2728.svg"); } /* ✨ Sparkles */
}

/* For more holidays see: https://www.brandwatch.com/blog/social-media-holiday-calendar/ */