@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&family=Roboto:wght@300;400;500;600&family=Roboto+Flex:wght@700&display=swap");

#warp-zone {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 6000;
    font-family: 'Inter', sans-serif;
}

#warp-zone.open {
    display: block;
}

#wz-overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    transition: opacity .15s;
    /* removed for performance */
    /* backdrop-filter: blur(10px) brightness(0.5); */
    background-color: #000000dd;
    opacity: 0;
}

#wz-overlay.open {
    opacity: 1;
}

#wz-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    opacity: 0;
    transition: opacity .15s;
    background-color: #333335DD;
    border-radius: 1em;
    width: 40em;
    height: 25em;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 1em #00000066;
}

#wz-frame.open {
    opacity: 1;
}

#warp-zone h1 {
    font-size: 1em;
    width: 100%;
    text-align: center;
    color: #777;
    font-weight: 800;
    margin: .6em;
}

#wz-search {
    outline: none;
    border: none;
    background-color: #00000044;
    color: #fff;
    margin: 0 1em;
    padding: .5em;
    border-radius: 0.3em;
    font-size: 1.8em;
}

#wz-results {
    font-size: 1.8em;
    display: flex;
    flex-direction: column;
    background-color: #00000022;
    margin: .6em 1em 1em 1em;
    border-radius: 0.3em;
    height: 100%;
    overflow-y: auto;
    scroll-behavior: smooth !important;
}

/* hide scrollbar */
#wz-results::-webkit-scrollbar {
    display: none;
}

#warp-zone .result {
    padding: .5em;
    border-bottom: 1px solid #ffffff22;
    transition: background-color .15s;
    color: #fff;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

#warp-zone .result.active {
    background-color: #ffffff11;
}

#warp-zone .result .highlight {
    color: #c0ffc0;
    font-weight: 600;
}

#warp-zone #secret-query {
    color: #ffffbb;
}

#warp-zone #secret-query.error {
    color: #ffbbbb;
}