html, body {
    height: 100%;
    overflow: hidden;
}
body {
    margin: 0;
    background-color: #286593;
}   

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.video-wrapper {
    width:97%;
}

iframe {
    border: 3px solid #e5e5e5;
}

.snow {
    width: 100vw;
    height:100vh;
    position: absolute;
}

.snow div {
    position: absolute;
    background-size: 100% 100%;
}

.flake1 {
    background: url(../img/Snowflake.svg) no-repeat 0 0;
    width:30%;
    height: 30%;
    left: -10vw;
    opacity:.9;
}

.flake2 {
    background: url(../img/Snowflake2.svg) no-repeat 0 0;
    width: 20%;
    height: 20%;
    top: 68vh;
    left: -3vw;
    opacity:.7;
}

.flake3 {
    background: url(../img/Snowflake2.svg) no-repeat 0 0;
    width:30%;
    height: 30%;
    top: 80vh;
    left: 7vw;
}

.flake4 {
    background: url(../img/Snowflake2.svg) no-repeat 0 0;
    width: 30%;
    height: 30%;
    top: -7vh;
    right: -7vw;
    transform: rotate(16deg);
}

.flake5 {
    background: url(../img/Snowflake.svg) no-repeat 0 0;
    width: 15%;
    height: 15%;
    top: 75vh;
    right: 12vw;
    opacity:.7;
}

.flake6 {
    background: url(../img/Snowflake.svg) no-repeat 0 0;
    width: 19%;
    height: 20%;
    top: 77vh;
    right: -2vw;
    transform: rotate(16deg);
}

@media (min-width: 576px) { 
    .video-wrapper {
        width:95%;
    }

 }

@media (min-width: 768px) { 
    .video-wrapper {
        width:85%;
    }

 }

@media (min-width: 992px) { 
    .video-wrapper {
        width:85%;
    }
    
 }

@media (min-width: 1200px) { 
    .video-wrapper {
        width:80%;
    }

    .flake1 {
        width: 42%;
        height: 42%;
        left: -11vw;
    }
    
    .flake2 {
        width: 25%;
        height: 25%;
        top: 50vh;
        left: -10vw;
        }
    
    .flake3 {
        width: 35%;
        height: 35%;
        top: 69vh;
        left: -5vw;
    }
    
    .flake4 {
        width: 35%;
        height: 35%;
        top: -6vh;
        right: -11vw;
    }
    
    .flake5 {
        width: 15%;
        height: 15%;
        top: 81vh;
        right: 14vw;
    }
    
    .flake6 {
        width: 20%;
        height: 20%;
        top: 84vh;
        right: 2vw;
    }

 }

@media (min-width: 1400px) { 
    .video-wrapper {
        width:70%;
    }

    .flake1 {
        width:50%;
        height: 50%;
        left: -10vw;
    }
    
    .flake2 {
        width:30%;
        height: 30%;
        top: 50vh;
        left: -8vw;
    }
    
    .flake3 {
        width:40%;
        height: 40%;
        top: 80vh;
        left: -8vw;
    }
    
    .flake4 {
        width:40%;
        height: 40%;
        top: -2vh;
        right: -16vw;
    }
    
    .flake5 {
        width: 17%;
        height: 17%;
        top: 78vh;
        right: 14vw;
    }
    
    .flake6 {
        width:22%;
        height: 22%;
        top: 81vh;
        right: 0vw;
    }

 }