html
{
	height:100%;
	width:100%;
    background-color:#777;
}
body
{
    display:flex;
	width:100%;
    margin:0;
    padding:40px 0;
    font-size:19px;
    font-family:Courier, Verdana, sans-serif;
	line-height:1.6;
    word-spacing:-.2em;
    flex-direction:column;
    gap:40px;
}
p,
h2,
h3
{
    margin:0;
}
input
{
    font-family:Courier, Verdana, sans-serif;
}

html.fixed > body {
    display:block;
	height:100%;
}

#a {
    position:absolute;
    width:0;
    height:0;
    top:101vh;
    width:101vw;
}

#dragNDrop {
	visibility:hidden;
	opacity:0;
    position:fixed;
    inset:0;
	background-color:#0006;
	outline-offset:-30px;
	outline:2px dashed #000;
	outline-color:#C8DADF;
	-webkit-transition:outline-offset .15s ease-in-out, background-color .15s linear;
	transition:outline-offset .15s ease-in-out, background-color .15s linear;
    pointer-events:none;
}
html.dragNDrop #dragNDrop {
	visibility:visible;
	opacity:1;
}


body > * {
    flex-shrink:0;
    flex-grow:0;
}
html.dragNDrop > body > * {
    pointer-events:none;
}

.input {
    position:relative;
    display:block;
    width:90%;
    max-height:calc(90vh - 40px);
    aspect-ratio:1920/1080;
    margin:0 auto;
    overflow:hidden;
}
.input > video,
.input > img {
    height:100%;
    /* aspect-ratio:1920/1080; */
    object-fit:contain;
    margin:0 auto;
    background-color:#CCC;
}
.input > video {
    display:block;
}
html.image .input > video,
.input > img {
    display:none;
}
html.image .input > img {
    display:block;
}
html.fixed > body > * {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    margin:0;
}

.input > .overlay {
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    height:100%;
    aspect-ratio:1920/1080;
    pointer-events:none;
    flex-direction:column;
}
.input > .overlay > .top,
.input > .overlay > .bottom {
    width:100%;
    flex-grow:0;
}
.input > .overlay > .middle {
    display:flex;
    max-height:100%;
    flex-grow:1;
    flex-direction:row;
}
.input > .overlay > .middle > .left,
.input > .overlay > .middle > .right {
    display:inline-block;
    height:100%;
    flex-grow:0;
}
.input > .overlay > .middle > .middle {
    position:relative;
    flex-grow:1;
}
.input > .overlay > .top,
.input > .overlay > .bottom,
.input > .overlay > .middle > .left,
.input > .overlay > .middle > .right {
    background-color:#0009;
}
.input > .overlay > .middle > .middle > .preview {
    position:absolute;
    top:0;
    display:none;
    width:50px;
    height:50px;
    background-color:#9996;
    pointer-events:auto;
}
.input > .overlay > .middle > .middle > .preview.canvas {
    left:0;
}
.input > .overlay > .middle > .middle > .preview.image {
    right:0;
}
.input:hover > .overlay > .middle > .middle > .preview {
    display:block;
}
.input > .overlay > .middle > .middle > canvas {
    display:none;
    width:1px;
    height:1px;
    min-width:100%;
    min-height:100%;
}
.input > .overlay > .middle > .middle > .preview.canvas:hover + canvas {
    display:block;
}
.input > .overlay > .middle > .middle > .img {
    display:none;
    width:1px;
    height:1px;
    min-width:100%;
    min-height:100%;
    background-color:#0009;
}
.input > .overlay > .middle > .middle > .img > img {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.input > .overlay > .middle > .middle > .preview.image:hover ~ .img {
    display:block;
}

.preview {
    width:95%;
    max-height:95vh;
    margin:0 auto;
}

.preview > .canvas {
    width:100%;
    max-height:calc(95vh - 71px);
    /* aspect-ratio:1920/1080; */
    margin:0 auto;
}

.preview > .canvas > canvas {
    display:block;
    height:100%;
    /* aspect-ratio:1920/1080; */
    margin:0 auto;
    background-color:#CCC;
}

#crop {
    display:flex;
    width:fit-content;
    margin:10px auto 0;
    flex-direction:row;
    gap:8px;
}

#medias {
    position:fixed;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    display:flex;
    height:90vh;
    overflow-y:auto;
    flex-direction:column;
    justify-content:center;
    align-items:end;
    gap:6px;
}
#medias > .media {
    height:60px;
}
#medias > .media > img {
    height:100%;
}