html { box-sizing: border-box; }
html *, html *:before, html *:after { box-sizing: inherit; }

html, body {
    width: 100%; margin: 0; padding: 0;
}

body {
    background: #ffe45f; color: #312c49;
}

.experience {
    width: 100%; min-height: 100vh; padding: 40px;
    display: flex; align-items: center; justify-content: center;
}

.experience__brand { width: 380px; position: relative; z-index: 2; fill: #ffffff; }
.experience__brand img, .experience__brand svg { display: block; width: 100%; }

.experience:before {
    content: ""; display: block; width: 100%; height: 100%;
    position: fixed; left: 0; top: 0; border: 20px solid #fff;
    pointer-events: none;
}


#animation_container { width: 100% !important; height: 0 !important; padding-top: 47.37% !important; position: relative !important; }
#animation_container canvas, #animation_container #dom_overlay_container {
    width: 100% !important; height: 100% !important; position: absolute !important; left: 0 !important; top: 0 !important;
}



@media only screen and (max-width: 767px) {
    .experience { padding: 30px; }
    .experience__brand { width: 230px; }
    .experience:before { border: 15px solid #fff; }
}