#frame {
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
}

#captionsHolder {
    margin: 0;
    padding: 0;
}

#captions {
    position: fixed;
    width: 100vw;
    height: 7vh;
    font-size: 3vh;
    line-height: 7vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
    text-align: center;
    color: white;
    font-family: Alata;
    visibility: hidden;
}

.sg-dtn-reset {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.sg-dtn-content {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-image: url("../images/bg-texture-trolley.png");
    background-repeat: repeat;
}

.sg-dtn-canvas {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

@font-face {
    font-family: 'Joint';
    src: url('../font/JOINTBYPIZZADUDE.otf') format('opentype');
}

@font-face {
    font-family: 'Alata';
    src: url('../font/Alata-Regular.ttf') format('truetype');
}