@font-face {
	font-family: "Open Sans Regular";
    src: url('../font/OpenSans-Regular.ttf'); /* see font/Apache License.txt */
    font-display: swap;
}

@font-face {
	font-family: "Roboto Mono Regular";
    src: url('../font/RobotoMono-Regular.ttf'); /* see font/Apache License.txt */
    font-display: swap;
}

body, html {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    user-select: none;
}

body {
	font-family: "Open Sans Regular", Arial, sans-serif;
	font-size: 4.5vw;
	line-height: 1.4;
    color: #000000;
    background-color: #E0E0E0;
}

a, a:hover, a:visited, a:active {
    color: #0012FF;
    word-break: break-word;
}

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.hr {
    display: block;
    margin: 1em 0;
    height: 1px;
    background-color: #CCCCCC;
}

.debug-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 25vw;
    opacity: 0.8;
    z-index: 10;
    resize: none;
}

.debug-area:focus {
    width: 100%;
    height: 80%;
}

.show-info-button {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
}

.show-info-button::before {
    position: absolute;
    display: block;
    content: "?";
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
    background-color: #FFFFFF;
    border-radius: 50%;
}

.grid {
    position: absolute;
    display: grid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    grid-template-columns: 10vw 80vw 10vw;
    grid-template-rows: 10vw 80vw 5vw auto 5vw;
    grid-template-areas: 
        ". . ."
        ". image ."
        ". . ."
        ". result ."
        ". . .";
}

.image {
    position: relative;
    display: block;
    justify-self: stretch;
    align-self: stretch;
    grid-area: image;
    background-color: #000000;
}

.error {
    position: relative;
    display: "block";
    justify-self: center;
    align-self: center;
    grid-area: image;
    background-color: #000000;
    padding: 0.5em;
    color: #FFFFFF;
    text-align: center;
}

.error:empty {
    display: none;
}

.result-wrapper {
    position: relative;
    display: block;
    justify-self: stretch;
    align-self: stretch;
    grid-area: result;
    overflow-y: auto;
    overflow-x: hidden;
}

.result {
    position: relative;
    display: block;
    background-color: #FFFFFF;
    padding: 1em;
    word-wrap: break-word;
    user-select: text;
}

.result.copied {
    background-color: rgb(120, 255, 67);
}

.scan-button {
    position: relative;
    display: block;
    grid-area: image;
    justify-self: end;
    align-self: end;
    box-sizing: border-box;
    width: 3em;
    height: 3em;
    padding: 0.75em;
    background-color: rgba(255,255,255,0.8);
    line-height: 0;
}

.scan-button::before {
    position: absolute;
    display: block;
    content: "";
    box-sizing: border-box;
    top: 0.5em;
    left: 0.5em;
    width: 2em;
    height: 2em;
    border: 0.1em dashed #000000;
}

.scan-button>span {
    position: relative;
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    background-color: transparent;
}

.scan-button>span:nth-child(1),
.scan-button>span:nth-child(3),
.scan-button>span:nth-child(7) {
    background-color: #000000;
}

.scan-button>span:nth-child(1)::before,
.scan-button>span:nth-child(3)::before,
.scan-button>span:nth-child(7)::before {
    position: absolute;
    display: block;
    content: "";
    top: 0.05em;
    left: 0.05em;
    right: 0.05em;
    bottom: 0.05em;
    box-sizing: border-box;
    border: 0.075em solid #FFFFFF;
}

.camera-icon {
    position: relative;
    box-sizing: border-box;
    width: 1.5em;
    height: 1em;
    margin: 0.35em 0 0.25em 0;
    background-color: #000000;
    border-radius: 0.2em;
}

.camera-icon::before {
    position: absolute;
    display: block;
    content: "";
    box-sizing: border-box;
    background-color: #000000;
    width: 0.75em;
    height: 0.5em;
    border-radius: 0.25em;
    top: -0.2em;
    left: 0.375em;
}

.camera-icon::after {
    position: absolute;
    display: block;
    content: "";
    box-sizing: border-box;
    background-color: transparent;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    border: 0.1em solid #FFFFFF;
    top: 0.1em;
    left: 0.375em;
}

.clipboard {
    position: relative;
    display: block;
    height: 1.75em;
    width: 1.5em;
    box-sizing: border-box;
    border: 0.1em solid #000000;
    background-color: #E0E0E0;
    border-radius: 0.25em;
    grid-row: 4;
    grid-column: 3;
    justify-self: center;
    align-self: start;
    margin-top: 0.25em;
}

.clipboard::after {
    position: absolute;
    top: -0.2em;
    left: calc(50% - 0.4em);
    display: block;
    box-sizing: border-box;
    content: "";
    border: 0.1em solid #000000;
    background-color: #E0E0E0;
    width: 0.8em;
    height: 0.4em;
    border-radius: 0.1em;
}

.clipboard::before {
    position: absolute;
    top: 0.1em;
    left: calc(50% - 0.5em);
    display: block;
    box-sizing: border-box;
    content: "";
    background-color: #FFFFFF;
    width: 1em;
    height: 1.25em;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.video-container .overlay {
    position: absolute;
    display: grid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    grid-template-columns: 10vw 80vw 10vw;
    grid-template-rows: 10vw 80vw 5vw auto 5vw;
    grid-template-areas: 
        "top top top"
        "left image right"
        ". . ."
        ". content ."
        ". . .";
}

.video-container .overlay .top,
.video-container .overlay .left,
.video-container .overlay .right,
.video-container .overlay .bottom {
    position: relative;
    display: block;
    background-color: rgba(0,0,0,0.75);
    justify-self: stretch;
    align-self: stretch;
    grid-area: top;
}

.video-container .overlay .left {
    grid-area: left;
}

.video-container .overlay .right {
    grid-area: right;
}

.video-container .overlay .bottom {
    grid-column: 1/4;
    grid-row: 3/5;
}

.video-container .select-device-button {
    position: relative;
    display: block;
    grid-area: image;
    justify-self: end;
    align-self: end;
    box-sizing: border-box;
    width: 5em;
    height: 3em;
    padding: 0.75em;
    background-color: rgba(255,255,255,0.8);
    line-height: 0;
    text-align: right;
}

.video-container .select-device-button::before {
    position: absolute;
    top: 1.1em;
    left: 0.75em;
    content: "";
    display: block;
    width: 1.5em;
    height: 0.25em;
    box-sizing: border-box;
    border: 0.15em solid #000000;
    border-top-color: transparent;
    border-right-color: transparent;
    transform: skewX(-45deg);
}

.video-container .select-device-button::after {
    position: absolute;
    bottom: 1em;
    left: 0.5em;
    content: "";
    display: block;
    width: 1.5em;
    height: 0.25em;
    box-sizing: border-box;
    border: 0.15em solid #000000;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: skewX(-45deg);
}

.video-container .select-device-button .camera-icon {
    display: inline-block;
}

.video-container .device-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.75);
    padding: 10vw;
    overflow-x: hidden;
    overflow-y: auto;
}

.video-container .device-list .device {
    position: relative;
    display: block;
    padding: 0.75em 1.5em 0.75em 3.5em;
    background-color: #FFFFFF;
    line-height: 2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0.1em 0;
}

.video-container .device-list .device:first {
    margin-top: 0;
}

.video-container .device-list .device::before {
    position: absolute;
    content: "";
    top: 1em;
    left: 1em;
    width: 1.5em;
    height: 1.5em;
    box-sizing: border-box;
    border: 0.1em solid #000000;
    border-radius: 50%;
}

.video-container .device-list .device.active::after {
    position: absolute;
    content: "";
    top: 1.25em;
    left: 1.25em;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    background-color: #000000;
    border-radius: 50%;
}

.video-container .info {
    position: relative;
    color: #E0E0E0;
    box-sizing: border-box;
    text-align: center;
    justify-self: center;
    align-self: start;
    grid-row: 4;
    grid-column: 1/4;
}

.video-container .exhaustive {
    position: relative;
    display: block;
    color: #E0E0E0;
    box-sizing: border-box;
    margin: 0.5em 0;
}

.video-container .exhaustive input[type=checkbox] {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    top: -1em;
    left: -1em;
    width: 0.5em;
    height: 0.5em;
}

.video-container .exhaustive input[type=checkbox] + span {
    position: relative;
    padding-left: 2em;
}

.video-container .exhaustive input[type=checkbox] + span::before {
    position: absolute;
    display: block;
    content: "";
    width: 1.4em;
    height: 1.4em;
    top: 0;
    left: 0;
    box-sizing: border-box;
    background-color: transparent;
    border: 0.1em solid #E0E0E0;
    border-radius: 0.1em;
}

.video-container .exhaustive input[type=checkbox]:checked + span::after {
    position: absolute;
    display: block;
    content: "";
    width: 0.8em;
    height: 0.8em;
    top: 0.3em;
    left: 0.3em;
    box-sizing: border-box;
    background-color: #E0E0E0;
}

.video-container .cancel {
    position: relative;
    color: #E0E0E0;
    box-sizing: border-box;
    padding: 0.75em;
    text-align: center;
    border: 2px solid #E0E0E0;
    justify-self: stretch;
    align-self: end;
    grid-area: content;
}

.info-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #000000;
    background-color: #FFFFFF;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1em;
    text-align: center;
}

.info-container .hide-info-button {
    position: fixed;
    top: 0;
    right: 0;
    width: 2.2em;
    height: 2.2em;
    text-align: center;
    line-height: 2.2em;
}

.info-container .main {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.info-container .about {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
}

.info-container .about>img {
    position: relative;
    margin: 0 auto;
    width: 10em;
}

.info-container .supported {
    position: relative;
    text-align: left;
}

.info-container .supported>div {
    position: relative;
    padding: 1em 1em 1em 7em;
}

.info-container .supported>div>span {
    position: relative;
    vertical-align: top;
}

.info-container .supported>div>img {
    position: relative;
    width: 5em;
    margin-left: -6em;
}

.info-container .credits {
    position: relative;
    text-align: left;
}

.info-container .credits .license {
    margin: 2em 0;
    font-size: 50%;
}

.landscape {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: none;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "center";
    background-color: #E0E0E0;
}

.landscape .info {
    position: relative;
    align-self: center;
    justify-self: center;
    grid-area: center;
    text-align: center;
    line-height: 3em;
}

.landscape .info .rotate {
    position: relative;
    display: inline-block;
    margin: 0 0.5em;
    width: 2em;
    height: 2em;
    vertical-align: middle;
}

.landscape .info .rotate::before {
    position: absolute;
    display: block;
    content: "";
    top: 0.9em;
    left: 0;
    width: 1.6em;
    height: 0.9em;
    border: 0.1em dashed #999999;
    border-radius: 0.2em;
}

.landscape .info .rotate::after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0.9em;
    width: 0.9em;
    height: 1.6em;
    border: 0.1em solid #000000;
    border-radius: 0.2em;
}

.landscape .info .resize {
    position: relative;
    display: inline-block;
    margin: 0 0.5em;
    width: 2.5em;
    height: 2em;
    vertical-align: middle;
}

.landscape .info .resize::before {
    position: absolute;
    display: block;
    content: "";
    top: 0.1em;
    left: 0;
    width: 2.3em;
    height: 1.6em;
    border: 0.1em dashed #999999;
}

.landscape .info .resize::after {
    position: absolute;
    display: block;
    content: "";
    top: 0.1em;
    right: 0;
    width: 0.9em;
    height: 1.6em;
    border: 0.1em solid #000000;
}

@media screen and (min-aspect-ratio: 1/1) {
    .landscape {
        display: grid;
    }
}