#search-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #f0f0f0;
padding-left: 20px;
display: flex;
align-items: center;
gap: 10px;
transform: translateY(-100%);
transition: transform 0.3s ease;
z-index: 1000;
}

#search-bar.active {
transform: translateY(0);
}


#searchInput {
margin-top:20px;
padding: 10px 12px;
border: 1px solid #ccc;
font-size: 14px;
outline: none;
}

#searchInput::placeholder {
font-family:'Anaheim', sans-serif;
font-size: 14px;
color:#aaa;
}



#search-bar button {
padding: 6px 16px;
border: none;
background: #111;
color: #fff;
cursor: pointer;
font-size: 14px;
font-family:'Anaheim', sans-serif;
letter-spacing:1px;
text-transform:uppercase;
}

#search-bar button:hover {
background: #595689;
}

#search-icon {
position: fixed;
top: 20px;
right: 20px;
font-size: 24px;
cursor: pointer;
z-index: 1001;
user-select: none;
}

mark {
background: #ffe000;
color:black;
}