input,.button,textarea
{
    font-family:  var(--main-font);
    padding:10px;
    border-radius: 8px;
    border-color: var(--accent-strong);
    border-style: inset;
    border-width: 2px;
    background: var(--tag);
    color: var(--text);
}
.button
{
    display: inline-flex;       
    align-items: center;        /* Center vertically */
    justify-content: center;    /* Center horizontally */
    gap: 8px;
    background: var(--accent);
    color:var(--accent-text);
    border:none;
    cursor:pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.button:hover
{
    background-color: var(--accent-soft); /*sets the background of the colour (area is the padding)*/
    transform: scale(1.05);
}
.button:active 
{
    transform: scale(0.95);
}
.button img
{
    height: 20px;
}
input:focus, textarea:focus 
{
    outline: none;
    border-color: var(--accent);
    background: var(--card);
}
input::placeholder, textarea::placeholder 
{
    color: var(--accent-soft);
}


/*links*/
a 
{
    color: var(--link);
}
a:hover
{
    color: var(--accent-soft);
}
a img
{
    height: 1em;
    vertical-align: top;
    padding-right: 0.2em;
}


summary:hover 
{
    color: var(--accent-strong);
}

.tooltipWrapper 
{
    position: relative;
    display: inline-block;
}
.tooltip 
{
    position: absolute;
    top: -5px;
    left: 105%;
    width: 220px;

    background: var(--accent-soft);
    color: var(--text);
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;

    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
}
.tooltipWrapper:hover .tooltip 
{
    opacity: 1;
    visibility: visible;
}
.tooltipWrapper input:focus + .tooltip 
{
    opacity: 1;
    visibility: visible;
}


.card 
{
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 12px;
    background: var(--card);
    transition: transform 0.15s ease;
}
.card:hover,.card.active 
{
    transform: translateY(-2px);
}
.card.active 
{
    filter: invert(0.05) brightness(0.9)
}
.card h3
{
    padding: 0;
    margin: 5px;
}
.card-grid 
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* creates as many columns as fit, minimum 240px each */
    gap: 12px;
    margin-top: 10px;
}
.tag 
{
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--tag);
    margin-right: 5px;
}
.card summary:hover 
{
    color: var(--text);
}


.autocomplete 
{
    position: relative;
    display: inline-block;
}
.dropdown 
{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    border: 1px solid #ccc;
    background: var(--bg);
    max-height: 200px;
    overflow-y: auto;

    z-index: 1000;
}
.dropdown div 
{
    padding: 8px;
    cursor: pointer;
}
.dropdown div:hover 
{
    background-color: var(--accent);
}