.container {
    margin-top: 1em;
}

h5, p {
    margin-top: 0.5em;
}

label {
    display: inline-block;
}

.viewport {
    display: inline-block;
    position: relative;
}

img, video, #note {
    display: none;
    max-width: 100%;
}

#imgUrl {
    width: 25em;
    max-width: 100%;
}

#imgUrl.active {
    color: #ffffff;
    background-color: #33C3F0;
}

#imgUrl.active ~ .viewport > #img,
#imgUrl.active ~ #note,
#imgBtn.button-primary ~ .viewport > #img,
#videoBtn.button-primary ~ .viewport > #video {
    display: block;
}

#canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#encoding {
    margin-right: 1em;
}

pre {
    font-size: 1.35rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}