@property --fill {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input {
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: center;
  font-size: 1.5vmin;
  font-family: 'Comic Sans MS';
}

select {
    font-size: 1.5vmin;
    font-family: 'Comic Sans MS';
}

button {
    font-size: 1.5vmin;
    font-family: 'Comic Sans MS';
}

body {
    background-color: black;
    color: white;
    height: 100%;
    overflow: hidden;
    font-family: 'Comic Sans MS';
    font-size: 2vmin;
}

img {

    image-rendering: pixelated;   /* modern way */
    image-rendering: crisp-edges; /* fallback for some browsers */
}


main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fullWrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.fill {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.fillBottom {
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    top: 50%;
}

.fillLeft {
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
}

.hoverGrow:hover {
    transform: scale(1.1); /* change the property on hover */
}

/*
.videoEditor {
    display: none;
}
*/

#videoUploadLabel {
    width: 75vmin;
}

#loader {
    position: absolute;
    top: 10%;
    left : 35%;
    width: 30%;
    height: calc(30cqw * (363/1450));
    display: none;
}

#loadFill {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--fill) * 100%);
    height: 100%;
    background: green;
    
    /*z-index: -1;*/
    mask-size: calc(100% / var(--fill)) 100%;
    mask-image: url("images/loadingPlaceholderBlack.png");
    mask-mode: alpha;
    mask-repeat: no-repeat;
    transition: --fill 0.2s linear;
}

#videoDiv {
    position: relative;
    display: none; 
    /*background: blue;*/
}

#videoOptionsDiv {
    display: none;
    /*
    flex-direction: column;
    align-items: center;
    */
    position: absolute;
    left: 0;
    width: min(calc(55vw - 35vmin), 92vh);
    /*height: 60%;*/
    /*background: blue;*/
}

#frameReuseDiv {
    display: none;
    /*
    flex-direction: column;
    align-items: center;
    */
    position: absolute;
    right: 0;
    width: min(calc(48vw - 35vmin), 92vh);
    text-align: center;
    /*height: 60%;*/
    /*background: blue;*/
}

#videoPreview {
    /*display: none;*/
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
    object-fit: fill;
    /*max-height: 50%;*/
    outline: 0.2vw solid #fff;
    background-image: url("images/Checkerboard_pattern.png");
    background-size: 4vmin;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#videoWidth {
    display: none;
    position: absolute;
    left: 20%;
    top: 0;
    width: 60%;
    height: 20%;
    /*background: red;*/ 
}

#videoHeight {
    display: none;
    position: absolute;
    top: 20%;
    right: 0;
    width: 20%;
    height: 60%;
    /*background: red;*/ 
}


#videoWidthInput {
    position: absolute;
    top: 5%;
    left: calc(50% - 3.5vw/2);
    /*width: 10%;
    height: 25%;*/
    width: 3.5vw;
    height: 1.5vh;
    z-index: 1;
}

#videoHeightInput {
    position: absolute;
    top: calc(50% - 1.5vh/2);
    left: 55%;
    /*width: 30%;
    height: 8%;*/
    width: 3.5vw;
    height: 1.5vh;
    z-index: 1;
}

#frameRateCanvas {
    width: 70%;
}

.showJpgQuality {
    display: none;
}

#videoOptionsDiv:has(#jpg:checked) .showJpgQuality {
  display: block;
}

#riqInput {
    display: none;
}

#toDecalEditorLabel {
    position: absolute; 
    bottom: 0; 
    width: calc(70vmin * 0.6); 
    left: calc(50vw - 70vmin * 0.3);
    display: none;
}

#riqOptions {
    position: absolute;
    bottom: 0;
    left: calc(50vw - 65vmin * 0.5);
    width: 65vmin;

    display: none;
    justify-content: center;
}

#riqOptions > *{
    width: 30%;
    visibility: hidden;
}

#riqInputLabel {
    visibility: visible;    
}

#editorOptionsDiv {
    display: none;

    border: 1.5vmin solid transparent;           /* = frame thickness */
    border-image-source: url("images/box.gif");
    border-image-slice: 32 fill;              /* = same number(s) */
    border-image-repeat: stretch;

    position: absolute;
    left: 0;
    max-width: max(47vw - 25vmin, 22vw);
    /*height: 60%;   22vw*/
    /*background: blue;*/
}

#editorOptionsDiv:has(#overrideLength:checked) #lengthLabel {
  display: block;
}

#lengthLabel {
    display: none;
}

#testImageDiv {
    display: none;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

#decalOptionsDiv {
    display: none;

    border: 1.5vmin solid transparent;           /* = frame thickness */
    border-image-source: url("images/box.gif");
    border-image-slice: 32 fill;              /* = same number(s) */
    border-image-repeat: stretch;

    position: absolute;
    right: 0;
    max-width: max(47vw - 25vmin, 22vw);
    /*height: 60%;   22vw*/
    /*background: blue;*/
}

#decalOptionsDiv:has(#easeInput option[value="1"]:checked) #startOptions {
    display: none;
}

#decalOptionsDiv:has(#displayLayerInput option[value="0"]:checked) #stickyInputLabel {
    display: block;
}

#stickyInputLabel {
    display: none;
}

#startOptions {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center;
}

#infoBoxes {
    position: absolute;
    bottom: 0;
    max-width: 100vw;

    display: flex;
    justify-content: center;
}

#infoBoxes > *{
    border: 1.5vmin solid transparent;           /* = frame thickness */
    border-image-source: url("images/box.gif");
    border-image-slice: 32 fill;              /* = same number(s) */
    border-image-repeat: stretch;   

    overflow-y: auto;
    max-width: 50%;
}