/*
|--------------------------------------------------------------------------
| PROJECT REDLINE - GLOBAL MAIN STYLES
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| PROJECT REDLINE - THEME VARIABLES
|--------------------------------------------------------------------------
*/

:root {

    --primary-color:
        #FF3434;

    --secondary-color:
        #111111;

    --background-color:
        #050505;

    --card-background:
        rgba(255,255,255,0.04);

    --card-border:
        rgba(255,255,255,0.06);

    --text-color:
        #FFFFFF;

    --text-muted:
        rgba(255,255,255,0.45);
}

/*
|--------------------------------------------------------------------------
| GLOBAL RESET
|--------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    overflow-x: hidden;
    overflow-y: auto;

    scroll-behavior: smooth;
}

/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

body {
    background:
        var(--background-color);

    color:
        var(--text-color);

    font-family:
        Inter,
        Arial,
        sans-serif;

    -webkit-overflow-scrolling: touch;   
}

/*
|--------------------------------------------------------------------------
| APP ROOT
|--------------------------------------------------------------------------
*/

#app {
    width: 100%;
    min-height: 100vh;
}

/*
|--------------------------------------------------------------------------
| GLOBAL PAGE LOCK
|--------------------------------------------------------------------------
*/

body.page-lock {
    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| GLOBAL SCROLLBAR
|--------------------------------------------------------------------------
*/

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background:
        rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.12);
}

::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255, 255, 255, 0.22);
}

/*
|--------------------------------------------------------------------------
| IMAGES
|--------------------------------------------------------------------------
*/

img {
    max-width: 100%;

    display: block;
}

/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

button {
    font-family: inherit;
}

/*
|--------------------------------------------------------------------------
| INPUTS
|--------------------------------------------------------------------------
*/

input,
textarea,
select,
button {
    outline: none;
}

/*
|--------------------------------------------------------------------------
| MOBILE SAFE AREA
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    body {

        padding-bottom:
            120px;
    }
}

/*
|--------------------------------------------------------------------------
| MOBILE NAVBAR PRIORITY
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .navbar {

        z-index: 999999999 !important;
    }

    .navbar-link.race {

        z-index: 999999999 !important;
    }
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE DESKTOP SYSTEM
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| LARGE LAPTOPS
|--------------------------------------------------------------------------
*/

@media (max-width: 1600px) {

    .garage-main {

        gap: 28px;
    }

    .garage-car-name {

        font-size: 36px;
    }
}

/*
|--------------------------------------------------------------------------
| LAPTOP
|--------------------------------------------------------------------------
*/

@media (max-width: 1400px) {

    .navbar {

        padding:
            0
            20px;
    }

    .navbar-left {

        gap: 18px;
    }

    .navbar-nav {

        gap: 8px;
    }

    .navbar-link {

        padding:
            0
            14px;

        font-size: 13px;
    }

    .garage-main {

        grid-template-columns:
            1fr
            0.9fr;

        gap: 24px;
    }

    .garage-car-name {

        font-size: 32px;
    }
}

/*
|--------------------------------------------------------------------------
| SMALL LAPTOP
|--------------------------------------------------------------------------
*/

@media (max-width: 1200px) {

    .navbar-level-card,
    .navbar-profile-card {

        transform:
            scale(0.92);
    }

    .garage-main {

        grid-template-columns:
            1fr;
    }

    .garage-car-section {

        max-height: 440px;
    }

    .garage-info {

        max-width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| NOTEBOOKS
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {

    .navbar {

        height: 78px;
    }

    .navbar-project-logo {

        height: 30px;
    }

    .navbar-link {

        height: 42px;

        padding:
            0
            12px;

        font-size: 12px;
    }

    .garage-page {

        padding:
            96px
            18px
            120px;
    }

    .garage-car-name {

        font-size: 28px;
    }
}

/*
|--------------------------------------------------------------------------
| ULTRAWIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 2200px) {

    .garage-main {

        max-width: 2200px;

        margin:
            0 auto;
    }

    .garage-car-wrapper {

        max-width: 1200px;
    }
}

/*
|--------------------------------------------------------------------------
| MOBILE FIXES
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    html,
    body {

        overflow-x: hidden;

        overscroll-behavior-y: auto;
    }

    body {

        padding-bottom: 120px;
    }

    #app {

        overflow-x: hidden;
    }
}

/*
|--------------------------------------------------------------------------
| MOBILE LAYER FIX
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    html,
    body,
    #app {

        overflow-x: hidden;
    }

    .navbar,
    .navbar-nav,
    .navbar-link.race {

        transform:
            translateZ(0);

        will-change: transform;
    }
}