/** Import CSS for other pages **/

@import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css');
@import url('https://cdn.vacso.cloud/site-icons/css/icons.min.css');
@import url('./account.css');



/** Import fonts **/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/** General CSS **/

:root {


    /* Default Values */
    --padding-smal: 10px;
    --padding-big: 20px;

    --border-radius-0-5x: 10px;
    --border-radius: 20px;
    --border-radius-1-5x: 30px;
    --border-radius-2x: 40px;
    --border-radius-2-5x: 60px;
    --border-radius-4x: 80px;
    --border-radius-round: 10000px;

    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Exo', sans-serif;
    --font-tertairy: 'Calistoga', cursive;
    /**--font-secondary: 'Poppins', sans-serif;**/

    --height-navbar: 100px;
    --height-half-navbar: var(--height-navbar) / 2;

    --font-size: clamp(15px, 2vw, 20px);
    --fs-xx-larger: clamp(50px, 2vw, 100px);
    --fs-x-larger: clamp(50px, 2vw, 80px);
    --fs-larger: clamp(40px, 2vw, 60px);
    --fs-large: clamp(40px, 2vw, 50px);
    --fs-medium: clamp(30px, 2vw, 40px);
    --fs-small: clamp(20px, 2vw, 30px);
    --fs-smaller: clamp(20px, 5vw, 25px);
    --fs-x-small: clamp(16px, 5vw, 20px);
    --fs-xx-small: 18px;

    --fs-x-large: 110px;
    --fs-large: 40px;
    --fs-medium: 24px;
    --fs-small: 22px;
    --fs-x-small: 18px;

    --grid-rows: 1;
    --grid-columns: 2;

    --gap: 32px;
    --row-temp: repeat(var(--grid-rows), auto);
    --column-temp: repeat(var(--grid-columns), 1fr);



    --navbar-height: 80px;
    --sidebar-width: 300px;

    /* Container max-width variables */
    --container-width: 100%;
    --container-width--sm: 540px;
    --container-width--md: 720px;
    --container-width--lg: 960px;
    --container-width--xl: 1140px;
    --container-width--xxl: 1360px;
    --container-width--xxxl: 1360px;




    /* Main Colors **/

    --text-clr: #2f2f2f;
    --text-clr-invert: #e4e4e4;
    --link-clr: #3578e5;
    --link-clr-invert: #3578e5;

    --hover-clr: #9098a7;
    --border-clr: #9098a7;

    --bg-clr-light: #fff;
    --bg-clr: #e4e4e4;
    --bg-clr-dark: #d9d9d9;
    --bg-clr-invert-light: #474747;
    --bg-clr-invert: #2e2e2e;
    --bg-clr-invert-dark: #242424;

    --nav-box-shadow: 0 1px 2px 0 #0000001a;




    --primary: #202020;
    --secondary: #f3f3f3;
    --accent: #ff8000;
    --secondary-accent: #ff8000;

    --primary-100: color-mix(in oklab, var(--primary) 10%, white);
    --primary-200: color-mix(in oklab, var(--primary) 20%, white);
    --primary-300: color-mix(in oklab, var(--primary) 30%, white);
    --primary-400: color-mix(in oklab, var(--primary) 40%, white);
    --primary-500: color-mix(in oklab, var(--primary) 50%, white);
    --primary-600: color-mix(in oklab, var(--primary) 60%, white);
    --primary-700: color-mix(in oklab, var(--primary) 70%, white);
    --primary-800: color-mix(in oklab, var(--primary) 80%, white);
    --primary-900: color-mix(in oklab, var(--primary) 90%, white);
    --primary-1000: color-mix(in oklab, var(--primary) 100%, white);

    --secondary-100: color-mix(in oklab, var(--secondary) 10%, black);
    --secondary-200: color-mix(in oklab, var(--secondary) 20%, black);
    --secondary-300: color-mix(in oklab, var(--secondary) 30%, black);
    --secondary-400: color-mix(in oklab, var(--secondary) 40%, black);
    --secondary-500: color-mix(in oklab, var(--secondary) 50%, black);
    --secondary-600: color-mix(in oklab, var(--secondary) 60%, black);
    --secondary-700: color-mix(in oklab, var(--secondary) 70%, black);
    --secondary-800: color-mix(in oklab, var(--secondary) 80%, black);
    --secondary-900: color-mix(in oklab, var(--secondary) 90%, black);
    --secondary-1000: color-mix(in oklab, var(--secondary) 100%, black);

    --accent-100: color-mix(in oklab, var(--accent) 20%, white);
    --accent-200: color-mix(in oklab, var(--accent) 40%, white);
    --accent-300: color-mix(in oklab, var(--accent) 60%, white);
    --accent-400: color-mix(in oklab, var(--accent) 80%, white);
    --accent-600: color-mix(in oklab, var(--accent) 100%, black);
    --accent-600: color-mix(in oklab, var(--accent) 90%, black);
    --accent-700: color-mix(in oklab, var(--accent) 80%, black);
    --accent-800: color-mix(in oklab, var(--accent) 70%, black);
    --accent-900: color-mix(in oklab, var(--accent) 60%, black);
    --accent-1000: color-mix(in oklab, var(--accent) 50%, black);


    /* Support Colors **/

    /** Success Color **/
    --green-200: hsl(148, 93%,  82%);
    --green-300: hsl(168, 24%, 68%);
    --green-500: hsl(169, 24%, 55%);
    --green-700: hsl(165, 29%, 22%);


    /** Warning Color **/
    --orange-200: hsl(38, 93%,  82%);
    --orange-300: hsl(38, 92%, 65%);
    --orange-500: hsl(38, 100%, 45%);
    --orange-700: hsl(38, 100%, 28%);

    /** Danger Color **/
    --red-200: hsl(356, 93%,  82%);
    --red-300: hsl(356, 92%, 65%);
    --red-500: hsl(356, 100%, 45%);
    --red-700: hsl(356, 100%, 28%);

    /** Info Color **/
    --blue-200: hsl(221, 93%,  82%);
    --blue-300: hsl(221, 92%, 65%);
    --blue-500: hsl(221, 100%, 45%);
    --blue-700: hsl(221, 100%, 28%);

}

/*
:root[data-theme="light"] {
    --text: #1C1C1C;
    --background: #d1d1d1;
    --primary: #dbdbdb;
    --secondary: #acaaaa;
    --accent: #004570;
}

:root[data-theme="dark"] {
    --text: #E4E4E4;
    --background: #2e2e2e;
    --primary: #242424;
    --secondary: #555353;
    --accent: #8fd4ff;
}


@media (prefers-color-scheme: light) {
    :root {
        --text: #1C1C1C;
        --background: #d1d1d1;
        --primary: #dbdbdb;
        --secondary: #acaaaa;
        --accent: #004570;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #E4E4E4;
        --background: #2e2e2e;
        --primary: #242424;
        --secondary: #555353;
        --accent: #8fd4ff;
    }
}
*/


* {
    margin: 0;
    padding: 0;
    line-height: var(--lh);
    font-family: var(--ff) !important;
    box-sizing: border-box;
    transition:
        color .3s ease-in-out,
        background-color .3s ease-in-out,
        box-shadow .3s ease-in-out,
        border-color .3s ease-in-out,
        text-decoration .3s ease-in-out
    ;
}

html { background-color: var(--clr-background-tertairy); overflow-x: hidden; font-size: 10px; min-height: 100vh; background-color: var(--bg-clr); }

h1, .h1 { --fs: var(--fs-x-large); --lh: 1; --fw: 900; }
h2, .h2 { --fs: var(--fs-large); --lh: 1; --fw: 900; }
h3, .h3 { --fs: var(--fs-medium); --lh: 1; --fw: 700;}
h4, .h4 { --fs: var(--fs-small); --lh: 1; --fw: normal; }
p, .p { --fs: var(--fs-small); --lh: 33px; --fw: normal; }
a { --fs: var(--fs-x-small); --lh: 1; text-decoration: none; }
li, .li { --fs: var(--fs-small); --lh: 33px; --fw: normal; }
span, .span { --fs: var(--fs-small); --lh: 33px; --fw: normal; }
input, .input { --fs: var(--fs-small); --lh: 33px; --fw: 500; }
select, .select { --fs: var(--fs-small); --lh: 33px; --fw: 500; }
textarea, .textarea { --fs: var(--fs-small); --lh: 33px; --fw: 500; }
button, .button { --fs: var(--fs-small); --lh: 33px; --fw: 500; }

*:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,p,.p,a,.a,li,.li,span,.span,input,.input,select,.select,textarea,.textarea,button,.button){ font-size: var(--fs) !important; --ff: var(--font-primary); font-weight: var(--fw) !important; color: var(--text-clr);  }
*:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6) { --ff: var(--font-secondary); }
*:is(em) { font-style: italic; }
*:is(p strong, pre strong, a strong, li strong, span strong, h3 strong, h4 strong, h5 strong, h6 strong) { --fw: bold; }




/** Scrollbar **/

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #ffffff2f; }
::-webkit-scrollbar-thumb { background: #ffffff2f; border-radius: 5px; transition: all 0.3s ease-in-out; }
::-webkit-scrollbar-thumb:hover { background: #ffffff64; transition: all 0.3s ease-in-out; }



/** Navbar **/

/* Desktop Version */

header { position: fixed !important; top: 0; left: 0; width: 100%; height: var(--navbar-height); z-index: 1000; background-color: var(--bg-clr-dark); }
header nav { height: calc(var(--navbar-height) - 20px); margin: 10px auto; }
header nav .da-icon { --clr: var(--text-clr); }
header .navbar-desktop { height: 100%; border-radius: var(--border-radius); position: relative; width: 100%; z-index: 100; display: flex; justify-content: space-between; }
.navbar-desktop .navbar-desktop-items { height: 100%; display: flex; justify-content: flex-end; }
.navbar-desktop .navbar-desktop-items a { height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.navbar-desktop .navbar-desktop-items a:last-child { padding: 0 0 0 20px; }
.navbar-desktop .navbar-desktop-items a:hover { transition: all 0.2s ease-in-out; }
.navbar-desktop .navbar-desktop-items p { transition: color 0.3s ease-in-out; text-align: center; --fw: 800; --ff: var(--font-secondary); }
.navbar-desktop .navbar-desktop-items a:hover p { color: var(--accent); }
.navbar-desktop-sitename { display: flex; align-items: center; }



/* Screen size logic */

.navbar-mobile { display: none; }

@media (max-width: 992px) {
    .navbar-desktop { display: none !important; }
    .navbar-mobile { display: flex !important; }
}



/* Mobile Version */
header .navbar-mobile { height: 100%; box-shadow: 0px 0px 20px 15px rgba(0, 0, 0, 0.4); background-color: var(--bg-clr-dark); border-radius: var(--border-radius); position: relative; width: 100%; z-index: 100; justify-content: space-between; }
.navbar-mobile .navbar-mobile-items { height: 100%; display: flex; justify-content: flex-end; }
.navbar-mobile .navbar-mobile-items a, .navbar-mobile .navbar-mobile-items .open-nav { height: 100%; width: 80px; display: flex; align-items: center; justify-content: center; }
.navbar-mobile .navbar-mobile-items a:hover { transition: all 0.2s ease-in-out; }
.navbar-mobile .navbar-mobile-items p { transition: color 0.3s ease-in-out; text-align: center; --fs: clamp(25px, 5vw, 35px); --fw: 800; --ff: var(--font-secondary); }
.navbar-mobile .navbar-mobile-items a:hover p { color: var(--accent); }
.navbar-mobile-sitename { display: flex; align-items: center; }

/* nav .navbar-mobile { height: 60px; background: linear-gradient(180deg, rgba(33,33,33,1) 45%, rgba(210,210,210,0) 94%); position: fixed; top: 0; width: 100%; z-index: 100; }
.navbar-mobile-items { display: flex; justify-content: flex-end; }
.navbar-mobile a { display: block; height: 100%; width: 180px; transition: all 0.2s ease-in-out; text-decoration: none; color: #FFF; }
.navbar-mobile .navbar-mobile-items a:hover { transition: all 0.2s ease-in-out; color: var(--accent); }
.navbar-mobile .navbar-mobile-items p { padding: calc(30px - 26.4px/2 - 5px); margin: 10px; border-radius: 10px; transition: all 0.3s ease-in-out; text-align: center; }
.navbar-mobile .navbar-mobile-items a:hover p { padding: calc(30px - 26.4px/2 - 5px); margin: 10px; transition: all 0.3s ease-in-out; border-radius: 10px; color: var(--accent); }
.navbar-mobile-sitename { float: left; display: flex; flex-direction: row; padding-left: 30px; }
.navbar-mobile-sitename h2 { padding: calc(30px - 28.8px/2 - 5px) 0; margin: 10px 0; } */

.nav-overlay { height: 0%; width: 100%; position: fixed; z-index: 9999; top: 0; left: 0; background-color: #141414; overflow-y: hidden; transition: height 0.5s; }
.nav-overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; }
.nav-overlay .closebtn { position: absolute; top: 30px; right: 30px; font-size: 60px; height: 60px !important; }
.nav-overlay .nav-overlay-content a { padding: 15px 0; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; height: auto !important; width: 100% !important; }
.nav-overlay .nav-overlay-content p { transition: color 0.3s ease-in-out; text-align: center; --fs: clamp(30px, 5vw, 40px); --fw: 800; --ff: var(--font-secondary); }
.nav-overlay .nav-overlay-content a:hover p { color: var(--accent); }

.show-nav-false header { display: none; }



/*** Footer ***/

footer { padding-top: 65px; background-color: var(--primary); min-height: 150px; }
footer hr { width: 80%; margin: 0 auto; border: 2px solid var(--darkgray); }
footer .flex-box { width: 80%; margin: 20px auto; display: flex; justify-content: space-between; align-items: start; flex-direction: row; }
footer .block-1 { display: flex; justify-content: start; align-items: start; flex-direction: column; }
footer .block-1 h3 { color: var(--accent); }
footer .block-1 p { margin-top: 10px; }
footer .block-2 { display: flex; flex-direction: column; justify-content: start; align-items: start; }
footer .block-2 a { margin-bottom: 10px; width: 40px; height: 40px; background-color: var(--accent); border-radius: 5px; transition: all .3s; }
footer .block-2 a:hover { transform: scale(1.02); transition: all .3s; }
footer .block-2 a img { width: 40px; height: 40px; }

@media only screen and (max-width: 750px) {
    footer .block-2-1 { width: 75%; }
    footer .block-2-1 p { width: 100%; margin: 0; }
}
@media only screen and (max-width: 500px) {
    footer .flex-box-1 { display: flex; justify-content: space-around; align-items: center; flex-direction: column; }
    footer .block-1 { width: 100%; }
    footer .block-2 { width: 100%; }
}



/** Animations **/

@keyframes load-animation {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.t1 { opacity: 0; animation: load-animation 1s ease-out 0s 1 normal forwards; }
.t2 { opacity: 0; animation: load-animation 1s ease-out 0.2s 1 normal forwards; }
.t3 { opacity: 0; animation: load-animation 1s ease-out 0.4s 1 normal forwards; }
.t4 { opacity: 0; animation: load-animation 1s ease-out 0.6s 1 normal forwards; }
.t5 { opacity: 0; animation: load-animation 1s ease-out 0.8s 1 normal forwards; }
.t6 { opacity: 0; animation: load-animation 1s ease-out 1.0s 1 normal forwards; }
.t7 { opacity: 0; animation: load-animation 1s ease-out 1.2s 1 normal forwards; }
.t8 { opacity: 0; animation: load-animation 1s ease-out 1.4s 1 normal forwards; }
.t9 { opacity: 0; animation: load-animation 1s ease-out 1.6s 1 normal forwards; }
.t10 { opacity: 0; animation: load-animation 1s ease-out 1.8s 1 normal forwards; }
.t11 { opacity: 0; animation: load-animation 1s ease-out 2.0s 1 normal forwards; }
.t12 { opacity: 0; animation: load-animation 1s ease-out 2.2s 1 normal forwards; }
.t13 { opacity: 0; animation: load-animation 1s ease-out 2.4s 1 normal forwards; }
.t14 { opacity: 0; animation: load-animation 1s ease-out 2.6s 1 normal forwards; }
.t15 { opacity: 0; animation: load-animation 1s ease-out 2.8s 1 normal forwards; }
.t16 { opacity: 0; animation: load-animation 1s ease-out 3.0s 1 normal forwards; }
.t17 { opacity: 0; animation: load-animation 1s ease-out 3.2s 1 normal forwards; }
.t18 { opacity: 0; animation: load-animation 1s ease-out 3.4s 1 normal forwards; }
.t19 { opacity: 0; animation: load-animation 1s ease-out 3.6s 1 normal forwards; }
.t20 { opacity: 0; animation: load-animation 1s ease-out 3.8s 1 normal forwards; }





/**** Components ****/


/*** Uncategorized ***/

/** Container **/
.container { --width: var(--container-width); --padding: 2rem; width: 100%; max-width: var(--width); margin-left: auto; margin-right: auto; padding-left: var(--padding); padding-right: var(--padding); position: relative; }

@media (min-width: 576px) {
    .container { --width: var(--container-width--sm); }
}

@media (min-width: 768px) {
    .container { --width: var(--container-width--md); }
}

@media (min-width: 992px) {
    .container { --width: var(--container-width--lg); }
}

@media (min-width: 1200px) {
    .container { --width: var(--container-width--xl); }

    .container.container--small { --width: 1000px; }
    .container.container--medium { --width: 1100px; }
}

@media (min-width: 1400px) {
    .container { --width: var(--container-width--xxl); }

    .container.container--small { --width: 1000px; }
    .container.container--medium { --width: 1200px; }
}

@media (min-width: 1600px) {
    .container { --width: var(--container-width--xxxl); }

    .container.container--small { --width: 1000px; }
    .container.container--medium { --width: 1140px; }
    .container.container--large { --width: 1500px; }
}
@media (min-width: 1700px) {
    .container.container--large { --width: 1655px; }
}


/** Whitespace **/
.wst--small { padding-top: 35px; }
.mt--small { margin-top: 35px; }
.wst--medium { padding-top: 70px; }
.mt--medium { margin-top: 70px; }
.wst--large { padding-top: 140px; }
.mt--large { margin-top: 140px; }
.wsb--small { padding-bottom: 35px; }
.mb--small { margin-bottom: 35px; }
.wsb--medium { padding-bottom: 70px; }
.mb--medium { margin-bottom: 70px; }
.wsb--large { padding-bottom: 140px; }
.mb--large { margin-bottom: 140px; }


/** Backgrounds **/
.bg--light { background-color: var(--bg-clr-light); }
.bg--normal { background-color: var(--bg-clr); }
.bg--dark { background-color: var(--bg-clr-dark); }
.bg--invert-light { background-color: var(--bg-clr-invert-light); }
.bg--invert-normal { background-color: var(--bg-clr-invert); }
.bg--invert-dark { background-color: var(--bg-clr-invert-dark); }


/** Text **/
.vlx-text * { text-align: start; }
.vlx-text.vlx-text--start * { text-align: start; }
.vlx-text.vlx-text--center * { text-align: center; }
.vlx-text.vlx-text--end * { text-align: end; }


/** Backgrounds **/
.vlx-text p.width--small { max-width: 60% !important; }
.vlx-text div p.width--small { max-width: 80% !important; }
.vlx-text p.width--normal { max-width: 80% !important; }
.vlx-text div p.width--normal { max-width: 90% !important; }
.vlx-text p.width--large { max-width: 100% !important; }


/** BTN Group **/
.btn-group { display: flex; justify-content: center; align-items: center; gap: 30px 60px; margin-top: 30px; flex-wrap: wrap; }
.btn-group--left { justify-content: left; }
.btn-group--right { justify-content: right; }

@media (min-width: 1200px) {
    .btn-group { flex-wrap: nowrap; }
}


/** Display **/
.d-grid { display: grid !important; }
.d-grid--center { display: grid !important; place-content: center !important; }
.d-flex { display: flex !important; }
.d-flex--center { display: flex !important; justify-content: center !important; align-items: center; }
.d-flex.d-flex--ver { display: flex !important; flex-direction: column; }
.d-flex.d-flex--hor { display: flex !important; flex-direction: row; }
.d-none { display: none !important; }


/** Display **/
.d-grid { display: grid !important; }
.d-grid--center { display: grid !important; place-content: center !important; }
.d-flex { display: flex !important; }
.d-flex--center { display: flex !important; justify-content: center !important; align-items: center; }
.d-none { display: none !important; }


/** Gaps **/
.g-10  { row-gap: 1rem !important; column-gap: 1rem !important; }
.gx-10 { row-gap: 1rem !important; }
.gy-10 { column-gap: 1rem !important; }

.g-20  { row-gap: 2rem !important; column-gap: 2rem !important; }
.gx-20 { row-gap: 2rem !important; }
.gy-20 { column-gap: 2rem !important; }

.g-40  { row-gap: 4rem !important; column-gap: 4rem !important; }
.gx-40 { row-gap: 4rem !important; }
.gy-40 { column-gap: 4rem !important; }


/** BTN Group **/
.vlx-toast {
    position: relative;
    z-index: 999999;
}

#toast-container > .toast { border-radius: var(--border-radius-0-5x); }
#toast-container > .toast:hover {
    -moz-box-shadow: 0 0 8px var(--bg-clr-invert-dark) !important;
    -webkit-box-shadow: 0 0 8px var(--bg-clr-invert-dark) !important;
    box-shadow: 0 0 8px var(--bg-clr-invert-dark) !important;
}
#toast-container .toast .toast-message { font-family: var(--font-primary) !important; }

#toast-container > .toast:before {
    position: fixed;
    font-family: FontAwesome;
    font-size: 24px;
    line-height: 18px;
    float: left;
    color: #FFF;
    padding-right: 0.5em;
    margin: auto 0.5em auto -1.5em;
}
#toast-container > .toast-info:before { content: "\f05a"; }
#toast-container > .toast-success:before { content: "\f058"; }
#toast-container > .toast-warning:before { content: "\f06a"; }
#toast-container > .toast-error:before { content: "\f057"; }









/*** Buttons ***/

.btn { --clr: var(--text-clr); --clr-bg: var(--bg-clr); --border: 1px solid transparent; --padding: 0; color: var(--clr); cursor: pointer; }
.btn:not(.btn.btn--link,.btn.btn--readmore) { background-color: var(--clr-bg); border: var(--border); padding: var(--padding); min-height: 56px; min-width: min(100%, 360px); border-radius: 20px; display: grid; place-content: center; }
.btn .da-icon { --clr: var(--text-clr); }

.btn.btn--small { --padding: 0; --fs: 14px; min-height: 36px !important; min-width: min(100%, 260px) !important; }

.btn.btn--primary { --clr: var(--text-clr-invert); --border: 1px solid var(--accent); --clr-bg: var(--accent); }
.btn.btn--primary .da-icon { --clr: var(--text-clr-invert); }
.btn.btn--primary-outline { --clr: var(--accent); --border: 1px solid var(--accent); --clr-bg: transparent; }
.btn.btn--primary-outline .da-icon { --clr: var(--accent); }
.btn.btn--secondary { --clr: var(--text-clr); --border: 1px solid var(--bg-clr); --clr-bg: var(--bg-clr-light); }
.btn.btn--secondary .da-icon { --clr: var(--text-clr); }
.btn.btn--secondary:hover { --clr: var(--text-clr); --border: 1px solid var(--accent); --clr-bg: var(--bg-clr-light); }
.btn.btn--secondary-outline { --clr: var(--text-clr-invert); --border: 1px solid var(--accent); --clr-bg: var(--accent); }
.btn.btn--secondary-outline .da-icon { --clr: var(--text-clr-invert); }
.btn.btn--link { --clr: var(--accent); --fw: normal; text-decoration: underline; text-decoration-color: var(--accent); --fs: var(--fs-medium); }
.btn.btn--link .da-cion { --clr: var(--accent); }

.btn.btn--danger { --clr: var(--text-clr-invert); --border: 1px solid var(--red-200); --clr-bg: var(--red-500); }
.btn.btn--warning { --clr: var(--text-clr-invert); --border: 1px solid var(--orange-200); --clr-bg: var(--orange-500); }
.btn.btn--success { --clr: var(--text-clr-invert); --border: 1px solid var(--green-200); --clr-bg: var(--green-500); }




/*** Icons ***/

.vlx-icon.vlx-icon--custom-dot { --w: 10px; --h: 10px; background: rgba(143, 212, 255, 0.50); margin-right: 8px; border-radius: 50%; }
.vlx-icon.vlx-icon--x-large { --w: 30px; --h: var(--w); }
.vlx-icon.vlx-icon--xx-large { --w: 35px; --h: var(--w); }
.vlx-icon.vlx-icon--xxx-large { --w: 40px; --h: var(--w); }





/*** Headers ***/

.vlx-header { margin-top: var(--navbar-height); }

/** Header > Home **/

.vlx-header.vlx-header--home { min-height: calc(100vh - var(--navbar-height)); display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--bg-clr); background-image: url(../images/hero-background.svg); background-size: cover; background-position: top; }
.vlx-header.vlx-header--home *:is(h1,h2,h3) { --lh: 1.25; text-align: center; background: var(--accent); background: radial-gradient(50% 80% at center, var(--accent) 0%, var(--text-clr) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.vlx-header.vlx-header--home .da-icon { --w: 60px; --h: 60px; --clr: var(--accent); position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); opacity: .7; }


/** Header > Subpage **/

.vlx-header.vlx-header--subpage { min-height: calc(60vh - var(--navbar-height)); display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--bg-clr); background-image: url(../images/hero-background.svg); background-size: cover; background-position: top; }
.vlx-header.vlx-header--subpage *:is(h1,h2,h3) { --lh: 1.25; text-align: center; background: var(--accent); background: radial-gradient(50% 80% at center, var(--accent) 0%, var(--text-clr) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }





/*** Blocks ***/

.vlx-block__name { display: flex; align-items: center; margin-bottom: 15px; }
.vlx-block__name p { --fs: var(--fs-x-small); --fw: 700; background: radial-gradient(1518.31% 100% at 0% 48.28%, rgba(143, 212, 255, 0.50) 0%, rgba(228, 228, 228, 0.50) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }


/** Blocks > Text **/

.vlx-block--text { }
.vlx-block--text h2 { max-width: 80%; margin-bottom: 30px; }
.vlx-block--text p { max-width: 80%; }
.vlx-block--text .btn.btn--link { --fs: var(--fs-medium); color: var(--accent); }
.vlx-block--text .text p { margin-bottom: 30px; }
.vlx-block--text .text:has(img) { display: flex; flex-wrap: wrap; gap: 60px 30px; margin-bottom: 30px; }
.vlx-block--text .text:has(img) p { margin-bottom: 0; max-width: 100%; }
.vlx-block--text .text:has(img) div { margin-bottom: 0; max-width: 100%; }
.vlx-block--text .text:has(img) div p { margin-bottom: 0; max-width: 100%; }
.vlx-block--text .text img { width: 100%; height: 100%; max-height: 500px; border-radius: 20px; object-fit: cover; object-position: center; }

@media (min-width:1200px) {
    .vlx-block-text .vlx-text:has(img) { flex-wrap: nowrap; }
    .vlx-block-text .vlx-text img { width: 50%; }
    .vlx-block-text .vlx-text:has(img) p { max-width: 60%; }
    .vlx-block-text .vlx-text:has(img) div { max-width: 60%; }
}



/** Blocks > Items **/

.vlx-block--items {  }
.vlx-block--items .inner { --gc: 2; grid-template-columns: repeat(var(--gc), 1fr); }

@media (min-width: 1200px) {
    .vlx-block--items .inner { --gc: 4; }
}



/** Blocks > Errors **/

.vlx-block--error { height: 100vh; }
.vlx-block--error *:is(.container, .inner) { height: 100%; }
.vlx-block--error .text { text-align: center; }
.vlx-block--error .text h1 { --fs: 250px; }



.vlx-game {}
.vlx-game.vlx-game--classic .inner.game { grid-template-columns: repeat(5, minmax(0,1fr)); }






/*** Cards ***/

.vlx-card { background-color: var(--bg-clr-dark); border: 1px solid var(--border-clr); border-radius: var(--border-radius); }
.vlx-card:hover { border: 1px solid var(--accent);}
.vlx-card .vlx-card__header { --p: 2rem 2rem 1rem; padding: var(--p); }
.vlx-card .vlx-card__header img { width: 100%; height: auto; border-radius: var(--border-radius-0-5x); }
.vlx-card .vlx-card__body { --p: 1rem 2rem 1rem; padding: var(--p); }
.vlx-card .vlx-card__footer { --p: 1rem 2rem 2rem; padding: var(--p); }
.vlx-card:hover .btn { --clr-bg: transparent; --clr: var(--text-clr); }

/** Cards > Items **/

.vlx-card.vlx-card--items {  }
.vlx-card.vlx-card--items .vlx-card__header img { width: 100%; height: auto; }
.vlx-card.vlx-card--items .vlx-card__body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.vlx-card.vlx-card--items .vlx-card__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}