body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

video {
    width: 100%;
    height: 100%;
}

.hide {
    display: none;
}

.zoom-in {
    cursor: zoom-in;
}

.pointer {
    cursor: pointer;
}

.selectable:hover {
    opacity: 0.7;
}

.bg-loader {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 4;
}

.loader {
    width: 50vh;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.border {
    border: 1px gray solid;
}

.mtop-half {
    margin-top: .5em;
}

@for $i from 1 through 5 {
    .mtop-#{$i} {
        margin-top: #{$i}em;
    }

    .mbot-#{$i} {
        margin-bottom: #{$i}em;
    }

    .mleft-#{$i} {
        margin-left: #{$i}em;
    }

    .mright-#{$i} {
        margin-right: #{$i}em;
    }
}