*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font:16px/1.5 sans-serif;
    color:#fff;
    text-align:center;
    overflow:hidden;
}

video,
.overlay{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
}

video{
    object-fit:cover;
    z-index:1;
}

.overlay{
    background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.9));
    z-index:2;
}

.container{
    position:relative;
    z-index:10;
    max-width:400px;
    margin:auto;
    padding:80px 20px;
}

.logo{
    display:block;
    width:100px;
    margin:15px auto;
    opacity:0;
}

button{
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    cursor:pointer;
}

.join-btn{
    position:fixed;
    top:70%;
    left:50%;
    transform:translate(-50%,-50%);
    width:min(300px,90vw);
    padding:20px;
    background:#25D366;
    color:#fff;
    font:700 20px sans-serif;
	text-shadow:0 2px 4px rgba(255,0,0,.5);
    border-radius:50px;
    box-shadow:0 0 20px rgba(37,211,102,.6);
}

.join-btn:hover{
    background:#2EEB72;
    transform:translate(-50%,-53%) scale(1.05);
    box-shadow:
        0 0 25px rgba(37,211,102,.8),
        0 0 50px rgba(37,211,102,.5);
}