@import "cards.css";
@import "fonts.css";
@import "buttons.css";


/*
 @import "debug.css";

*/

/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
height: 100%;
    min-height: 100dvh;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================
   BASE
   ========================================================== */

html{
    background: black;
}




body {
    min-height: 100dvh;
    margin: 0;

    padding-top: env(safe-area-inset-top);
    margin-top: calc(-1 * env(safe-area-inset-top));

    background: linear-gradient(
        to bottom,
        #000000 0%,
        #35654D 60%
    );



position: relative;
isolation: isolate;
    min-height: 100dvh;
    color: white;
    font-size: 1rem;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* ==========================================================
   BACKGROUND
   ========================================================== */


body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    content: "";
    position: fixed;

    top: calc(-1 * env(safe-area-inset-top));
    right: 0;
    bottom: calc(-1 * env(safe-area-inset-bottom));
    left: 0;

    background: linear-gradient(
        to bottom,
        #000000 1%,
        #35654D 60%
    );

    z-index: -2;
}


body::after {
    background:
        url("https://smokenacespoker.com/_layout/img/flyingcardsbackground.svg")
        center center / contain no-repeat;

    opacity: .1;
    z-index: -1;
}



/* ==========================================================
   LAYOUT (mobile)
   ========================================================== */

body {
    display: flex;
    flex-direction: column;
justify-content: space-evenly;
}



/* ==========================================================
   HEADER
   ========================================================== */

header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    width: 100%;
	flex: 0 0 auto;
}


/* ----------------------------------------------------------
   MENU BUTTON
   ---------------------------------------------------------- */

#BT_menu {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    display: block;

width: 48px;
height:48px;


    margin: 0 10px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

#BT_menu img {
    display: block;
width: 28px;
height:28px;
    opacity: .5;
}


/* ----------------------------------------------------------
   HEADER LOGO
   ---------------------------------------------------------- */

header > a {
    grid-column: 2;
    grid-row: 1;
    display: block;
}

header > a > img {
    display: block;
    width: 100%;
    height: auto;
}




/* ==========================================================
   MAIN - MOBILE
   ========================================================== */
main {
    flex: 1 1 auto;
    width: 100%;
}


/* ==========================================================
   FOOTER - MOBILE
   ========================================================== */

footer {
flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
    font-size: .75rem;
}

footer img {
    width: auto;
    height: 3em;
    margin-right: 1em;
    vertical-align: middle;
}


/* ==========================================================
   NAV - MOBILE
   ========================================================== */

nav,
nav.card {
    display: none;

    opacity: 0;
    visibility: hidden;
}


/* ==========================================================
   MOBILE MENU OPEN
   ========================================================== */

body.menu-open {
    overflow: hidden;
}


/* ----------------------------------------------------------
   BLUR
   ---------------------------------------------------------- */

#blur {
    position: fixed;

    inset: 0;

    z-index: 9998;

    background: rgba(0, 0, 0, .15);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .5s ease,
        visibility .5s ease;
}

body.menu-open #blur {
    opacity: 1;
    visibility: visible;
}


/* ----------------------------------------------------------
   MENU CARD
   ---------------------------------------------------------- */

body.menu-open nav,
body.menu-open nav.card {
    display: block;

    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 9999;

    opacity: 1;
    visibility: visible;
}


/* ----------------------------------------------------------
   MENU CONTENT
   ---------------------------------------------------------- */

nav ul {
    container-type: inline-size;

    display: flex;
    flex-direction: column;

    justify-content: space-evenly;

    font-family: "Calvous2";

    font-size: 5cqw;

    text-transform: uppercase;

    color: black;
}

nav ul li a {
    display: block;

    width: 100%;

    color: inherit;

    text-decoration: none;
}


/* ==========================================================
   ARTICLE
   ========================================================== */

.newColumn {
    break-before: column;
}

.separator {
    width: 100%;
    height: 50px;

    margin: 2rem 0;

    background-image:
        url("https://smokenacespoker.com/_layout/img/separator.svg");

    background-repeat: no-repeat;
}