@font-face {
    font-family: Bleeker;
    src: url(/common/fonts/Bleeker\ Regular.ttf);
}

@font-face {
    font-family: DomCasual;
    src: url(/common/fonts/Dom\ Casual\ Regular.otf);
}

@font-face {
    font-family: DomCasual;
    src: url(/common/fonts/Dom\ Casual\ Bold.otf);
    font-weight: bold;
}

@font-face {
    font-family: DomCasual;
    src: url(/common/fonts/Dom\ Casual\ Italic.ttf);
    font-style: italic;
}

@font-face {
    font-family: "wmw-icons";
    src: url(/common/fonts/wmw-icons/wmw-icons.ttf);
}

:root {
    --font-dom-casual: "DomCasual", system-ui, sans-serif;
    --font-bleeker: "Bleeker", cursive, sans-serif;

    --font-size: 1rem;

    --primary-text-color: white;
    --text-outline-color: rgb(34 124 158);
    --base-color: hsl(189, 49%, 37%);
    --text-outline-width: 0.05em;

    --link-color: rgb(252 235 45);

    --background-image: url(/common/images/background/main/WMW_UI_brick-HD.webp);

    --button-image: url(/common/images/ui/wmw/button.svg);
    --button-shadow-image: url(/common/images/ui/wmw/button_shadow.svg);
    --button-image-pressed: url(/common/images/ui/wmw/button_highlight.png);
    --button-shadow-size: 8px;
    --button-text-translateY: calc(var(--button-shadow-size) / 2);

    --button-home-image: url(/common/images/ui/wmw/home.svg);
    --button-menu-image: url(/common/images/ui/wmw/owall_button_level.png);
}

.bleeker {
    font-family: var(--font-bleeker);
}

.dom-casual {
    font-family: var(--font-dom-casual);
}

* {
    font-family: var(--font-bleeker);
    font-size: var(--font-size);

    margin: 0;
    color: var(--primary-text-color);
    -webkit-text-stroke: 0;
}

body {
    background-image: var(--background-image);
    background-size: contain;
}

.outline {
    -webkit-text-stroke: var(--text-outline-width) var(--text-outline-color);
}

/* button */

.button {
    position: relative;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    display: inline-grid;
    isolation: isolate;
    
    /* font-size: var(--font-size); */
    padding: 1em 2em;
    text-align: center;
    text-decoration: none;

    border: none;

    user-select: none;
    cursor: pointer;
    
    background: none;
    outline: none;

    /* min-width: 2em; */
    /* min-height: 3em; */

    -webkit-text-stroke: var(--text-outline-width) var(--text-outline-color);
}

.button::before {
    content: "";

    width: 100%;
    height: 100%;
    position: absolute;

    background-repeat: no-repeat;
    background-size: contain;
}

.button::before {
    z-index: -1;
    /* height: calc(100% - var(--button-shadow-size)); */

    border-image: var(--button-image);
    border-image-slice: 9 9 10 9 fill;
    border-image-width: 20px 20px 24px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;

    filter: drop-shadow(0px calc(var(--button-shadow-size) / 2) 0px #18142f8c);
}

/* button icon */

.button.icon {
    font-size: 1rem;
    font-family: "wmw-icons";
    aspect-ratio: 1 / 1;
}

.button.home::before {
    /* background-image: var(--button-home-image); */
    content: "H";
}
.button.menu::before {
    /* background-image: var(--button-menu-image); */
    content: "M";
}
.button.icon::before {
    /* display: inline-block; */
    height: 100%;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1.5;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    
    font-size: 2.5em;

    /* background-position: center;
    background-size: contain; */

    filter: initial;

    color: var(--text-color);
    
    background: none;
}

/* active effect */

.button:where(:active)::before {
    filter: brightness(50%) !important;
}

.button:where(:active):not(.icon) {
    transform: translateY(var(--button-text-translateY));
}

/* link */

.link {
    color: var(--link-color);
    text-decoration: none;
}

.link:where(:hover, :focus) {
    /* filter: brightness(50%); */
    text-decoration: underline;
}

.link:active {
    filter: brightness(50%);
}