:root {
    --base-size: 2vw;
}

* {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

html {
    font-size: var(--base-size);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-image: url('paper.jpg');
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    flex-flow: column;
    overflow-x: hidden;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

label {
    width: 2.3rem;
    height: 2.3rem;
    position: relative;
    font-family: 'Shantell Sans', 'cursive';
    text-transform: uppercase;
    text-align: center;
    font-size: 0.45rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 0; /* 0.35em 0 */
}

input {
    width: 2.3rem;
    height: 2.3rem;
    position: absolute;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: inherit;
    text-transform: uppercase;
    font-family: 'Shantell Sans', 'cursive';
}

span {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    text-transform: uppercase;
    font-family: 'Shantell Sans', 'cursive';
    font-size: 0.4rem;
    font-weight: 500;
}

input.is-max {
    caret-color: transparent;
}

.Crossword {
    /*mix-blend-mode: multiply;*/
    height: 16rem;
    width: 26rem;
    position: relative;
    margin: auto;
}

.Crossword-main {
    background-image: url('crossword_main.png');
    background-size: 100% 100%;
    height: 16rem;
    width: 14rem;
    position: absolute;
    top: 0;
    left: 0;
}

.Crossword-word01 {
    display: flex;
    flex-flow: row;
    position: absolute;
    top: 2.33rem;
    width: 16rem;
    height: 2.3rem;
    left: 0.05rem;
}

.Crossword-word01 label {
    top: 2.3rem;
    left: 0;
}

.Crossword-word01 label:before {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    top: -0.3rem;
    left: 0.25rem;
    background-image: url('arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
}

.Crossword-word01 input {
    width: 14.5rem;
    letter-spacing: 1.575rem;
    padding: 0 0.75rem;
}

.Crossword-word01 #char01 {
    left: 6.6rem;
}

.Crossword-word01 #char06 {
    left: 8.9rem;
}

.Crossword-word01 #char05 {
    left: 11.2rem;
}

.Crossword-word02 {
    display: flex;
    flex-flow: column;
    height: 16rem;
    width: 2.5rem;
    position: absolute;
    top: 2.2rem;
    left: 2.3rem;
}

.Crossword-word02 label {
    top: -2.25rem;
    left: 0;
}

.Crossword-word02 input {
    height: 16rem;
    letter-spacing: 2.25rem;
    padding: 0.6rem 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

/* VA Safari Hacks */

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    .Crossword-word02 input {
        letter-spacing: 1.65rem;
    }
}

.Crossword-word02 #char02 {
    left: 1.9rem;
    top: 0.133rem;
}

.Crossword-word02 #char03 {
    left: 1.9rem;
    top: 2.6rem;
}

.Crossword-word02 #char04 {
    left: 1.9rem;
    top: 5rem;
}

.Crossword-extra {
    background-image: url('crossword_extra.png');
    background-size: 100% 100%;
    height: 2.5rem;
    width: 14rem;
    bottom: 0;
    right: 0;
    position: absolute;
}

.Crossword-extra input {
    top: 0;
    width: 2.2rem;
    text-align: center;
    height: 2.5rem;
}

.Crossword-extra input[disabled] {
    color: currentColor;
    -webkit-text-fill-color: currentColor;
    opacity: 1; /* required on iOS */
}

.Crossword-extra #letter01 {
    left: 0;
}

.Crossword-extra #letter02 {
    left: 2.3rem;
}

.Crossword-extra #letter03 {
    left: 4.8rem;
}

.Crossword-extra #letter04 {
    left: 7.1rem;
}

.Crossword-extra #letter05 {
    left: 9.4rem;
    width: 2.1rem;
}
.Crossword-extra #letter06 {
    left: 11.65rem;
}

.Crossword-extra #extra01 {
    top: 0.133rem;
    left: 1.9rem;
}

.Crossword-extra #extra02 {
    top: 0.133rem;
    left: 4.2rem;
}

.Crossword-extra #extra03 {
    top: 0.133rem;
    left: 6.6rem;
}

.Crossword-extra #extra04 {
    top: 0.133rem;
    left: 8.9rem;
}

.Crossword-extra #extra05 {
    top: 0.133rem;
    left: 11.1rem;
}

.Crossword-extra #extra06 {
    top: 0.133rem;
    left: 13.4rem;
}

.Contact {
    padding:2rem;
    display: flex;
    flex-flow: row;
    width: calc(100% - 4rem);
    gap: 2rem;
    font-family: "Helvetica", "Arial", sans-serif;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
}

body.is-solved .Contact {
    opacity: 1;
    pointer-events: all;
    transition-delay: 1s;
}

.Contact a {
    color: inherit;
    font-size: 0.55rem;
}

.Contact-logo {
    height: 2rem;
    width: auto;
    margin-left: auto;
}

@media screen and (max-width: 737px) {
    :root {
        --base-size: 6vw;
    }
    .Crossword {
        height: 20rem;
        width: 17.66rem;
        margin: 1.33rem auto;
    }
    .Crossword-main {
        left: 1.33rem;
    }
    .Crossword-extra {
        right: auto;
        left: 1.33rem;
    }
    .Contact {
        padding: 1.33rem;
        display: flex;
        flex-flow: column;
        gap: 0.75rem;
        justify-content: center;
        align-items: flex-start;
        position: relative;
    }
    .Contact a {
        float:left;
        margin-right: 1.33rem;
    }
    .Contact .Contact-logo {
        position: absolute;
        bottom: 1.33rem;
        right: 0;
    }
}