﻿:root {
    --bs-dark-rgb: 0,0,0;

    /* porsche colors */
    --bs-gray-100: #DAD9DE; 
    --bs-gray-200: #B5B4BA;
    --bs-gray-300: #737278;
    --bs-gray-400: #403F45;
    --bs-body-color: #000;
}

@font-face {
    font-family: 'Porsche Next Regular';
    src: url('fonts/PorscheNextWLa-Regular.woff2');
/*    src: local('Comfortaa Regular'), local('Comfortaa'), 
        url('Comfortaa.ttf') format('truetype'), 
        url('Comfortaa.svg#font') format('svg');*/
}

* {
    font-family: 'Porsche Next Regular', Arial, sans-serif;
}

a {
    color:black;
}

    a:hover, a:active {
        color: var(--bs-gray-300);
    }

.porsche-next-regular-heading {
    font-family: 'Porsche Next Regular';
    letter-spacing: normal;
}

.porsche-next-regular-subheading {
    font-family: 'Porsche Next Regular';
    letter-spacing: 0.25rem; /*task specifies '50' not sure what that translates to in css styles .5 em is best guess*/
    text-transform: uppercase;
}

.text-gray1 {
    color: var(--bs-gray-100);
}

.text-gray2 {
    color: var(--bs-gray-200);
}

.text-gray3 {
    color: var(--bs-gray-300);
}

.text-gray4 {
    color: var(--bs-gray-400);
}

.btn.btn-primary {
    color: #fff !important;
    background-color: #000 !important;
    border-color: #000 !important;
}

    .btn.btn-primary:hover,
    .btn.btn-primary:active,
    .btn.btn-primary:focus {
        color: #000 !important;
        background-color: var(--bs-gray-300) !important;
        border-color: var(--bs-gray-300) !important;
    }

.navbar-logo{
    padding-left: 5px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--bs-gray-400);
}

header {
    border-bottom: 2px solid var(--bs-gray-200);
}

hr:not([size]) {
    height: 2px;
}

p {
    text-align: justify;
    text-align-last: left;
}

.table-sm > :not(caption) > * > * {
    padding: 0.25rem 0.25rem 0.25rem 1.25rem;
}

.menuActive {
    background-color: var(--bs-gray-100);
}
.indentedItems {
    color: var(--bs-gray-300);
}
.table{
    color: #000;
}

body {

}