@font-face {
    font-family: 'FG Med';
    src: url(../other/fg-med.ttf) format("truetype");
}
@font-face {
    font-family: 'FG Book';
    src: url(../other/fg-book.ttf) format("truetype");
}

body {
    touch-action: manipulation;
}

#nav{
    z-index: 2;
}

#main {
    width: max-content ;
    margin-top: -10px;
}

#editorArea {
    z-index: 1;
    top: 51%;
    transform-origin: center;
}

.disabled {
    pointer-events: none;
    opacity: 0;
}

* {
    touch-action: none;
}

/* URL AREA */

#urlArea {
    text-align: center;
    width: 80%;
}

/* INFORMATION */

.textInput {
    width: 86%;
    background-color: white;
    border: 1px solid gray;
    border-radius: 5px;
    color: black;
    text-align: center;
}

#authorInput {
    width: 43%;
    margin-bottom: 5px;
    font-size: 0.7em;
}
#generate {
    /* position: absolute; */
    bottom: 7px;
    margin-right: 15px;
    cursor: pointer;
    user-select: none;
    content: '✨';
    font-size: 1rem;
    /* opacity: 0.7; */
}

#widthInput {
    width: 12%;
    margin-bottom: 5px;
    font-size: 0.7em;
}
#heightInput {
    width: 12%;
    margin-bottom: 5px;
    font-size: 0.7em;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1 !important;
}

#themeInput {
    margin-top: 5px;
    margin-bottom: -5px;
}

/* WAY OVER THERE */

.board-fade { 
    transform: translateZ(-9999px);
    opacity: 0.5;
    color: #ffffff00;
    /* cursor: default; */
}
.board-gone { 
    transform: translateZ(-9999px);
    opacity: 0;
    /* cursor: default; */
}

/* BOARD */

#board {
    float: right;
    position: absolute;
}

.character:empty::before {
    content: '●';
    opacity: 0.2;
    color: #000;
    font-size: 1.4rem;
    position: relative;
    top: -3px;
}
.character {
    top: 1px;
}

/* PREVIEW */

#prev {
    height: 1em !important;
    margin: 22px 0px 12px !important;
    width: min(400px, 90vw);

    text-align: center;
    align-content: center;
}
.prevBorder {
    border: black solid 3px;
}
.color-bad {
    color: #e33;
}

/* INPUT BOARD */

#inputBoard {
    position: relative;
    font-family: var(--font-book) !important;
    touch-action: manipulation;
}

.iBox {
    width: min(50px, 12vw);
    height: min(50px, 12vw);
    position: absolute;
    right: 0px;
    padding: 0px;
    /* top: -5px; */
    text-align: center;
    background-color: #ffffff00;
    border: 0px;
    outline: 1px solid darkslategray;
    outline-offset: 2px;
    border-radius: 5px;
    color: black !important;
}

/* STRANDS */

/* BUTTONS */

#buttonArea {
    width: min(95%, 400px);
    display: flex;
    flex-wrap: wrap;
}

.lowerButton {
    background-color: black;
    color: white;
    border-radius: 30px;
    border-style: none;
    font-size: 1.5rem;
    border: black solid 3px;
    margin-top: 5px;
}
.lowerButton:active {
    opacity: 0.5;
}

.buttonOutline {
    background-color: white;
    color: black;
    width: 49.5%;
}
.sep {
    width: 1%;
}
.buttonWide {
    width: 100%;
}

#uploadButton {
    color: black !important;
    background-color: var(--blue-color);
    border: var(--blue-color) solid 3px !important;
    margin-top: 20px;
}

/* MOBILE */

/* @media (max-aspect-ratio: 1/1)  {
    body {
        transform: scale(0.8, 0.8) translateY(66vh) !important;
    }
    #nav{
        transform: scale(1.25, 1.25) translateY(-52.5vh) !important;
    }
} */