/**
 * =========================================================
 * EXO - Professional Crimson Theme
 * Modern Dark MMORPG Palette
 * =========================================================
 */

:root {

    /* =====================================================
       PRIMARY COLORS
    ===================================================== */

    --exo-primary: #dc2626;
    --exo-primary-dark: #991b1b;
    --exo-primary-light: #ef4444;
    --exo-primary-hover: #f87171;
    --exo-primary-deeper: #3b0909;


    /* =====================================================
       ACCENT COLORS
    ===================================================== */

    --exo-accent: #ff4444;
    --exo-accent-dark: #b91c1c;
    --exo-accent-light: #ff7777;

    --exo-electric: var(--exo-accent);
    --exo-electric-dark: var(--exo-accent-dark);
    --exo-electric-glow: rgba(255,68,68,.30);


    /* =====================================================
       SILVER / NEUTRALS
    ===================================================== */

    --exo-silver: #9ca3af;
    --exo-silver-light: #d1d5db;
    --exo-silver-lighter: #f3f4f6;
    --exo-silver-dark: #6b7280;


    /* =====================================================
       BACKGROUNDS
    ===================================================== */

    --exo-bg-dark: #080505;
    --exo-bg-main: #100707;
    --exo-bg-card: #171010;
    --exo-bg-card-hover: #241414;
    --exo-bg-elevated: #321818;
    --exo-bg-input: #120808;


    /* =====================================================
       TEXT
    ===================================================== */

    --exo-text-primary: #ffffff;
    --exo-text-secondary: #dddddd;
    --exo-text-muted: #999999;


    /* =====================================================
       BORDERS
    ===================================================== */

    --exo-border: rgba(220,38,38,.20);
    --exo-border-strong: rgba(220,38,38,.45);
    --exo-border-light: rgba(255,255,255,.06);


    /* =====================================================
       SHADOWS & GLOW
    ===================================================== */

    --exo-shadow: 0 8px 30px rgba(0,0,0,.50);
    --exo-shadow-large: 0 20px 60px rgba(0,0,0,.70);

    --exo-glow: 0 0 20px rgba(220,38,38,.40);
    --exo-glow-strong: 0 0 35px rgba(239,68,68,.60);


    /* =====================================================
       GRADIENTS
    ===================================================== */

    --exo-gradient-primary:
        linear-gradient(135deg,#ef4444 0%,#991b1b 100%);


    --exo-gradient-accent:
        linear-gradient(135deg,#ff4444 0%,#b91c1c 100%);


    --exo-gradient-silver:
        linear-gradient(135deg,#d1d5db 0%,#6b7280 100%);


    --exo-gradient-card:
        linear-gradient(180deg,#1d1111 0%,#120808 100%);


    --exo-gradient-header:
        linear-gradient(135deg,#180909 0%,rgba(220,38,38,.25) 100%);


    --exo-gradient-body:
        radial-gradient(circle at top,
            #260909 0%,
            #120707 45%,
            #080505 100%);

}

/* =========================================================
   BODY & BACKGROUND
========================================================= */

body{
    background:
        var(--exo-gradient-body),
        url("../img/fondo1.jpg") no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;

    color: var(--exo-text-secondary);

    font-family: "Montserrat","Roboto",sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}

/* =========================================================
   GLOBAL LINKS
========================================================= */

a{
    color:var(--exo-primary);
    transition:.25s ease;
}

a:hover{
    color:var(--exo-primary-light);
    text-decoration:none;
}

/* =========================================================
   TEXT SELECTION
========================================================= */

::selection{
    background:var(--exo-primary);
    color:#fff;
}

::-moz-selection{
    background:var(--exo-primary);
    color:#fff;
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0b0b0b;
}

::-webkit-scrollbar-thumb{
    background:var(--exo-primary);
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--exo-primary-light);
}

/* =========================================================
   DEFAULT CARD STYLE
========================================================= */

.exo-card{
    background:var(--exo-gradient-card);
    border:1px solid var(--exo-border);
    border-radius:12px;
    box-shadow:var(--exo-shadow);
    transition:.25s ease;
}

.exo-card:hover{
    border-color:var(--exo-border-strong);
    box-shadow:var(--exo-glow);
    transform:translateY(-2px);
}