/* 0.4.5f */

:root {
	--metaThemeColor: #5cbde1;
	--metaThemeColorDarkMode: undefined;
	--metaBackgroundColor: undefined;
	--siteBackgroundColor: undefined;
	accent-color: var(--metaThemeColor);
}

html, body {
	scrollbar-3dlight-color: #5cbde1;
	scrollbar-arrow-color: #5cbde1;
	scrollbar-base-color: #5cbde1;
	scrollbar-darkshadow-color: #5cbde1;
	scrollbar-shadow-color: #5cbde1;
	-ms-scrollbar-3dlight-color: #5cbde1;
	-ms-scrollbar-arrow-color: #5cbde1;
	-ms-scrollbar-base-color: #5cbde1;
	-ms-scrollbar-darkshadow-color: #5cbde1;
	-ms-scrollbar-shadow-color: #5cbde1;
}

::-webkit-scrollbar-button {
	background-color: #5cbde1;
}

::-webkit-scrollbar-thumb {
	background-color: #5cbde1;
}

::-webkit-scrollbar-corner {
	background-color: #5cbde1;
}

@font-face {
  font-family: "Blasto Distort";
  src: url('/fonts/BlastoDistort.woff2') format('woff2'),
        url('/fonts/BlastoDistort.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Boostart";
  src: url('/fonts/Boostart.woff2') format('woff2'),
        url('/fonts/Boostart.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archer Medium";
  src: url('/fonts/Archer-Medium.woff2') format('woff2'),
        url('/fonts/Archer-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /*
	  --valentinesBorder: #ffc0cb;
    --valentinesBackground: #cd5c5c;

    --MPRed: #9f2e25;
    --MPYellow: #dbb347;
    --MPGreen: #009a65;
    --MPBlack: #000000;

    --MPEggShell: #edeaddff;
    --MPWhite: #f9f9f7ff;
    --MPRed: #9f2e25ff;
    --MPYellow: #dbb345ff;
    --MPGreen: #019866ff;
    --MPBlack: #231f20ff;

    --lightmodeBackgroundColor: var(--MPYellow);
    --BGColor: var(--MPRed);
    */

    --MDWhite: #ffffff;
    --MDDarkBlue: rgb(30, 51, 127);

    --darkTextColor: var(--MDDarkBlue);
    --lightTextColor: var(--MDWhite);
}

body {
  font-family: "Archer Medium", sans-serif, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, Lucida Sans, Lucida Grande, Lucida Sans Unicode, HelveticaNeue-Light, HelveticaNeue, Helvetica, Arial, Verdana, sans-serif, caption, noto, 'Segoe UI Emoji', 'Segoe UI Symbol', 'emoji', 'Apple Color Emoji','EmojiSymbols', "Apple Symbols", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", 'Symbola';
}

.home-title, .NoticeHeadline, #top-note, #our-menu summary, section#food-menu details#menu-details summary {
  font-family: "Blasto Distort", sans-serif;
}

#logo > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: inherit;
  max-width: 100%;
}

@keyframes entry {
    from {
      transform: scale3d(0,0,0) translate3d(180%, 0, 0);
    }
  
    to {
      transform: scale3d(1.3,1.3,1.3) translate3d(0, 0, 0);
    }
}

@keyframes grow {
  from {
    transform: scale3d(1.3,1.3,1.3);
  }

  to {
    transform: scale3d(1.5, 1.5, 1.5);
  }
}

@keyframes mini-grow {
  from {
    transform: scale3d(1,1,1);
  }

  to {
    transform: scale3d(1.2, 1.2, 1.2);
  }
}

::backdrop {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%), url('/images/blue-pizza-pattern.svg');
}

#our-menu h2 {
  font-family: "Boostart", sans-serif;
  font-weight: normal;
  font-size: 4em;
  margin: 0;
}

footer .info-box h5 {
  font-family: "Boostart", sans-serif;
  font-weight: normal;
  font-size: 5em;
  line-height: normal;
  margin: 0;
}

.home-subtitle {
  font-family: "Boostart", sans-serif;
  font-weight: normal;
  font-size: 4em;
  line-height: 1.2em;
  margin-top: -0.5em;
  margin-bottom: -0.5em;
  text-transform: none;
  letter-spacing: normal;
}

@supports ( (--a: 0)) {

  header #menu-post, #fake-nav {
    color: #f6ecdd;
    background-color: var(--metaThemeColor);
    border-image-slice: 27 27 27 27;
    border-image-width: 20px 0 20px 0;
    border-image-outset: 1em 0 1em 0;
    margin: 0;
    margin-top: 20px;
    border-image-repeat: stretch stretch;
    border-color: var(--metaThemeColor);
    border-image-source: url(/images/blue-borders.svg);
    border-style: solid;
    border-width: 2px;
    width: calc(100% - 4px);
    width: 100%;
  }

  .info-box {
    color: #f6ecdd;
    background-color: var(--metaThemeColor);
    border-image-slice: 27 27 27 27;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    border-image-repeat: stretch stretch;
    border-style: solid;
    border-color: var(--metaThemeColor);
    border-image-source: url(/images/blue-borders.svg);
  }

  .info-box a {
    color: currentColor;
    border-color: currentcolor;
  }

  .info-box .button {
    color: currentColor;
    border-color: currentcolor;
    background-color: var(--metaThemeColor);
  }

  span.widget-background b, .menu-bg, .menu-section, #fake-nav {
    background-image: url('/images/blue-pizza-pattern.svg');
    opacity: 1;
  }

  header #top-note.button[data-event="yelp-rank"] {
      color: #fff;
      border-color: currentcolor;
      //font-size: 18px;
      
      background-color: #ab3826;
      background-color: #cd442e;
      background-color: #d6ad0a;
      
      background-image: url('https://carminespiehouse.com/images/chicago_pie_16_clip.avif');
      background-position: 0px 0px;
      background-size: cover;
      background-repeat: no-repeat;

      overflow: hidden;

      max-width: 90%;
  }

  header #top-note.button[data-event="yelp-rank"] > span {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 24px;
    margin: -10px -24px;
    text-align: center;
    background-color: color-mix(in srgb, var(--metaThemeColor) 50%,transparent);
    border-radius: 4px;
  }

  header #top-note.button[data-event="yelp-rank"]:hover, header #top-note.button[data-event="yelp-rank"]:focus {
    background-color: var(--metaThemeColor);
  }

  header #top-note.button[data-event="yelp-rank"]:hover > span, header #top-note.button[data-event="yelp-rank"]:focus > span {
    text-decoration: underline;
    background-color: color-mix(in srgb, var(--metaThemeColor) 75%,transparent);
  }

}

@media (min-width: 992px) {

}

@media not (prefers-reduced-motion: reduce) {

  header #top-note.button[data-event="yelp-rank"] {
    animation-name: entry;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-direction: alternate;
  }

  header #top-note.button[data-event="yelp-rank"] > span {
    animation-name: mini-grow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @media only screen and (min-width: 480px) {
    header #top-note.button[data-event="yelp-rank"] {
      animation-name: entry, grow;
      animation-duration: 1s;
      animation-iteration-count: 1, infinite;
      animation-direction: alternate;
    }

    header #top-note.button[data-event="yelp-rank"] > span {
      animation-name: none;
    }
  }

};