:root {
    --clr-primary: #6f00ff;
    --clr-primary-dark: #5900ff;
    --clr-primary-darker: #5200d6;
    --clr-primary-light: rgba(111, 0, 255, 0.15);
    --clr-primary-light-2: rgba(115, 0, 255, 0.15);
    --clr-primary-light-3: rgba(119, 0, 255, 0.15);
    --clr-primary-trans: rgba(93, 0, 255, 0.25);
    --clr-primary-trans-2: rgba(102, 0, 255, 0.25);
    --clr-primary-trans-3: rgba(98, 0, 255, 0.25);
    --clr-primary-trans-4: rgba(81, 0, 255, 0.35);
    --clr-primary-trans-dark: rgba(69, 0, 139, 0.25);
    --clr-primary-trans-darker: rgba(51, 0, 139, 0.25);
    --clr-primary-trans-darkest: rgba(46, 0, 139, 0.25);
    --clr-primary-trans-light: rgba(102, 0, 255, 0.15);
    
    --clr-red: #ff0000;
    --clr-red-light: rgba(255, 0, 0, 0.5);
    --clr-red-lighter: rgba(255, 0, 0, 0.75);
    
    --clr-white: #ffffff;
    --clr-white-trans-05: rgba(255, 255, 255, 0.05);
    --clr-white-trans-075: rgba(255, 255, 255, 0.075);
    --clr-white-trans-15: rgba(255, 255, 255, 0.15);
    --clr-white-trans-50: rgba(255, 255, 255, 0.5);
    
    --clr-bg-dark: #080311;
    --clr-bg-darker: rgba(3, 0, 8, 0.95);
    --clr-bg-transparent: rgba(0, 0, 0, 0);

    --clr-shadow: rgba(0, 0, 0, 0.25);
    --clr-scrollbar: rgba(217, 217, 217, 0.25);
}

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

::-webkit-scrollbar {
    display: none;
}

@font-face {
    font-family: "Halvar";
    src: url("../font/HalvarBreit-Black.ttf");
}

#garage_container {
    position: absolute;
    width: 1146px;
    height: 775px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        50% 100% at 0% 0%,
        var(--clr-primary-light-2) 0%,
        var(--clr-bg-transparent) 100%
      ),
      radial-gradient(
        100% 100% at 50% 100%,
        var(--clr-primary-light-3) 0%,
        var(--clr-bg-transparent) 100%
      ),
      var(--clr-bg-darker);
    border-radius: 25px;
}
  
#garage_header {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 5%;
}
  
#garage_header img {
    width: 45px;
    height: 45px;
}
  
#garage_header h1 {
    font-family: "Halvar";
    font-weight: 900;
    font-size: 18px;
    text-align: center;
    color: var(--clr-primary);
    text-shadow: 0px 2px 2px var(--clr-shadow);
    margin: 0;
}
  
#garage_header h2 {
    margin: 0;
    font-family: "Halvar";
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: var(--clr-white);
    text-shadow: 0px 2px 2px var(--clr-shadow);
}
  
#garage_close {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 31px;
    height: 31px;
    position: absolute;
    right: 5%;
    top: 11%;
    background: var(--clr-red-light);
    border: 1px solid var(--clr-red);
    box-shadow: 0px 0px 45px var(--clr-red);
    border-radius: 150px;
    cursor: pointer;
    transition: 250ms;
}
  
#garage_close:hover {
    background: var(--clr-red-lighter);
}
  
#garage_actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 2.8%;
}
  
#garage_actions div {
    width: 44px;
    height: 44px;
    background: radial-gradient(
      77.08% 77.08% at 50% 50%,
      var(--clr-primary-trans-dark) 0%,
      var(--clr-primary-trans) 69.2%
    );
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 250ms;
}
  
#garage_actions div:hover {
    background: var(--clr-primary-dark);
}
  
#garage_actions svg {
    transition: 250ms;
    opacity: 0.5;
}
  
#garage_actions div:hover svg {
    opacity: 1;
}
  
#garage_actions button {
    padding: 10px 16px;
    border: none;
    width: 283px;
    height: 44px;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 13px;
    background: radial-gradient(
      77.08% 77.08% at 50% 50%,
      var(--clr-primary-trans-darker) 0%,
      var(--clr-primary-trans-2) 69.2%
    );
    transition: 250ms;
    cursor: pointer;
    color: var(--clr-white);
    border-radius: 100px;
    transition: 250ms;
}
  
#garage_actions button:hover {
    background: var(--clr-primary-dark);
}
  
:focus {
    outline: none;
}
  
#garage_actions input {
    width: 283px;
    height: 42px;
    border: none;
    text-align: center;
    background: radial-gradient(
      77.08% 77.08% at 50% 50%,
      var(--clr-primary-trans-darker) 0%,
      var(--clr-primary-trans-3) 69.2%
    );
    border-radius: 100px;
    color: var(--clr-white);
    font-family: "Montserrat";
    transition: 250ms;
    font-weight: 600;
    font-size: 13px;
}

#garage_actions input::placeholder {
    color: var(--clr-white);
}
  
#garage_vehicles {
    display: flex;
    justify-content: center;
    margin-top: 2.8%;
}
  
#garage_list {
    display: flex;
    gap: 20px;
    justify-content: left;
    flex-wrap: wrap;
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(303px * 3 + 63px);
    height: calc(226px * 2 + 20px);
    flex-direction: row;
}
  
.garage_vehicle {
    width: 303px;
    height: 226px;
    background: var(--clr-white-trans-05);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: 250ms;
}
  
.garage_vehicle:hover {
    background: var(--clr-white-trans-075);
}
  
.garage_vehicle .garage_vehicle-img {
    width: 50%;
    position: absolute;
    top: 13%;
    opacity: 0.75;
    transition: 250ms;
}
  
.garage_vehicle img:hover {
    opacity: 1;
}
  
.garage_vehicle h1 {
    position: absolute;
    left: 5%;
    top: 1%;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 14px;
    color: var(--clr-white);
}
  
.garage_vehicle h2 {
    padding: 3px 7px;
    position: absolute;
    left: 5%;
    top: 10.5%;
    background: var(--clr-primary-trans-light);
    border-radius: 2px;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: var(--clr-primary-dark);
}
  
.garage_vehicle button {
    padding: 10px 16px;
    gap: 10px;
    position: absolute;
    width: 237px;
    height: 40px;
    border: none;
    bottom: 10%;
    background: radial-gradient(
      77.08% 77.08% at 50% 50%,
      var(--clr-primary-trans-darkest) 0%,
      var(--clr-primary-trans) 69.2%
    );
    border-radius: 100px;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 13px;
    color: var(--clr-white);
    transition: 250ms;
    cursor: pointer;
}
  
.garage_vehicle button:hover {
    background: var(--clr-primary);
    transform: translateY(5px);
}
  
.garage_vehicle div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    right: 4%;
    top: 5%;
}
  
.garage_img img {
    width: 16px;
    opacity: 0.5;
    cursor: pointer;
    transition: 250ms;
}
  
.garage_img img:hover {
    opacity: 1;
}
  
.garage_selected {
    background: var(--clr-primary) !important;
}
.garage_selected2 {
    opacity: 1 !important;
}
  
#garage_changename {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  
#garage_changename input {
    gap: 8px;
    width: 220px;
    height: 45px;
    text-align: center;
    background: var(--clr-white-trans-05);
    border: 1px solid var(--clr-white-trans-15);
    border-radius: 10px;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 13px;
    color: var(--clr-white-trans-50);
}
  
#garage_changename button {
    border: none;
    width: 226px;
    height: 50px;
    background: var(--clr-primary);
    box-shadow: 0px 0px 48px var(--clr-primary-trans-4);
    border-radius: 10px;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    color: var(--clr-white);
    cursor: pointer;
    transition: 250ms;
}
  
#garage_changename button:hover {
    background: var(--clr-primary-darker);
}
  
#garage_changename div {
    position: absolute;
    width: 862px;
    height: 518px;
    z-index: -1;
    background: var(--clr-bg-dark);
    filter: blur(150px);
}