/* #region GENERAL */
* {user-select: none;} /* block text selection */
/* footer at bottom */
html {height: 100%;}
body {display: flex; flex-direction: column; max-width: 1200px; min-height: 100%; margin: auto;}
main {flex: 1;}
/* */
main {padding: 10px; overflow-wrap : break-word}
h1.page_title {
    display: flex; justify-content: center; width: fit-content; margin: auto; margin-top: 0px; margin-bottom: 5px;
    font-size: 150%; font-weight: 700;
}
.button {
    display: flex; align-items: center; border: none; padding: 4px 8px;
    color: var(--col_font2); text-decoration: none; letter-spacing: 1px;
    background: linear-gradient(90deg, transparent, var(--col_bg_action1) 10px, var(--col_bg_action1) calc(100% - 10px), transparent);
    mask-image: linear-gradient(180deg, transparent, var(--col_bg_action1) 10px), linear-gradient(0deg, transparent, var(--col_bg_action1) 10px);
    mask-composite: intersect;
    @media not all and (any-pointer: coarse) {&:hover {
        background-image: linear-gradient(90deg, transparent, var(--col_bg_action2) 10px, var(--col_bg_action2) calc(100% - 10px), transparent);
        mask-image: linear-gradient(180deg, transparent, var(--col_bg_action2) 10px), linear-gradient(0deg, transparent, var(--col_bg_action2) 10px); mask-composite: intersect;}}
    @media (any-pointer: coarse) {&:active {
        background-image: linear-gradient(90deg, transparent, var(--col_bg_action2) 10px, var(--col_bg_action2) calc(100% - 10px), transparent);
        mask-image: linear-gradient(180deg, transparent, var(--col_bg_action2) 10px), linear-gradient(0deg, transparent, var(--col_bg_action2) 10px); mask-composite: intersect;}}
}
.activeLink {
    background-image: linear-gradient(90deg, transparent, var(--col_bg_action2) 10px, var(--col_bg_action2) calc(100% - 10px), transparent);
    mask-image: linear-gradient(180deg, transparent, var(--col_bg_action2) 10px), linear-gradient(0deg, transparent, var(--col_bg_action2) 10px); mask-composite: intersect;
}
/* #endregion */

/* #region COLORS */
:root {
    --col_bg1: #ccb98b;
    --col_bg2: #d8c9a8/*#bda678*/;
    --col_font1: black;
    --col_font2: white; --col_font2_svg: brightness(0) invert(1);
    --col_bg_action1: darkred;
    --col_bg_action2: red;
}
.text-color {color: rgb(25,25,160);}
html {
    color: var(--col_font1);
    background:var(--col_bg1);
}
.bg_gradient, h1.page_title {
    padding: 5px 10px;
    background-image: linear-gradient(90deg, transparent, var(--col_bg2) 8px, var(--col_bg2) calc(100% - 8px), transparent);
    mask-image: linear-gradient(180deg, transparent, var(--col_bg2) 8px), linear-gradient(0deg, transparent, var(--col_bg2) 8px); mask-composite: intersect;
}
/* #endregion */

/* #region FONTS */
.bold {font-weight: 700;}
.italic {font-style: italic;}
.underline {text-decoration: underline;}
.text-link {color: var(--col_bg_action1);
    @media not all and (any-pointer: coarse) {&:hover {color: var(--col_bg_action2);}}
    @media (any-pointer: coarse) {&:active {color: var(--col_bg_action2);}}
}
@font-face {
    font-family: 'Merriweather';
    src: url("/fonts/Merriweather.woff2"); line-gap-override: 15%;
}
:root {
    --font_main: 'Merriweather';
}
html {
    font-family: var(--font_main);
    font-size: 12px;
}
/* #endregion */

/* #region CURSORS */
html {
    cursor : url('/images/sword.cur'), default;
}
a, a:hover/*firefox*/, .button, .cursor_pointer, button, button img, input, input::-webkit-inner-spin-button, textarea, label, select {
    cursor : url('/images/gauntlet.cur'), default;
}
/* #endregion */

/* #region TOP */
#banner {display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; margin-top: 5px; padding: 8px 1%;
    & #banner_game_name {display: flex; align-items: center; font-size: 165%; letter-spacing: 1px; font-weight: 700; color: black;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 6px rgba(255, 29, 29, 0.65);
        & img {width: 26px; height: 26px;}
        & span {position:relative; top: 1px;}
        @media only screen and (max-width: 425px) {& img {display: none;}}
    }
    & #banner_links {
        display: flex; justify-content: center; flex-wrap: wrap;
        & .banner_link {display: flex; align-items: center; flex-wrap: wrap; padding-left: 8px; padding-right: 8px;
           & img {width: 20px; height: 20px; margin-right: 2px; filter: var(--col_font2_svg);}
            & span {font-size: 85%;}
            & #banner_steam_logo {width: 18px; height: 18px; margin-right: 4px;}
            & #banner_discord_logo {margin-right: 4px;}
            @media only screen and (max-width: 640px) {
                span {display: none;}
                & img, #banner_steam_logo, #banner_discord_logo {margin-right: 0}
            }
        }
    }
}
#header_mainmenu {
    display: flex; justify-content: space-around; flex-wrap: wrap; margin: 5px 0; font-weight: 700;
    & .button {letter-spacing: 2px;}
}
.header_separation {display: block; margin: 0; width: 100%; height: 2px; border: none;
    background-image: linear-gradient(90deg, transparent, var(--col_bg2) 5%, var(--col_bg2) 95%, transparent);}
#header_submenu {
    display: flex; justify-content: space-evenly; flex-wrap: wrap; margin: 5px 0;
}
#header_bottom_separation {margin-bottom: 5px;}
#header_submenu.hide {display: none;}
#header_submenu.show { display: flex;}
#header_submenu_separation.hide {display: none;}
#header_submenu_separation.show { display: block;}
/* #endregion */

/* #region SUPPORT NOTE */
#support_note {
    width: fit-content; margin: auto; padding: 0 10px; font-style: italic; font-size: 90%;
}
/* #enregion */

/* #region GO TO TOP */
#go_up_wrapper {position: sticky; height:0; bottom: 36px; overflow: visible;}
    #go_up_scroll {
        width: fit-content; margin: auto; padding: 6px 8px; transform: translateY(-6px);
        & img {width: 20px; height: 20px;}
        @media not all and (any-pointer: coarse) {&:hover {& img{filter: var(--col_action_svg_1);}
        color: var(--col_action_1); border-color: var(--col_action_1); box-shadow: 1px 1px 5px var(--col_action_1);}}
        @media (any-pointer: coarse) { &:active {& img{filter: var(--col_action_svg_1);}
        color: var(--col_action_1); border-color: var(--col_action_1); box-shadow: 1px 1px 5px var(--col_action_1);}}
    }
main {padding-bottom: 32px;}
/* #endregion */

/* #region FOOTER */
footer {
    display: flex; justify-content: space-between; font-size: 90%;
    & #copyright {display: flex; flex-direction: column; justify-content: space-evenly;
        & #disclaimer {font-style: italic;}
    }
    & #footer_inner_separation {width: 2px; margin: 0 15px; background: var(--col_bg1); border:none;}
    & #footer_links {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
    & .button {font-size: 90%;}
}
/* #endregion */