:root {
    --zp-red: #e30713;
}

/* nav styling ==================== */
.zp-bg-blur {
    background-color: #0006 !important;
    backdrop-filter: blur(5px) !important;
}

/* util classes =================== */
.zp-text-shadow {
    text-shadow: 0 0 5px #0008 !important;
}

.zp-red {
    color: var(--zp-red) !important;
}

.zp-hover-red {
    transition: color 100ms linear !important;
}

.zp-hover-red:hover {
    color: var(--zp-red) !important;
}

.zp-dropdown-item {
    transition: background-color 100ms linear;
    color: white !important;
    background-color: transparent !important;
}

.zp-dropdown-item:hover {
    background-color: #0002 !important;
}

/* form control ========================= */

.zp-form-control {
    background: transparent !important;
    color: white !important;

    border: 1px solid #bbb !important;

    box-shadow: none !important;

    transition: all 100ms linear !important;
}

.zp-form-control::placeholder {
    color: #aaa !important;
}

.zp-form-control:focus, .zp-form-control:active {
    border: 1px solid #fff !important;
}