:root
{
    --text: #000000;
    --primary: #5eed87;
    --secondary: #c2ffd4;
    --background: #bbfec0;
    --accent: #d50199;
}

body
{
    background-color: var(--background) !important;
}

h1
{
    color: white !important;
    margin-bottom: 0 !important;
}

a
{
    color: var(--accent) !important;
    text-decoration: none !important;
}

button
{
    color: var(--text) !important;
    background-color: var(--secondary);
    border: 1px solid var(--primary);
    border-radius: 5px !important;
    transition: all 100ms ease-in-out;
    &:hover
    {
        background-color: color-mix(in srgb,var(--primary),#ffffff 30%);
        border: 1px solid var(--secondary);
    }
    &:active
    {
        background-color: var(--primary);
        border: 5px solid var(--secondary);
    }
    &#search-x
    {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    
        height: 35px;
        width: 35px;
        &.hidden
        {
            opacity: 0;
        }
    }
    
}

.list-group-item-warning {
    --bs-list-group-color: black;
    --bs-list-group-bg: #ffc4f2;
    border: 1px #fface9 solid;
    --bs-list-group-action-hover-color: #1d0017;
    --bs-list-group-action-hover-bg: #ffabed;
    --bs-list-group-action-active-color: #000000;
    --bs-list-group-action-active-bg: #ffabed;
    --bs-list-group-active-color: #000000;
    --bs-list-group-active-bg: #ffabed;
    --bs-list-group-active-border-color: #d50199;
}

.header
{
    background-color: var(--primary);
}

input[type=text]
{
    background-color: var(--secondary);
    border: 1px solid var(--primary);
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    &:focus-visible
    {
        border: 1px solid var(--accent);
    }
}

.logo {
    width: auto;
    height: 50px;
    object-fit: contain;
    cursor: pointer;
}

.widthLimited
{
    max-width: 1000px;
    margin: auto;
}

.centralList 
{
    /* fill the remaining space */
    min-height: 80vh;
}

.highlight
{
    background-color: var(--primary);
    border-radius: 5px;
}

#searchBar
{
    width: 100%;
    max-width: 250px;
}

.footer
{
    background-color: var(--primary);
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: 600;
}

.footer a
{
    color: white !important;
}

.nou::before {
    content: "Nou!";
    color: white;
    background-color: var(--accent);
    border-radius: 5px;
    padding: 2px;
}