/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS Variables */
:root {
    --primary-font:"Roboto", sans-sefir;
    --secondary-font:"Nunito", sans-sefir;
    --primary-color:#27545D;
    --secondary-color:#022B3A;
    --highlight-color:#BFDBF7; 
    --highlight-color-light:#F0F0F0;
}

/* Global Styles */
body {
    background-color: white;
    font-family: var(--primary-font);
}

h1,
h2,
h3 {
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    margin-top: 2vh;
}

.lead {
    color: var(--primary-color);
    font-size: large;
    font-family: var(--secondary-font);
}

/* Navigation Bar */
#navbar {
    background-color: var(--secondary-color);
}

/* Footer */
footer {
    font-family: var(--secondary-font);
    background-color: var(--secondary-color);
    color: var(--highlight-color-light);
}

.social-links i {
    color: var(--highlight-color-light);
    font-size: 1.6rem;
    margin-right: 10px;
    margin-left: 10px;
}

.social-links i:hover {
    color: var(--highlight-color);
}

/* Buttons */

.custom-button-primary {
    background-color: var(--primary-color);
    border: none;
    color: white;
}

.custom-button-primary:hover {
    background-color: var(--highlight-color-light);
    color: var(--primary-color);
}

.custom-button-edit {
    background-color: #FADA5E;
}

.custom-button-edit:hover {
    background-color: #FFBF00;
    color: black;
}

.custom-button-delete {
    background-color: #E34234;
    color: white;
}

.custom-button-delete:hover {
    background-color: #FF0000;
    color: white;
}

/* Tables */
/* Remove bootstrap bg colour */
.table{
    --bs-table-bg: none;
    --bs-table-color: none;
}

.custom-table {
    background-color: var(--highlight-color-light);
    color: var(--primary-color);
}

.custom-table-body {
    border: 8px solid white;
}

.custom-update-table {
    background-color: var(--highlight-color-light);
    color: var(--primary-color);
}

#estimatedUpdate {
    font-size: 2rem;
}

/* Home page */
#hero {
    height: 55vh;
    display: flex;
    align-items: center;
}

.rich-text {
    background-color: var(--highlight-color-light);
    margin: 4px;
    padding: 4px;
    min-height: 100px;
    border-radius: 5px;
}

#benefits-list {
    list-style-type: none;
}

#benefits-list li {
    padding-top: 10px;
}

#goal-text {
    font-size: large;
    font-family: var(--secondary-font);
}