.hero {
    width: 100%;
    height: 100dvh;
    position: relative;
}

.video-js {
    width: 100%;
    border: none;
}

.hero-text {
    position: absolute;
    max-width: clamp(300px, 40vw, 350px);
    /* min-width: 350px; */
    color: white;
    padding: 20px 40px 30px 40px;
    margin: auto;

    background: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.hero-main-text {
    font-size: 3.5em;
    font-weight: 900;
}

.hero-sub-text {
    font-size: 1.5em;
}

.hero-desc-text {
    font-size: 1rem;
    margin-top: 10px;
    font-weight: 300;
    line-height: 1.2rem;
}

.login-text {
    margin-top: 32px;
    font-size: 1.2em;
    font-weight: 500;
}

label {
    color: white;
}

i.showpassword {
    right: 10px;
    color: #888;
}