#view {
            touch-action: manipulation;
        }

        body {
            margin: 0;
            padding: 0;
            border: 0;
            user-select: none;
            max-width: 100%;
            background-color: var(--grass);
            position: relative;
        }

        html,
        body {
            overscroll-behavior-block: contain;
            overflow-x: hidden;
            overflow-y: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }


        :root {
            --grass: #fbf2e3;
            --highlight: #A4AC86;
            --background: #254336;
            --line: #C2C5AA;
            --word: #DAD3BE;
            --shadow: #414833;
            --faded: #8caf8c;
            --wrong: #790909;
            --labelDiv: rgb(54, 125, 105);
            --disable: #15241d;
        }
        .gu-transit {
            display: none;
            /* opacity: 0.8;
            transition: all 0.3s ease-in-out 33; */
            /* Ensure it spans the whole height/width of the grid cell */
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            position: absolute !important;
            grid-row: 1 !important;
            /* Visual "background change" styling */
            background-color: rgba(0, 123, 255, 0.2) !important;
            /* Semi-transparent blue */
            border: 2px dashed #007bff;
            pointer-events: none !important;
            /* Put it underneath the actual grid items */
            z-index: 0 !important;
        }

        .container>div:not(.gu-transit):not(.gu-mirror) {
            position: relative;
        }

        .gu-mirror {
            /* left: auto !important;
            top: auto !important;
            position: static !important; */
            pointer-events: none !important;
            /* transition: grid-column 0.1s ease-in-out; */
        }

        /* #oneDiv {
            color: blueviolet;
        } */

        .wordContainer {
            /* background-color: aquamarine; */
            font-size: 3em;
            display: inline-block;
            color: var(--word);
            background-color: transparent;
        }

        .letterContainer {
            font-size: 3em;
            display: inline-block;
            color: var(--word);
        }

        .arrow {
            z-index: 0;
        }

        .selected {
            /* font-weight: bold; */
            background-color: var(--highlight);
            user-select: none;
            color: var(--shadow);
        }

        .hidden {
            /* display: none; */
            visibility: hidden;
            height: 2em;
        }

        .hide {
            visibility: hidden;
            pointer-events: none;
        }

        .faded {
            color: var(--faded);
            /* visibility: hidden; */
            /* display: none; */
        }

        .morphoHide {
            visibility: hidden;
            pointer-events: none;
            padding: 0 !important;
        }

        @keyframes animateWrong {
            0% {
                background-color: var(--wrong);
                transform: scale(1);
            }

            50% {
                background-color: var(--wrong);
                transform: scale(1.1);
            }

            100% {
                background-color: var(--wrong);
                transform: scale(1);
            }

        }

        .animateWrong {
            animation: 0.5s forwards alternate animateWrong;
        }


        /* a.introjs-button.introjs-nextbutton{
            background-color: red;
            background-image: none;
            text-shadow:none;
            color: var(--word);
        }

        .introjs-tooltipReferenceLayer {
            width:4% !important;
            height:10% !important;
            top:20% !important;
            left:45% !important;
        }

        .introjs-tooltiptext {
            font-size:2.7rem;
        } */

        a.menu_links {
            cursor: pointer;
        }

        /* .introjs-tooltip{
            background-color: var(--highlight);
        } */

        .introVideo {
            width: 26rem;
        }

        /* .introjs-helperLayer {
            background: transparent;
        } */

        #tourButton {
            position: absolute;
            top: 2rem;
            right: 1rem;
            width: 3rem;
        }

        #toolButton {
            position: absolute;
            top: 1rem;
            right: 4rem;
            width: 5rem;
        }

        #dialog,
        #toolDialog {
            top: 15%;
            left: 50%;
            font-size: 2rem;
            width: 35rem;
            position: fixed;
            margin: 0rem !important;
            z-index: 100000;
            overflow: hidden;
        }

        #targetLabelImg {
            width:10rem;
            pointer-events: none;
        }

        .dialogHeader {
            display: flex;
            justify-content: space-between;
            /* Pushes children to opposite ends */
            align-items: center;
            /* Vertically centers the items */
            left: 0%;
            padding: 0rem;
            /* Add some spacing */
            background-color: var(--background);
            cursor: move;
            /* The 'move' cursor for dragging */
            width: 90%;
            height: 0.1rem;
            z-index: 100000;
        }

        .headerNotice {
            color: var(--word);
            z-index: 100000;
        }

        .removeButton {
            color: var(--word);
            border: none;
            background: transparent;
            font-size: 1.75rem;
            font-weight: bold;
            cursor: pointer;
            top: 5%;
            right: 30rem;
            z-index: 100000;
        }

        #finishMeme,
        #toolPic {
            width: 32rem;
        }

        #problemInfo {
            position: absolute;
            border: 2px solid black;
            border-radius: 5px;
            background-color: var(--highlight);
            min-width: fit-content;
            height: fit-content;
            padding: 1rem !important;
            text-align: center;
            font-size: 2.4rem;
        }

        #sentenceContainer div {
            padding: 1em;


        }

        .tenseItem {
            font-size: 3em;
            display: inline-block;
            color: var(--word);
            padding: .1em !important;
        }

        .problemList,
        .problemInList {
            display: flex;
            flex-direction: row;
            padding: 1.2rem 1.1rem 0rem 0;
            align-items: center;
            justify-content: center;
            gap: 0.4em;
        }

        .hole-text {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 1em;
        }

        #problemSet {
            display: grid;
            grid-template-columns: repeat(1, fit-content(6em));
            grid-template-rows: repeat(14, fit-content(5em));
        }

        .hole {
            text-decoration: none;
            color: var(--word);
            font-size: 2rem;
            /* margin: 30rem 0 3rem 0; */
        }

        #lineContainer {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            /* Ensure it spans the whole grid */
            height: 100%;
            /* Ensure it spans the whole grid */
            border-radius: 2%;
            pointer-events: none;
            /* CRITICAL: Allows clicks/drags to pass through to items below */
            z-index: 0;
            /* Keep lines behind the actual grid items */
        }

        #problemConstituent,
        #lineContainer,
        #stage {
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 2%;
        }

        #stage {
            padding: 0;
            border: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background);

        }

        #problemConstituent {
            /* flex-flow: column wrap; */
            width: 95%;
            height: 100%;
            display: grid;
            grid-auto-rows: min-content;
            background-color: transparent;

        }

        .constituentContainer {
            /* border: 1px solid white; */
            padding: .1em !important;
            background-color: transparent;
        }

        .wordContainer {
            padding: .5em .15em .3em .15em !important;
        }

        #sentenceContainer .letterContainer {
            padding: .5em 0.4em .3em 0;
            background-color: transparent;
        }

        .block {
            /* display: inline-block; */
            place-self: center;
            /* display: flex; */

            /* justify-content: space-around; */
            /* text-align: center; */
            white-space: nowrap;
            /* flex-flow: column wrap; */
            flex-direction: column;
            /* align-items: stretch; */
            /* align-content: stretch; */
            padding: 1em;
            /* justify-content: flex-start; */
            /* align-items: space-evenly; */
            background-color: transparent;
        }

        /* .wordContainer {
            background-color: rgba(137, 43, 226, 0.208);

        }*/

        .noPad {
            padding-left: 0 !important;
        }

        div:has(+.noPad) {
            padding-right: 0 !important;
        }

        .labelDiv,
        #next,
        #again {
            /* position:absolute; */
            /* margin: auto; */
            padding: 0.1em .5em .1em .5em !important;
            /* width: 1.5em; */
            /* height: 0.7em; */
            left: 0 !important;
            top: 0 !important;
            /* background-color: rgba(137, 43, 226, 0.208); */
            text-align: center !important;
            font-size: 3em !important;
            color: #eeeeee !important;
            position: relative !important;
        }

        #next,
        #again {
            /* padding: 0.5rem;
            margin-top: 3rem;
            background-color: var(--labelDiv); */
            border: none !important;
            margin: 2rem 0 0 0 !important;
            text-align: inherit !important;
            font: inherit !important;
            border-radius: 0 !important;
            appearance: none !important;
        }

        #sentenceContainer .labelMenu {
            display: grid;
            position: absolute;
            grid-template-rows: repeat(auto-fit, 0.6em);
            grid-template-columns: repeat(3, 2.3em);
            background-color: var(--labelDiv);
            left: -0.03em;
            top: 1.5em;
            z-index: 10000 !important;
            /* border-radius: 10%; */
            border: .02em solid rgba(255, 255, 255, .8);
            /* flex-wrap: wrap; */
            /* justify-content: center; */
            /* position:relative; */
            padding: 0.4em;
            grid-auto-flow: row dense;
        }

        #sentenceContainer .labelItem {
            /* flex: 33%; */
            font-size: 0.5em;
            margin: auto;
            padding: 0;
            border: 0.01em;
            text-align: center;
        }

        #note {
            position: absolute;
            min-width: fit-content;
            height: fit-content;
            padding: 1rem !important;
            text-align: center;
            font-size: 2.4rem;
            color: white;
        }

        .bar::after {
            content: "'"
        }

        .phrase::after {
            content: "P"

        }

        .possPhrase::after {
            content: "P's"
        }

        #sentenceContainer .typeMenu {
            /* display: flex; */
            /* position:relative;
*/
            border: 0;
            grid-row: 6/6;
            grid-column: 1 / 4;
            justify-content: center;
        }

        #sentenceContainer .typeItem {
            display: inline-block;
            width: 35%;
            font-size: 0.5em;
            padding: 0.8em;
        }

        .typeMenu {
            padding: 0.5em 0 0 0 !important;
            width: 100%;
        }

        .labelItem:hover,
        .typeItem:hover,
        .button:hover {
            cursor: pointer;
        }

        .typeItem {
            border-color: var(--line);
            border: 0.1rem solid;
        }

        .button {
            text-align: center;
            font-size: 3rem;
            width: 10rem;
            margin: auto;

        }

        .button,
        .labelDiv,
        #next,
        #again {
            background-color: var(--labelDiv);
            /* border-radius: 10%; */
            border: .02em solid rgba(255, 255, 255, .8);
        }

        .labelDiv {
            /* min-width: 5em; */
            
        }


        .branch {
            /* lines of tree */
            stroke: var(--line);
            stroke-width: 0.3em;
            stroke-linecap: round;
        }

        .arrow {
            stroke: yellow;
            opacity: 0.55;
            stroke-width: 0.3em;
            stroke-linecap: round;
        }

        #triangle {
            fill: yellow;
        }

        .container {
            display: grid;
            grid-auto-rows: auto;
            grid-auto-columns: max-content;
            grid-auto-flow: column;
            /* grid-template-rows: max-content; */
            /* grid-template-columns: repeat(1, 1fr); */
            /* justify-content: center; */
            align-items: center;
            margin: 1em 5em 0 5em;
            cursor: pointer;
            position: relative;
            background-color: transparent;
        }

        .container:first-child {
            grid-template-columns: auto;
            /* justify-content: flex-start; */
            justify-content: center;
            margin: 2em 5em 0 5em;
        }

        #stage #menu {
            padding: 1rem 0 0 2rem;
            width: 20%;
            height: 100%;
            color: #eeeeee;
            font-size: 2.8rem;
            border-width: 0 .1em 0 0;
            border-color: #eee;
            border-style: solid;
            /* background-color:aliceblue; */
        }

        .disable {
            pointer-events: none;
            color: var(--disable);
        }

        #sentenceContainer {
            left: 21%;
            width: 80%;
            height: 100%;
            /* background-color:bisque; */
        }

        #points {
            font-size: 2.5rem;
        }

        #menu,
        #sentenceContainer {
            position: absolute;
            margin: 0;
            padding: 0;

        }


        .first {
            /* position: relative; */

        }

        /* .first::before{
            content:"<img>"
        } */

        #grading {
            display: none;
        }