/* #region GLOBAL */

/* #region GENERAL */
* {user-select: none;}
/* footer at bottom */
html {height: 100%;}
body {display: flex; flex-direction: column; max-width: 1024px; min-height: 100%; margin: auto;}
main {flex: 1; padding: 5px; overflow-wrap : break-word}
.button {
    display: flex; align-items: center; justify-content: center; width: fit-content;
    padding: 5px; padding-top: 4px; font-family: var(--font_2); font-weight: bold; font-size: 105%; text-decoration: none;
    text-shadow: -1px -1px 0 black, -1px 1px 0 black, 1px -1px black, 1px 1px 0 black;
    background: var(--col_action2);
    outline: none; border: 1px solid black; border-radius: 10px; color: var(--col_font); 
    @media not all and (any-pointer: coarse) {&:not(.noHover):hover {background: var(--col_action); box-shadow: 0 0 1px 1px black, 0 0 7px 2px var(--col_action);}}
    @media (any-pointer: coarse) {&:active {background: var(--col_action);  box-shadow: 0 0 1px 1px black, 0 0 7px 2px var(--col_action);}}
}
.activeLink, .button.selected {background: var(--col_action); box-shadow: 0 0 7px 1px var(--col_action); box-shadow: 0 0 1px 1px black, 0 0 7px 2px var(--col_action);}
/* #endregion*/

/* #region COLORS */
:root {
    --col_bg: midnightblue;
    --col_bg2: #2E5090;
    --col_bg3: #1E2761;
    --col_font: #F8F8FF;
    --col_font2: #FFE87C;
    --col_action: #FFD700;
    --col_action2: #BFA100;
}
html {background: var(--col_bg); color: var(--col_font);}
/* #endregion */

/* #region FONTS */
.bold {font-weight: 700;}
.italic {font-style: italic;}
.underline {text-decoration: underline;}
.text-color {color: var(--col_font2);}
@font-face {
    font-family: 'Exo'; /*text*/
    src: url("/fonts/Exo.woff2") ; /* <link rel="preload"> base view */
}
@font-face {
    font-family: 'Orbitron'; /*titles*/
    src: url("/fonts/Orbitron.ttf") ; /* <link rel="preload"> base view */
}
:root {
    --font_main: 'Exo';
    --font_2: 'Orbitron';
}
html {
    font-family: var(--font_main);
    font-size: 13px;
    letter-spacing: 0.5px;
    & .button {letter-spacing: 1px;}
    & a.button {letter-spacing: 2px;}/*main menu*/
}
/* #endregion */

/* #region CURSORS */
html {cursor: url("/images/cursor_yellow.svg") 2 0, default;}
a, label, .cursor, button, .button, input, textarea, select, input[type="number"]::-webkit-inner-spin-button {
    cursor: url("/images/cursor_silver.svg") 2 0, default;
}
/* #endregion */

/* #endregion */

/* #region TOP */
#banner {display: flex; align-items: center; justify-content: center;
    height: 45px; margin-bottom: 5px;
    padding: 3px 0px; font-family: var(--font_2); font-size: 25px; font-weight: 700; letter-spacing: 3px;
    text-shadow: -1px -1px 0 black, -1px 1px 0 black, 1px -1px black, 1px 1px 0 black;
    background: radial-gradient(600px 50%, var(--col_action), rgba(255,255,255,0) 40%);
    & #logo_wrapper {width: fit-content; margin-right: 15px;
        padding: 1px; border-radius: 100px; background: var(--col_action);
        box-shadow: 3px 0px 7px var(--col_action), -3px 0px 7px var(--col_action);}
    & #logo_deckwizard{display: block; width: 40px;}
}
#nav_menu {display: flex; justify-content: space-evenly;
    position: sticky; top: 0; padding: 5px 0px;
    background: var(--col_bg2); box-shadow: 0 0 10px 2px var(--col_bg2);
}
/* #endregion */

/* #region FOOTER */
footer {display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;
    padding: 5px; font-size: 95%;
    background: var(--col_bg2); box-shadow: 0 0 10px 2px var(--col_bg2);
    & #privacy {position: relative; color: var(--col_font2);}
    & #privacy:after {content: ''; position: absolute; width: 0px; height: 1px;
        left: 50%; bottom: 2px; background: var(--col_action);
        transition: all ease-in-out .2s;}
        @media not all and (any-pointer: coarse) {
            & #privacy:hover {color: var(--col_action);}
            & #privacy:hover::after {width: 100%; left: 0;}
        }
    & .button {font-size: 80%; border-radius: 7px; text-wrap: nowrap;}
}
/* #endregion */