Make SVG Mobile Responsive

Question

I came across this amazing looking 404 error page https://codepen.io/dsenneff/pen/mjZgmN

I followed the tutorial here to make the SVG mobile responsive but I couldn't get it to work.

Any hint you can provide would highly be appreciated.

Thanks

CSS

   @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900");

        body,
        html {
            margin: 0;
            padding: 0;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            background-color: #09334f;
            position: relative;
        }
        #yetiSVG {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            display: inline-block;
        }
        #lightSVG {
            position: absolute;
            top: -24rem;
            left: 0;
            overflow: visible;
            display: inline-block;
        }
        .content {
            padding: 5rem 3rem 0 25rem;
            position: relative;
            z-index: 10;
            font-family: "Source Sans Pro", sans-serif;
            color: #fff;
        }
        .content h3 {
            margin: 0 0 0.8rem;
            font-size: 2.625rem;
            font-weight: 900;
            line-height: 120%;
        }
        .content p {
            font-size: 1.25rem;
            font-weight: normal;
            line-height: 150%;
            color: #d1e2ed;
        }
        .content p span {
            text-decoration: line-through;
        }
        svg {
            max-width: 100%;
        }
        .svg-container {
            display: inline-block;
            position: relative;
            width: 100%;
            height: 100%;
            padding-bottom: 100%;
            /* vertical-align: middle; */
            /* overflow: hidden; */
        }