:root {
    --modal-background-color: rgba(17, 17, 27, 0.4);
    --modal-content-background-color: rgba(30, 30, 46, 0.7);
    --modal-border-color: #f5e0dc;
    --search-result-li: rgba(49, 50, 68, 0.8);
    --search-result-li-hover: rgba(49, 50, 68, 1);
    --search-result-title : #b4befe;

}
.light-mode {
    --modal-background-color: rgba(220, 224, 232, 0.4);
    --modal-content-background-color: rgba(239, 241, 245, 0.7);
    --modal-border-color: #dc8a78;
    --search-result-li : rgba(204, 208, 218, 0.8);
    --search-result-li-hover : rgba(204, 208, 218, 1);
    --search-result-title : #7287fd;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;  
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--modal-background-color);  
}

.modal-content {
    background-color: var(--modal-content-background-color);
    margin: 15% auto;   
    padding: 20px;
    border: 1px solid #888;
    width: 80%;     
    position: relative;
}

#search-input {
    width: calc(100% - 70px); /* Full width minus 70px */
    border: none;   
    padding: 10px;      
    box-sizing: border-box;     
    font-size: 16px;    
    background-color: var(--mantle-color);  
    color: var(--text-color);   
    border-bottom: 1px solid var(--modal-border-color);   
}
#search-input:focus {
    outline: none; /* Remove the default focus style */
}
.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#search-results {
    margin-top: 40px;
    padding: 0;
}

#search-results li {
    list-style-type: none;
    padding: 10px;
    border-bottom: 1px solid #f5e0dc;
    background-color: var(--search-result-li);
    margin: 10px 10px;
    cursor: pointer;
}

#search-results li:hover {
    background-color: var(--search-result-li-hover);
}

#search-results li a {
    text-decoration: none;
}

#search-results  h2{
    color: var(--search-result-title);
}