body, html {
    height: 100%;
}
header {
    position: relative;
    height: 100%;
    overflow: hidden;
}
header::after {
    content:'';
    background: linear-gradient(to top right, rgba(247,121,125,0.85), rgba(198,255,221,0.4));
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
img {
    max-width:100%;
    z-index:1;
}
img, video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}
video {
    min-width:100%;
    min-height:100%;
}

.burger {
    width: 30px;
    height: 30px;
    border:2px solid #fff;
    border-radius:5px;
    position: fixed;
    top:10px;
    right:10px;
    z-index:2;
    cursor:pointer;
    transition:.3s all ease-in-out;
}
.burger:hover {
    border-color:tomato;
}
.burger:hover span:nth-of-type(2) {
    opacity:0;
}
.burger:hover span:first-child {
    top:50%;
    transform:translate(-50%,-50%) rotate(45deg);
}
.burger:hover span:last-child {
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
}
span {
    position: absolute;
    width: 70%;
    height: 3px;
    background: #fff;
    border-radius:3px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:.3s all ease-in-out .3s;
}
.burger span:first-child {
    top:calc(50% - 6px);
}
.burger span:last-child {
    top:calc(50% + 6px);
}