:root {
    --navy:       #0d1f3c;
    --navy-mid:   #162d52;
    --gold:       #c9a84c;
    --gold-light: #e8c97a;
    --cream:      #f5f0e8;
    --cream-dark: #e8e0d0;
    --text-dark:  #0d1f3c;
    --text-mid:   #3a4a60;
    --text-light: #8394aa;
    --white:      #ffffff;
    --red-alert:  #c0392b;
    --error-background:  rgba(230, 143, 143, 0.8);
    --success-background: rgba(0, 255, 0, 0.8);

    --font-display: 
    --font-body: Helvetica, sans-serif;
}

/* Reset and Base ***********************************************************/

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--cream);
    color: var(--text-dark);
    font-size: 16px;
    line-height: 1.7;
}


/* Main container *****************************************************/

.container {
    margin: 10px;
}


/* Navbar Container *****************************************************/


.navbar-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}


/* Logo Shield **********************************************************/


.logo-shield {
    width: 36px;
    height: 42px;
    background: var(--gold);
    clip-path: polygon(50% 0%, 100% 15%, 100% 60%, 50% 100%, 0% 60%, 0% 15%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    grid-area: logo-shield;
    padding: 5px;
    margin: 5px;
}


/* Logo Container ****************************************************/


.logo-container {
    margin-bottom: 20px;
}


/* Logo Text *********************************************************/


.logo-text {
    grid-area: logo-text;
}

.logo-sub-text {
    grid-area: logo-sub-text;
    font-size: 18px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

#logo-text-h1 {
    text-shadow: 2px 2px silver;
}

#logo-sub-text-h3 {
    text-shadow: 2px 2px silver;
}

.logo-container {
    background-color: var(--cream-dark);
    border-radius: 6px;
    display: grid;
    grid-template-columns: 50px 400px;
    grid-template-rows: auto;
    grid-template-areas:
	"logo-shield logo-text"
	". logo-sub-text";
    padding: 24px;
}


/* Body ************************************************************/


h1 {

    font-family: Georgia, Times, 'Times New Roman', serif;
}

h2 {

    font-family: Georgia, Times, 'Times New Roman', serif;
}


/* Body Container and Frame ***************************************/


.body-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 20px;
    gap: 10px;
   
}

.body-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-color: var(--text-dark);
    border-width: 10px;
    background-color: var(--cream-dark);
    margin: 10px;
    padding: 40px;
    border-radius: 6px;

}


/* Index **************************************************/


.index-button-container {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 10px;

}

.index-button-form {
    /* SMALL BUTTONS: */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */

    /* BIG BUTTONS (grid): */
    display: grid;
    grid-template-columns: auto;

    padding: 10px;
}

.index-image-container {
    display: flex;
    margin: 10px;
}

/* Dashboards *************************************************/

.bike-cards-container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    
}

.bike-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

/* Images *****************************************************/

img {
    max-width: 100%;
    border-radius: 6px;
}

.bike-card-image {
    max-width: 400px;
}

/* Tables ****************************************************/



th, td {
    border: 1px solid darkgrey;
    border-radius: 6px;
    padding: 10px 25px 10px 25px;
    text-align: right;
}

/* Buttons ***************************************************/


button {
    background-color: var(--gold);
    border-radius: 6px;
    border-color: var(--gold);
    padding: 10px;
    color: var(--cream)
}

button:hover {
    background-color: var(--gold-light);
}


/* Success alert *********************************************/


.success-alert {
    background-color: var(--success-background);
    border-radius: 6px;
    padding: 5px;
}

.alert-close-button {
    color: var(--cream);
    background-color: var(--success-background);
    border-color: var(--cream);
    border-width: 2px;
}


/* Error popup ***********************************************/


.error-popup {
    background-color: var(--error-background);
    border-radius: 6px;
    padding: 5px;
}


.error-close-button {
    color: var(--cream);
    background-color: var(--error-background);
    border-color: var(--cream);
    border-width: 2px;
}


/* forms *****************************************************************/


.two-part-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--text-mid)
}

input {
    border-radius: 6px;
    border-width: 0px;
}

input.valid {
    border-color: var(--success-background);
    border-width: 4px;
}

input.invalid {
    border-color: var(--error-background);
    border-width: 4px;
}

.form-group {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 20px;
    row-gap: 20px;
}

.investigation-status-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* Sub-text ***********************************************/


.sub-text {
    color: var(--text-mid);
}


/* Footer **************************************************/


.footer {
    text-align: center;
    font-size: 0.75rem;
}