html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100%;
}
body {
background: 
 radial-gradient(circle at 30% 30%, rgba(255, 200, 200, 0.4), transparent 40%),
 radial-gradient(circle at 70% 40%, rgba(200, 255, 250, 0.3), transparent 50%),
 radial-gradient(circle at 40% 70%, rgba(220, 200, 255, 0.3), transparent 45%),
 radial-gradient(circle at 60% 80%, rgba(255, 255, 200, 0.3), transparent 50%),
 linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(240, 240, 255, 0.3)),
 linear-gradient(45deg, rgba(200, 255, 220, 0.2), rgba(255, 200, 255, 0.2)),
 #f5f5f5;
background-blend-mode: screen;
transition: all 0.4s ease;
color: var(--text-primary);
}

[data-theme="dark"] body {
background: 
 radial-gradient(circle at 20% 80%, rgba(135, 206, 250, 0.2) 0%, transparent 50%),
 radial-gradient(circle at 80% 20%, rgba(173, 216, 230, 0.15) 0%, transparent 50%),
 radial-gradient(circle at 40% 40%, rgba(100, 149, 237, 0.15) 0%, transparent 50%),
 radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
 linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
color: var(--text-primary);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
main {
display: flex;
height: calc(100% - 75px);
}
header {
height: 75px;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
position: absolute;
}

header ul {
display: flex;
margin: 0 auto;
padding: 0px;
flex-grow: 1;
max-width: 800px;
}

header ul li {
list-style: none;
flex-grow: 1;
height: 50px;
display: flex;
justify-content: space-evenly;
}

header ul li figure,
header ul li a {
width: 50px;
height: 50px;
margin: 0;
padding: 0;
}

header ul li a {
display: block;
}

header #quickLinks {
max-width: 200px;
}

header #headerMenu {
filter: invert(1);
background-size: 90%;
}

#contentList li {
cursor: pointer;
transition: all 0.2s ease;
position: relative;
z-index: 10;
}

#contentList li:hover {
transform: scale(1.05);
}

#contentList li:active {
transform: scale(0.95);
}

#contentList li img {
opacity: 0.8;
filter: invert(100%);
transition: filter 0.2s, opacity 0.2s;
}

header ul li:hover img {
transform: scale(1.1);
opacity: 0.5 !important;
}

/* Remove old selectedcl coloring, use new color classes instead */
#contentList li.selected-videos img {
filter: none !important;
opacity: 1 !important;
/* Red color for videos */
/* SVGs will be colored using filter for cross-browser support */
filter: invert(17%) sepia(99%) saturate(7492%) hue-rotate(357deg) brightness(97%) contrast(119%) !important;
}
#contentList li.selected-images img {
filter: none !important;
opacity: 1 !important;
/* Yellow color for images */
filter: invert(88%) sepia(80%) saturate(7492%) hue-rotate(1deg) brightness(110%) contrast(110%) !important;
}
#contentList li.selected-sounds img {
filter: none !important;
opacity: 1 !important;
/* Blue color for sounds */
filter: invert(24%) sepia(99%) saturate(7492%) hue-rotate(200deg) brightness(97%) contrast(119%) !important;
}

#mainSearchDiv {
display: flex;
border: solid thin white;
overflow: hidden;
border-radius: 15px;
}
#mainSearchDiv:active,
#mainSearchDiv:hover,
#mainSearchDiv:focus-within {
transform: scale(1.05);
}

#mainSearchDiv:has(> #mainSearch:focus) {
box-shadow: 0 0 15px white;
}

#mainSearchButton {
width: 20%;
min-width: 35px;
height: 30px;
padding: 2px 2px 2px 10px;
box-sizing: border-box;
filter: invert(100%);

transform: scaleX(-1);
}

#mainSearch {
background-color: transparent;
border: none;
height: 30px;
font-size: 18px;
padding: 0 0 0 5px;
color: white;
width: 80%;
}

#mainSearch:focus {
outline: none;
border: none;
}

img {
height: 100%;
width: 100%;
}

h1 {
padding: 0;
margin: 0;
}
h1 {
padding: 0;
margin: 0;
}