body {
    font-family: 'D-DIN', sans-serif;
    background-color:darkgray;
}
.main {
    max-width: 540px;
    min-height: 650px;
    background-color:white;
    filter: drop-shadow(2px 4px 6px black);
}

/* HEADER */
.section-header {
    font-size: large;
    font-weight: bold;
    background-color: blanchedalmond;
    height: 45px;
}
.section-header img {
    width: 20px;
}
.menu-icon {
    padding-left: 0px;
}

/* NAV */
.section-nav {
    height: 50px;
    font-size: smaller;
    font-weight: bold;
    background-color: linen;
}
.puzzle-nav {
    color:#666666;
    font-size: x-small;
}
.puzzle-nav a {
    color:#666666;
    text-decoration: none;
    font-size: x-small;
}
a.puzzle-nav-disabled {
    color: lightgray;
}
.has-win::after {
    display: inline-block;
    background-image: url('./share.png');
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position-x: right;
    width: 25px;
    height: 15px;
    content:"";
}

/* CLUES */
.section-clues {
    height: calc((95dvh - 200px)*0.6);
}
.clues-heading {
    height: 10%;
    font-weight: bold;
    font-size: smaller;
}
.clue-row {
    height: 90%;
}
.clue {
    font-size: small;
    font-weight: bold;
    border: thin dotted black;
    text-align: left;
    border-radius: 7px;
    background-color: white;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 4vh;
}

.clue-completed {
    background-color: orange;
}
.clue-letter {
    display: inline-block;
    width: 12px;
    border-style: solid;
    border-width: 1px;
    text-align: center;
    line-height: 150%;
    margin: 1px;
    border-radius: 3px;
}
.clue-letter-white {
    background-color: white;
}
.clue-letter-tan {
    background-color: blanchedalmond;
}
.clue-hint {
    display: inline-block;
    border-left: 1px dotted black;
    margin-left: 2px;
    padding-left: 2px;
}
.clue-length {
    display: inline-block;
    border: 1px solid black;
    background-color: white;
    border-radius: 7px;
    width: 14px;
    text-align: center;
    line-height: 12px;
    position: relative;
    right: -10px;
    float: right;
    margin-top: 5px;
}
.clue-length-htp {
    display: inline-block;
    border: 1px solid black;
    background-color: white;
    border-radius: 6px;
    width: 12px;
    text-align: center;
    line-height: 10px;
    position: relative;
    float: right;
    right: -7%;
    margin-top: 5px;
}
.clue-reveal {
    font-size: x-small;
    font-weight: bold;
    border: black;
    border-style: dotted;
    border-width: thin;
    width: 65%;
    text-align: center;
    margin-bottom: 3px;
    padding-top: 1%;
    padding-bottom: 1%;
    line-height: 200%;
    border-radius: 10%;
    margin-right: 3px;
    background-color: white;
    display: inline-block;
}

/* ANSWER BOX */
.section-input {
    height: 60px;
}
#accept, #clearbox {
    background-color: blanchedalmond;
    border-color: black;
    font-size: medium;
}
#accept:hover, #clearbox:hover {
    box-shadow: 0 0 .25rem black;
}
#answer {
    font-size: xx-large;
    font-weight: bold;
    border: 1px solid black;
    height: 50px;
    text-align: center;
}
.red-alert {
    box-shadow: 0 0 .25rem red;
    color:red !important;
}

/* KEYBOARD */
.section-keyboard {
    height: calc((95dvh - 200px)*0.4);
}

.letter {
    font-size: x-large;
    font-weight: bold;
    text-align: center;
    border: black;
    border-style: dotted;
    border-width: thin;
    border-radius: 10%;
    width: 8%;
    padding: 1vh 0 1vh 0;
    margin: 1%;
}
.htp-letter {
    font-size: x-large;
    font-weight: bold;
    text-align: center;
    border: black;
    border-style: dotted;
    border-width: thin;
    border-radius: 10%;
    width: 70%;
    max-width: 40px;
    padding: 2%;
    margin: 1%;
}
.letter-selected {
    border-style: solid !important;
    box-shadow: 0 0 .25rem grey;
}
.letter-completed {
    background-color: orange;
}
.letter-toggled {
    background-color: blanchedalmond;
}
.letter:hover {
    box-shadow: 0 0 .25rem black;
}


/* FOOTER */
.section-footer {
    font-size: x-small;
    background-color: blanchedalmond;
    height: 45px;
}
.section-footer a {
    color: black;
    text-decoration:none;
}

/* MODAL - HOW TO PLAY */
#modal-htp .clue {
    width: 150px;
}
#modal-htp img {
    width: 15px;
}
#modal-htp p {
    margin-bottom: 0.5rem;
    font-size: smaller;
}
.htp-padding-r {
    padding-right: 0;
}
.htp-padding-l {
    padding-left: 0;
}


/* MODAL - GUESSES */
#guesses {
    text-align: center;
}
.corrent-guess {
    color:darkgreen;
    font-weight: bold;
}
.wrong-guess {
    color:darkred;
}
label {
    font-size: small;
}

/* MODAL - HINT */
#reveal-details {
    margin: 5px;
}    

/* MODAL - WIN */
#puzzle-timer {
    font-style: italic;
}


h1 {
    margin-bottom: 0px;
}    
.modal-header {
    padding-bottom: 0;
}    
.modal button {
    border: solid;
    border-color: black;
    background-color: blanchedalmond;
}    
.modal button:hover {
    background-color: blanchedalmond;
    border-color: black;
    box-shadow: 0 0 .25rem black;
}    

@media (max-height: 700px) {
    .section-clues {
        height: calc((650px - 200px)*0.6);
    }
    .section-keyboard {
        height: calc((650px - 200px)*0.4);
    }
    /* .section-footer {
        height: 35px;
    } */
}