.search {
    display: block;
    background: none;
    top: 2px;
    width: 50px;
    font-size: 30px;
    border: none;
    z-index: 200;
    transition: all 200ms ease;
}

#search {
    display: block;
    position: fixed;
    top: 50px;
    left: 25%;
    right: 250%;
    padding: 5px;
    width: 50%;
    font-size: 20px;
    z-index: 200;
    transition: 200ms;
}

#results {
    display: none;
    position: fixed;
    top: 100px;
    left: 25%;
    right: 250%;
    width: 50%;
    font-size: 20px;
    z-index: 200;
    transition: all 200ms ease;
}

#results li {
    list-style: none;
}

#results li a {
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    transition: all 200ms ease;
}

#results li a small {
    transition: all 200ms ease;
}

.results-open.site {
    filter: blur(5px);
    opacity: 0.5;
    pointer-events: none;
    transition: filter 0.3s ease, opacity 0.6s ease;
}

@media (hover: hover) {
    .search:hover,
    .search:focus {
        transform: scale(none);
    }
}

@media (max-width: 768px) {
    .search {
        right: 60px;
    }

    #search {
        position: fixed;
        top: 50px;
        left: 5%;
        right: 5%;
        width: 90%;
        font-size: 20px;
        transition: 200ms;
    }

    #results {
        display: none;
        position: fixed;
        top: 95px;
        left: 5%;
        right: 5%;
        width: 90%;
        font-size: 10px;
        transition: all 200ms ease;
    }

    #results li {
        list-style: none;
    }

    #results li a {
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
        transition: all 200ms ease;
    }

    #results li a small {
        transition: all 200ms ease;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .search {
        color: #fff;
    }

    #search {
        background-color: #111;
        border: solid 2px #555;
        color: #fff;
    }

    #results {
        background-color: #111;
    }

    #results li a {
        color: #8bc3ff;
    }

    #results li a small {
        color: #ccc;
    }

    @media (hover: hover) {
        #results li a:hover,
        #results li a:focus {
            color: #0063cc;
            text-decoration: underline;
        }

        #results li a small:hover,
        #results li a small:focus {
            color: #ccc;
            text-decoration: underline;
        }

        .search:hover,
        .search:focus {
            color: #8bc3ff;
        }
    }
}

@media (prefers-color-scheme: light) {
    .search {
        color: #000;
    }

    #search {
        background-color: #eee;
        border: solid 2px #ddd;
        color: #000;
    }

    #results {
        background-color: #eee;
    }

    #results li a {
        color: #4da3ff;
    }

    #results li a small {
        color: #999;
    }

    @media (hover: hover) {
        #results li a:hover,
        #results li a:focus {
            color: #0063cc;
            text-decoration: underline;
        }

        #results li a small:hover,
        #results li a small:focus {
            color: #999;
            text-decoration: underline;
        }

        .search:hover,
        .search:focus {
            color: #0063cc;
        }
    }
}