/*
==========================================================

PremiumZone

Version :
0.0.0

File :
assets/css/app.css

Description :
PremiumZone Application Style

==========================================================
*/

/* ==========================================================
   ROOT
========================================================== */

:root{

    --pz-bg:#000000;

    --pz-panel:#050505;

    --pz-border:#ffffff;

    --pz-text:#ffffff;

    --pz-text-soft:#9a9a9a;

    --pz-hover:#181818;

    --pz-radius:8px;

    --pz-gap:12px;

    --pz-speed:.25s;

    --pz-font:

        "Courier New",
        monospace;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/* ==========================================================
   HTML
========================================================== */

html,

body{

    width:100%;

    height:100%;

    overflow:hidden;

}

/* ==========================================================
   BODY
========================================================== */

body{

    background:

        var(

            --pz-bg

        );

    color:

        var(

            --pz-text

        );

    font-family:

        var(

            --pz-font

        );

}

/* ==========================================================
   APP
========================================================== */

#pz-app{

    position:fixed;

    inset:0;

    overflow:hidden;

}

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

#pz-background{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:1;

}

/* ==========================================================
   FRAME
========================================================== */

#pz-frame-root{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:10;

}

/* ==========================================================
   CONTENT
========================================================== */

#pz-content{

    position:absolute;

    inset:0;

    z-index:20;

    pointer-events:none;

}

/* ==========================================================
   PANEL
========================================================== */

.pz-panel{

    position:relative;

    width:min(

        430px,

        96vw

    );

    height:min(

        860px,

        96vh

    );

    overflow:hidden;

}

/* ==========================================================
   CARD
========================================================== */

.pz-card{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    gap:

        var(

            --pz-gap

        );

    opacity:1;

    transition:

        opacity

        var(

            --pz-speed

        );

}

/* ==========================================================
   HIDDEN
========================================================== */

.hidden{

    display:none!important;

}