/*==================================================
    FPS GAME
    Global Style.css
==================================================*/

/*=========================
Reset
=========================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html,
body{

    width:100%;

    height:100%;

}

body{

    font-family:'Orbitron',sans-serif;

    background:#0b1118;

    color:#ffffff;

    overflow:hidden;

    user-select:none;

    -webkit-user-select:none;

    -moz-user-select:none;

}

/*=========================
Scrollbar
=========================*/

::-webkit-scrollbar{

    width:8px;

    height:8px;

}

::-webkit-scrollbar-track{

    background:#111827;

}

::-webkit-scrollbar-thumb{

    background:#00b7ff;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#00d4ff;

}

/*=========================
Typography
=========================*/

h1,h2,h3,h4,h5,h6{

    font-weight:700;

}

p{

    color:#d7dde5;

    line-height:1.7;

}

small{

    color:#9aa5b4;

}

/*=========================
Links
=========================*/

a{

    color:#00b7ff;

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:#00ffff;

}

/*=========================
Images
=========================*/

img{

    max-width:80%;

    display:block;

}

/*=========================
Video
=========================*/

video{

    max-width:100%;

    display:block;

}

/*=========================
Button
=========================*/

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:14px 24px;

    border-radius:10px;

    font-weight:bold;

    transition:.25s;

}

.btn-primary{

    background:linear-gradient(135deg,#00b7ff,#0066ff);

    color:#fff;

}

.btn-success{

    background:linear-gradient(135deg,#00c853,#00e676);

    color:#fff;

}

.btn-danger{

    background:linear-gradient(135deg,#ff4b5c,#c62828);

    color:#fff;

}

.btn-warning{

    background:linear-gradient(135deg,#ffb300,#ff6f00);

    color:#fff;

}

.btn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 0 20px rgba(0,183,255,.35);

}

/*=========================
Input
=========================*/

input,
select,
textarea{

    width:100%;

    padding:12px;

    border:none;

    outline:none;

    border-radius:8px;

    background:#1b2433;

    color:#fff;

    font-family:inherit;

}

input:focus,
select:focus,
textarea:focus{

    box-shadow:

        0 0 15px rgba(0,183,255,.35);

}

/*=========================
Card
=========================*/

.card{

    background:rgba(18,25,36,.82);

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    backdrop-filter:blur(14px);

}

/*=========================
Panel
=========================*/

.panel{

    background:rgba(18,25,36,.80);

    border-radius:15px;

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    overflow:hidden;

}

.panel-header{

    padding:16px;

    font-weight:bold;

    color:#00b7ff;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.panel-body{

    padding:18px;

}

/*=========================
Glass Effect
=========================*/

.glass{

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

}

/*=========================
Progress
=========================*/

.progress{

    width:100%;

    height:18px;

    border-radius:20px;

    overflow:hidden;

    background:#1b2433;

}

.progress-bar{

    width:0%;

    height:100%;

    background:linear-gradient(90deg,#00b7ff,#00ff88);

    transition:.25s;

}

/*=========================
Table
=========================*/

table{

    width:100%;

    border-collapse:collapse;

}

th{

    background:#182232;

    color:#00b7ff;

    padding:14px;

}

td{

    padding:12px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

/*=========================
Badge
=========================*/

.badge{

    display:inline-block;

    padding:4px 10px;

    border-radius:30px;

    font-size:12px;

    font-weight:bold;

}

.badge-success{

    background:#00c853;

}

.badge-danger{

    background:#ff4b5c;

}

.badge-warning{

    background:#ff9800;

}

.badge-info{

    background:#2196f3;

}

/*=========================
Avatar
=========================*/

.avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

}

/*=========================
Utilities
=========================*/

.hidden{

    display:none!important;

}

.center{

    text-align:center;

}

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.space-between{

    display:flex;

    justify-content:space-between;

}

.grid{

    display:grid;

}

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}

.p-10{padding:10px;}
.p-20{padding:20px;}
.p-30{padding:30px;}

/*=========================
Fade Animation
=========================*/

.fade-in{

    animation:fadeIn .4s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================
Glow
=========================*/

.glow{

    text-shadow:

        0 0 8px #00b7ff,

        0 0 20px #00b7ff;

}

/*=========================
Responsive
=========================*/

@media(max-width:1200px){

    body{

        overflow:auto;

    }

}

@media(max-width:768px){

    .panel-body{

        padding:14px;

    }

    .btn{

        width:100%;

    }

}

@media(max-width:480px){

    h1{

        font-size:28px;

    }

    h2{

        font-size:22px;

    }

    h3{

        font-size:18px;

    }

}