:root {
    --guess-color: #dbd8c5;
    --blue-color: #aedfee;
    --span-color: #fbcb2c;
    --hint-color: #c4c1af;
    --correct-color: #0f7ea0;
    --font-med: 'FG Med', 'Franklin Gothic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-book: 'FG Book', 'Franklin Gothic Book', 'Franklin Gothic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@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");
}

* {
    touch-action: none;
}

body {
    color: #000;
    background-color: #fff;
    font-family: var(--font-med);
    font-size: min(2rem, 8vw);
    touch-action: manipulation;
}

.marg {
    margin-top: min(100px, 3vh);
    margin-bottom: min(100px, 2vh);
}

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

.noClick {
    pointer-events: none;
}

#mainArea {
    top: 51%;
}

/* IMPORTS */

#importButton {
    background-color: black;
    color: white;
    width: min(300px, 90vw);
    border-radius: 30px;
    border-style: none;
    font-size: 1rem;
}
#importButton::file-selector-button {
    background-color: white;
    color: black;
    width: fit-content;
    margin: 5px;
    border-radius: 30px;
    border-style: none;
    font-size: 1rem;
}

#codeInput {
    width: min(300px, 90vw);
    background-color: white;
    border: 3px solid black;
    border-radius: 5px;
    color: black;
    text-align: center;
    font-size: 1.5rem;
}
#codeButton {
    margin-top: 10px;
    background-color: #000;
    color: white;
    width: min(200px, 75vw);
    border-radius: 30px;
    border-style: none;
    font-size: 1.5rem;
}
#codeButton:active, .enough:active, .shareButton:active {
    opacity: 0.5;
}

/* THEME */

.themeBox {
    /* border: 1px solid gray;
    border-radius: 10px; */
    text-align: center;
    width: min(400px, 90vw);
    /* height: 10px; */
}
.themeHead {
    background-color: var(--blue-color);
    border-radius: 10px 10px 0px 0px;
    font-size: 1rem;
    position: relative;
    z-index: 2;
}
#theme {
    border: 1px solid;
    border-color: white gray gray gray;
    border-radius: 0px 0px 10px 10px;
    margin-top: -1px;
    margin-bottom: -15px;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

/* AUTHOR */

#authorText {
    font-size: 1.0rem;
}

/* BOARD */

#board {
    font-family: var(--font-book);
    touch-action: manipulation;
    /* filter: hue-rotate(180deg); */
}

/* BOTTOM AREA */

#bottomArea {
    margin-top: 10px;
    width: min(380px, 85vw);
    font-size: min(1.2rem, 5vw);
}

/* HINT BUTTON */

#hintButton {
    /* margin-bottom: 5px; */
    float: left;
    background-color: #bbb;
    color: white;
    width: min(150px, 35vw);
    border-radius: 30px;
    border-style: none;
    cursor: default;
}
.enough {
    background-color: black !important;
    cursor: pointer !important;
}
.hintOutline {
    outline: dashed var(--correct-color);
    outline-offset: -4px;
}

/* COUNT */

#count {
    font-family: var(--font-book);
    position: relative;
    float: right;
    /* padding: 5px; */
    padding-right: 10px;
    /* top: 15%; */
    /* margin-left: 20px; */
}
#count > span {
    font-family: var(--font-med);
    font-weight: bolder;
}

/* WINNING */

.shareButton {
    background-color: black !important;
    cursor: pointer !important;
}

/* PREVIEW */

#prev {
    min-height: 3rem;
    margin: 10px 0px 12px;
}
.color-hint {
    color: var(--hint-color);
}
.color-correct {
    color: var(--correct-color);
}
.color-span {
    color: var(--span-color);
}

.row {
    width: max-content;
}

.letter {
    position: relative;    
    /* color: blue !important; */
    width: min(50px, 12vw);
    height: min(50px, 12vw);
    border-radius: 50%;
    padding-top: 2px;
    margin: 7px;
    /* border: 1px solid magenta; */
    /* display: inline-block; */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none; /* Standard */
}
.letter:hover {
    cursor: pointer;
}
.no-point:hover {
    cursor: default !important;
}

.character {
    width: min(50px, 12vw);
    height: auto;
    right: 0px;
    /* top: -5px; */
    position: absolute;
    z-index: 5;
}

/* letters */

.guess::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    border-radius: 50%;
    background-color: var(--guess-color) !important;
    z-index: 4;
}

/* .next {
    background-color: var(--guess-color) !important;

    border-radius: 50%;
    outline: var(--guess-color) solid 10px;
    outline-offset: -10px;
} */
/* .next::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    outline: var(--guess-color) solid 3px;
    outline-offset: 3px;
} */
.next::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    border-radius: 50%;
    background-color: var(--guess-color) !important;
    z-index: 3;
    outline: var(--guess-color) solid 3px;
    outline-offset: 3px;
}

.blue::after {
    background-color: var(--blue-color);
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    border-radius: 50%;
    background-color: var(--blue-color) !important;
    z-index: 2;
}
.span::after {
    background-color: var(--span-color) !important;
}

/* edges */

.edge {
    content: '';
    cursor: default;
    width: 15px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.edge-guess {
    /* background-color: magenta; */
    background-color: var(--guess-color) !important;
    outline: var(--guess-color) solid 3px;
    outline-offset: -3px;
    z-index: 3;
}
.edge-blue {
    /* background-color: green; */
    background-color: var(--blue-color);
    z-index: 1;
}
.edge-span {
    /* background-color: green; */
    background-color: var(--span-color);
    z-index: 1;
}

.edge-u {
    transform: translateX(-50%) translateY(-150%);
    height: 35px !important;
}
.edge-d {
    transform: translateX(-50%) translateY(75%);
}
.edge-r {
    transform: translateX(150%) translateY(-50%) rotate(90deg);
}
.edge-l {
    transform: translateX(-250%) translateY(-50%) rotate(90deg);
}
.edge-ur {
    transform: translateX(150%) translateY(-170%) rotate(45deg) scaleY(230%);
}
.edge-ul {
    transform: translateX(-250%) translateY(-170%) rotate(-45deg) scaleY(230%);
}
.edge-dr {
    transform: translateX(150%) translateY(65%) rotate(-45deg) scaleY(230%);
}
.edge-dl {
    transform: translateX(-250%) translateY(65%) rotate(45deg) scaleY(230%);
}

/* MOBILE */

/* @media (max-aspect-ratio: 1/1)  {
    body {
        
    }
    #nav{
        transform: scale(1.111, 1.111) translateY(-53.8vh);
    }

} */