/* 0.65e */

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

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

::-webkit-scrollbar-button {
	background-color: #231F20;
}

::-webkit-scrollbar-thumb {
	background-color: #231F20;
}

::-webkit-scrollbar-corner {
	background-color: #231F20;
}

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

@font-face {
    font-family: 'Steelfish Rg';
    src: url('/fonts/SteelfishRg-Bold.woff2') format('woff2'),
        url('/fonts/SteelfishRg-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

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

:root {
	--sonoRed: #db283d; /* old = #ed1c24; */
    --sonoBlack: #231F20;
    --salmon: #e48c70;
    --darkmodeBackgroundColor: var(--sonoBlack);
    --darkTextColor: var(--sonoBlack);
    --white: #fff;
    --black: #000;
}

html {
    background-color: var(--metaThemeColor);
}

body {
    color: var(--lightTextColor);
    background-color: var(--darkmodeBackgroundColor);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-family: "Brandon Grotesque", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

a {
    color: var(--salmon);
}

#logo > svg > g {
    fill: #000;
    fill: var(--white);
}

section .button, body > footer .button {
    color: var(--lightTextColor);
    background-color: var(--darkmodeBackgroundColor);social
    border-color: rgba(255, 255, 255, 0.5);
}

.button:hover, .button:focus, #menu-post .button:hover, #menu-post .button:focus {
    border-color: rgba(255, 255, 255, 0.5);
}

header #top-nav, .js header nav #top-nav {
    width: 100%;
    padding-top: 2px;
    padding-bottom: 4px;
    
    background-size: 100% 100%;
    background-size: max(3440px, calc(100% + 1px)) calc(100% + 1px);
    background-position: -1px -1px;
    background-repeat: repeat;
}

header > nav > #top-nav > li > a {
    background-color: color-mix(in srgb, var(--black) 70%, transparent);
}

header > nav > #top-nav > li > a:hover, header > nav > #top-nav > li > a:focus {
    color: var(--darkTextColor);
    border-color: color-mix(in srgb, var(--metaThemeColor) 50%, transparent);

    background-image: linear-gradient(45deg, color-mix(in srgb, var(--metaThemeColor) 70%, #fff), rgba(255, 255, 255, 0.8));
    background-color: color-mix(in srgb, var(--lightTextColor) 70%, transparent);

    background-image: linear-gradient(45deg, color-mix(in srgb, var(--metaThemeColor) 70%, var(--salmon)), rgba(255, 255, 255, 0.8));
}

header #menu-post {
    background-color: color-mix(in srgb, var(--metaThemeColor) 50%, transparent);
}

.social-links > li[class^="social-"] > a {
    color: var(--salmon);
    background-color: var(--metaThemeColor);
    border-color: var(--metaThemeColor);
}

main details {
    color: var(--lightTextColor);
	background-color: transparent;
}

main details.menu-section {
    background-color: color-mix(in srgb, var(--darkmodeBackgroundColor) 75%, transparent);
}

main details summary {
	color: var(--lightTextColor);
	background-color: var(--darkmodeBackgroundColor);
    background-color: color-mix(in srgb, var(--darkmodeBackgroundColor) 75%, transparent);
}

main details summary:hover, main details summary:focus {
	color: var(--lightTextColor);
	background-color: var(--salmon);
    background-color: color-mix(in srgb, var(--salmon) 50%, var(--darkTextColor));
}

main details .content .menu-post-desc {
    color: var(--lightTextColor);
}

section#food-menu details#menu-details .widget-background {
    opacity: 0.95;
    background-color: var(--darkmodeBackgroundColor);
    background-image: url("/images/marble.jpg"), url("/images/floral_trans.webp");
    background-size: contain, contain;
    background-position: -1px -1px, center;
    background-repeat: repeat, no-repeat;
    display: none;
}

.widget-background, .widget-background:not([style],[src]), body > header {
    background-color: color-mix(in srgb, var(--metaThemeColor) 50%, transparent);

    background-image: url("/images/marble.jpg");
    background-size: 100% 100%;
    background-size: max(3440px, calc(100% + 1px)) calc(100% + 1px);
    background-position: -1px -1px;
    background-repeat: repeat;
}

[data-section="about"] .widget-background:not([style],[src]) {
	background-color: color-mix(in srgb, var(--metaThemeColor) 50%, transparent);
}

.widget-background:not([style],[src]) {
	background-color: color-mix(in srgb, var(--metaThemeColor) 50%, transparent);
}

.widget-background > b, #img-slider {
    opacity: 0.5;
    background-color: var(--metaThemeColor);
}

.widget-background > b, #img-slider, .mailing-list-box {
    background-image: url("/images/floral_trans.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

[data-section="experience"] > .alignr > .col > .mediabox {
    height: 400px;
    object-position: 100% 100%;
    aspect-ratio: 1 / 1;
}

body > header, #img-slider {
    background-attachment: fixed;
}

.home-title, .parallax-darker .home-title, .NoticeHeadline, .info-box h5, .mailing-list-box h2, #our-menu h2, main details summary {
    color: var(--salmon);
    font-family: "Steelfish Rg", "Brandon Grotesque", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 0.1em;
    margin-bottom: 0;
}

.home-title::after {
    content: '';
    width: 200%;
    max-width: 100vw;
    height: 5px;
    background-color: currentColor;
    bottom: 0.1em;
    left: -50%;
    position: absolute;
    background-color: #dedede;
    height: 0.4em;
    z-index: -1;
    opacity: 0.8;
    background-image: linear-gradient(to right, #dedede, rgba(0, 0, 0, 0.5) 90%);
    opacity: 0;
}

.home-title::before {
    display: none;
}

.home-subtitle {
    font-family: 'Coasty Branch', "Brandon Grotesque", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-transform: none;
    font-weight: normal;
    font-size: 2em;
    line-height: 0;
}

.mailing-list-box {
    display: block;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--darkmodeBackgroundColor) 75%, transparent);
}

#our-menu h2 {
    color: var(--lightTextColor);
}

.parking ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.deal-box .deal-section em {
    color: currentColor;
}

figure#specials-img-slider.widget-background {
    background-image: none;
    min-height: 125vh;
}

.copyright > svg.copyright-icon path, .copyright > svg.copyright-icon polygon, .copyright > svg.copyright-icon rect {
    fill: currentColor;
}

.copyright > svg.icon.copyright-icon {
    color: var(--salmon);
};