:root {
--bg-color-1: hsla(0,0%,100%,1);
--bg-color-2: hsla(49, 47%, 89%, 1);
--bg-color-3: hsla(49, 16%, 58%, 1);
--bg-img: url(../img/bg-0.png);
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-position: 0 0;
background-image: url("data:image/svg+xml,");
opacity: .5;
}
#bg.reverse {
background-image: url("data:image/svg+xml,")
}
container:first-of-type #bg {
position: absolute;
}
/*
.bg:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100vh;
max-width: 50vw;
background-image: var(--bg-img);
background-position: bottom left;
background-repeat: no-repeat;
background-size: cover;
}
*/
#bg_video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
/* box-shadow: inset 0 0 5vw #000; */
}
#bg_video:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
opacity: .4;
/* box-shadow: inset 0 0 300px 150px #000; */
}
#bg_video video {
width: 100%;
height: 104%;
margin-top: -2%;
object-fit: cover;
opacity: .2;
}
@media screen and (max-width: 500px) {
#bg {
}
}