@font-face {
    font-family: Poppins;
    src: url(../web/fonts/Poppins.ttf);
}

@font-face {
    font-family: Poppins-Light;
    src: url(../web/fonts/Poppins-Light.ttf);
}

:root {
--color-primary: #DBB10D;
--letter-primary: #999999;
--letter-secondary: #cacaca;
--overback: #cacaca07;
--background: radial-gradient(circle, rgb(49, 48, 48) 0%, #242425 64%);
--button-hover: #bb980a;
}

html,
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    user-select: none;
    background-color: transparent !important;
    font-family: Poppins-Light;
    overflow: hidden;
}

#selectcar-container {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--background);
    color: var(--letter-primary);
    font-size: 0.8vw;
    text-transform: uppercase;
    height: 2.5vw;
    width: auto;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    top: 50%;
    bottom: 50%;
    border-radius: 0.2vw;
}



#middle-container {
    position: relative;
    display: none;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    width: 70vw;
    height: 15vw;
    top: 17vw;
}

.header {
    display: flex;
    align-items: flex-end;
    align-content: center;
    justify-content: center;
    width: 60vw;
    height: 4vw;
    gap: 1vw;
}



.search-vehicles {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    background: var(--background);
    width: 13vw;
    height: 2.5vw;
    border-radius: 0.2vw;
}

#search-icon {
    position: absolute;
    left: 7.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    width: 2vw;
    height: 2vw;
}

.input-text {
    display: flex;
    background-color: transparent;
    text-align: center;
    text-transform: uppercase;
    outline: none;
    appearance: none;
    border-top: none;
    border-left: none;
    border-right: none;
    color: var(--letter-primary);
    border-bottom: none;
    border-width: 0.1vw;
    font-size: 0.8vw;
    font-family: Poppins;
    width: 9vw;
    height: 2vw;
}

input:focus {
    outline: none;
    box-shadow: none;
    font-family: Poppins;
    font-size: 0.8vw;
    color: var(--letter-primary);
    text-transform: uppercase;


}

.category-vehicles {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--background);
    width: 41vw;
    font-size: 0.8vw;
    height: 2.5vw;
    gap: 1vw;
    border-radius: 0.2vw;
}

.scroll-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64vw;
    height: 8vw;
}

.cards-vehicles {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 55vw;
    height: 8vw;
    overflow-x: hidden;
}

.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--background);
    color: var(--letter-primary);
    width: 13vw;
    height: 7vw;
    margin-right: 1vw;
    flex-shrink: 0;
    border-radius: 0.2vw;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--color-primary);
    border-bottom-width: 0.2vw;
    border-bottom-style: solid;
}

.card-category {
    display: flex;
    justify-content:center;
    align-items: flex-end;
    text-transform: uppercase;
    font-family: Poppins;
    font-weight: 900;
    color: var(--color-primary);
    font-size: 0.6vw;
    width: 13vw;
    height: 2vw;
}

.card-image {
    display: flex;
    width: 13vw;
    height: 7.5vw;
    background-image: url("../web/images/no_image.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 55%;
   
}

.card-info {
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    color: var(--letter-primary);
    font-weight: 500;
    font-size: 0.8vw;
    font-family: Poppins;
    width: 11vw;
    height: 2.5vw;
}

.card-model {
    display: flex;
}

.money-tag {
    color: var(--color-primary);
}

.arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vw;
    color: var(--background);
    width: 4vw;
    height: 5vw;
}


/** CATEGORY **/

.category {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--letter-primary);
    font-family: Poppins;
    text-transform: uppercase;
    height: 1.0vw;
    padding-left: 0.1vw;
    padding-right: 0.1vw;
}


.category.active {
    font-weight: 600;
    color: var(--color-primary);
    border-bottom-color: #DBB10D;
    border-bottom-style: solid;
    border-bottom-width: 0.1vw;
}






/** VEHICLE INFO **/

#left-container {
 position: absolute;
 display: none;
 justify-content: flex-start;
 align-items: center;
 flex-direction: column;
 font-family: Poppins-Light;
 background: var(--background);
 border-radius: 0.3vw;
 text-transform: uppercase;
 font-weight: 500;
 width: 15vw;
 height: 28vw;
 right: 1vw;
 top: 7vw;
}


.vehicle-title {
    display: flex;
    justify-content: center;
    font-size: 2vw;
    color: var(--color-primary);
    font-weight: 400;
    border-bottom-color: #DBB10D;
    border-bottom-style: solid;
    border-bottom-width: 0.2vw;
    height: 2.8vw;
}

.vehicle-price {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: var(--letter-secondary);
    font-size: 1vw;
    height: 1.5vw;
    width: 14vw;

}

.vehicle-specs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 10vw;
    width: 15vw;
}

.spec-title {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    color: var(--letter-secondary);
    font-size: 1vw;
    height: 2vw;
    width: 14vw;
}

.status-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 1.2vw;
    width: 14vw;
    border-radius: 0.2vw;
    background: var(--overback);
}

#acceleration,
#brake,
#max-speed {
    background-color: var(--color-primary);
    height: 1.2vw;
    width: 12vw;
    border-radius: 0.2vw;
    transition: width 0.4s ease-in-out;
}

.vehicle-extras {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15vw;
    height: 3vw;
}

.container-capacity,
.container-seats {
    display: flex;
    flex-direction: column;
    width: 7vw;
    height: 3vw;
}

.container-capacity {
    align-items: flex-end;
}

.extras-title {
    display: flex;
    color: var(--letter-secondary);
    font-size: 1vw;
    width: 7vw;
    height: 1.5vw;
}

.extras-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--overback);
    height: 1.5vw;
    width: 6vw;
    font-size: 0.8vw;
    font-weight: 500;
    color: var(--letter-primary);
    border-radius: 0.3vw;
}

.vehicle-colors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: var(--overback);
    height: 7vw;
    width: 14vw;
    margin-top: 0.3vw;
    border-radius: 0.2vw;
}

.pallete-color {
    width: 2.3vw;
    height: 1.7vw;
    margin-left: 0.2vw;
    margin-right: 0.2vw;
    border-radius: 0.3vw;
}

.vehicle-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14vw;
    height: 2.7vw;
    margin-top: 0.3vw;
    gap: 1vw;

}

.vehicle-test,
.vehicle-buy {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    width: 7vw;
    height: 2.7vw;
    font-size: 1vw;
    color: white;
    border-radius: 0.2vw;
    font-weight: 500;
}

.vehicle-buy:hover,
.vehicle-test:hover {
    background-color: var(--button-hover);
    width: 7.1vw;
    height: 2.8vw;
}

/** TEST DRIVE **/

.testdrive {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--background);
    width: 10vw;
    height: 6vw;
    border-radius: 0.3vw;
    bottom: 25vw;
    right: 2vw;
    color: var(--letter-primary);
    font-size: 1.3vw;
    font-family: Poppins;
    gap: 0.5vw;
}

.testdrive-title {
    color: var(--color-primary);
    font-size: 1.6vw;
    font-family: Poppins;
    border-bottom-color: #DBB10D;
    border-bottom-style: solid;
    border-bottom-width: 0.2vw;
}



#red {
    background-color: #750c0a;
}
#green {
    background-color: #206d0f;
}
#blue {
    background-color: #0f0d83;
}
#softpurple {
    background-color: #6E0B44;
}
#yellow {
    background-color: #DBB10D;
}
#cyan {
    background-color: #0D7861;
}
#darkpurple {
    background-color: #391073;
}
#lightbrown {
    background-color: #77400C;
}
#gray {
    background-color: #65615F;
}
#white {
    background-color: #ffffff;
}
#grafite {
    background-color: #3d3d3d;
}
#black {
    background-color: #000000;
}

#lightblue {
    background-color: #15428f;
}

#lightyellow {
    background-color: #b1ac2a;
}

#pink {
    background-color: #ac49b9;
}