* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    font-family: Tahoma, sans-serif;
    user-select: none;
}
:root {
    --backbutton-text: clamp(2rem,10vh,6rem);
    --contentsbutton-text: clamp(0.5rem,2.5vh,2rem);
    --bigorange-button: 2px 2px 4px 2px darkorange;
    --bigblue-button: 2px 2px 4px 2px darkblue;
}
.outer-container {
    height: 100vh;
    width: 100vw;
}
.contents-container, .unit-container {
    margin: 0 auto;
    width: 90%;
}
.contents-image, .main-image, .page-image {
    overflow: hidden;
}
.contents-button {
    position: absolute;
    z-index: 2;
    /* background-color: blue; */
    width: 40%;
    height: 12%;
    /* opacity: .5; */
    cursor: pointer;
}
.contents-unit1 {
    top: 13%;
    left: 8%;
}
.contents-unit2 {
    top: 26%;
    left: 8%;
}
.contents-unit3 {
    top: 40%;
    left: 8%;
}
.contents-unit4 {
    top: 54%;
    left: 8%;
}
.contents-unit5 {
    top: 67%;
    left: 8%;
}
.contents-unit6 {
    top: 81%;
    left: 8%;
}
.contents-unit7 {
    top: 13%;
    left: 55%;
}
.contents-unit8 {
    top: 26%;
    left: 55%;
}
.contents-unit9 {
    top: 40%;
    left: 55%;
}
.back-button {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15vh;
    width: 15vh;
    background-color: orange;
    box-shadow: var(--bigorange-button);
    border-radius: 10px;
    color: white;
    font-weight: bold;
    font-size: var(--backbutton-text);
    right: 2%;
    cursor: pointer;
    z-index: 1;
}
.contents-return-button {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 20vw;
    height: 5vh;
    background-color: lightblue;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 2px darkblue;
    font-weight: bold;
    font-size: var(--contentsbutton-text);
    cursor: pointer;
}
.contents-return-button:hover {
    box-shadow: 0px 0px 4px 2px white;
}
.canvas-open {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    width: 10vh;
    background-color: blue;
    box-shadow: var(--bigblue-button);
    border-radius: 10px;
    color: white;
    font-weight: bold;
    font-size: var(--backbutton-text);
    top: 0%;
    left: 2%;
    z-index: 9;
    cursor: pointer;
}
.canvas-open.big {
    height: 15vh;
    width: 15vh;
}
.canvas-container {
    position: absolute;
    top: 5%;
    left: 10%;
    z-index: 8;
    width: 80vw;
    height: 95vh;
}
#canvas {
    position: absolute;
    touch-action: none;
}
.canvas-backup {
    z-index: 1;
    pointer-events: none;
}
.canvas-back {
    z-index: 9;
    top: 0%;
}
.canvas-control-panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    top: 20%;
    background-color: blue;
    box-shadow: var(--bigblue-button);
    border-radius: 10px;
    width: 6vw;
    height: 65vh;
    z-index: 9;
}
.canvas-control-left {
    left: 2%;
}
.canvas-control-right {
    right: 2%;
    height: 75vh;
}
.canvas-control {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5vw;
    height: 5vw;
    background-color: white;
    box-shadow: 1px 1px 3px 2px white;
    border-radius: 10px;
    cursor: pointer;
}
.canvas-control-set {
    box-shadow: 1px 1px 3px 5px yellow;
}
.resize-dialog {
    position: absolute;
    height: 20vh;
    width: 4vw;
    top: 75%;
    left: 110%;
    z-index: 9;
    background-color: blue;
    box-shadow: var(--bigblue-button);
    border: none;
    border-radius: 10px;
}
.resize-dialog-div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.canvas-resize-option {
    height: 25%;
    width: 3vw;
    background-color: white;
    box-shadow: 1px 1px 3px 2px white;
    border-radius: 10px;
}
.pages-button {
    position: absolute;
    z-index: 2;
    /* background-color: blue; */
    width: 6%;
    height: 12%;
    /* opacity: .5; */
    bottom: 0%;
    cursor: pointer;
}
.page-last {
    left: 4%;
}
.page-next {
    left: 90%;
}
.units-button {
    position: absolute;
    z-index: 2;
    /* background-color: blue; */
    width: 35%;
    height: 8%;
    /* opacity: .5; */
    cursor: pointer;
}
.units-button:hover, .contents-button:hover {
    border-radius: 10px;
    box-shadow: 1px 1px 3px 2px black;
}
.unit1-wat {
    bottom: 8%;
    left: 10%;
}
.unit1-chant {
    bottom: 8%;
    left: 55%;
}
.unit1-listen {
    top: 5%;
    left: 10%;
}
.unit1-activity {
    top: 5%;
    left: 55%;
}
.chant-video {
    position: absolute;
    top: 15%;
    width: 80vw;
    height: 70vh;
    left: 50%;
    transform: translateX(-50%);
}
.chant-control-panel {
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    height: 13vh;
    width: 90vw;
    border-radius: 5px;
    box-shadow: var(--bigblue-button);
    display: flex;
    background: white;
    color: white;
}
.chant-button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--contentsbutton-text);
    cursor: pointer;
}
.chant-button:hover {
    box-shadow: 0px 0px 4px 2px black;
}
.chant-option-select {
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.chant-option-select div {
    width: 20%;
    height: 50%;
    background-color: orange;
    box-shadow: var(--bigorange-button);
}
.chant-speed-select, .chant-karaoke-select {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.chant-speed-select div, .chant-karaoke-select div {
    width: 60%;
    height: 30%;
    background-color: orange;
    box-shadow: var(--bigorange-button);
}
.chant-speed-select.repeat, .chant-karaoke-select.repeat, .chant-repeat {
    width: 18%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.chant-speed-select.repeat div, .chant-karaoke-select.repeat div, .chant-repeat div {
    width: 90%;
    height: 30%;
    background-color: orange;
    box-shadow: var(--bigorange-button);
}
.wat-video-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100vw;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background-color: white;
}
.wat-video {
    margin: 0 auto;
    margin-top: 5vh;
    height: 80vh;
    width: 95vw;
}
.wat-back-button {
    margin-top: 2vh;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    width: 20vw;
    background-color: orange;
    border-radius: 5px;
    box-shadow: var(--bigorange-button);
    color: white;
    font-size: var(--backbutton-text);
    cursor: pointer;
}
.small-activity-button, .wide-activity-button {
    position: absolute;
    z-index: 2;
    /* background-color: blue; */
    width: 5%;
    height: 7%;
    /* opacity: .5; */
    cursor: pointer;
}
.medium-activity-button {
    position: absolute;
    z-index: 2;
    /* background-color: blue; */
    width: 7%;
    height: 12%;
    /* opacity: .5; */
    cursor: pointer;
}
.wide-activity-button{
    width: 9%;
}
#wat-audio-1-1 {
    top: 49%;
    left: 16%;
}
#wat-audio-1-2 {
    top: 44%;
    left: 23%;
}
#wat-audio-1-3 {
    top: 39%;
    left: 30%;
}
#wat-audio-1-4 {
    top: 37%;
    left: 37%;
}
#wat-audio-1-5 {
    top: 35%;
    left: 55%;
}
#wat-audio-1-6 {
    top: 37%;
    left: 61%;
}
#wat-audio-1-7 {
    top: 40%;
    left: 67%;
}
#wat-audio-1-8 {
    top: 43%;
    left: 73%;
}
#wat-audio-1-9 {
    top: 49%;
    left: 81%;
}
#wat-audio-1-10 {
    top: 92%;
    left: 17.5%;
}
#wat-audio-1-11 {
    top: 83%;
    left: 25.5%;
}
#wat-audio-1-12 {
    top: 80%;
    left: 33.5%;
}
#wat-audio-1-13 {
    top: 76%;
    left: 42.5%;
}
#wat-audio-1-14 {
    top: 75.5%;
    left: 50.5%;
}
#wat-audio-1-15 {
    top: 76%;
    left: 57.5%;
}
#wat-audio-1-16 {
    top: 79%;
    left: 64.5%;
}
#wat-audio-1-17 {
    top: 84%;
    left: 71%;
}
#wat-audio-1-18 {
    top: 89.5%;
    left: 78%;
}
.unit1-wat-video {
    width: 7%;
}
#wat-video-1-1 {
    top: 85%;
    left: 16.5%;
}
#wat-video-1-2 {
    top: 76%;
    left: 24.5%;
}
#wat-video-1-3 {
    top: 73%;
    left: 32.5%;
}
#wat-video-1-4 {
    top: 69%;
    left: 41.5%;
}
#wat-video-1-5 {
    top: 68.5%;
    left: 49.5%;
}
#wat-video-1-6 {
    top: 69%;
    left: 56.5%;
}
#wat-video-1-7 {
    top: 72%;
    left: 63.5%;
}
#wat-video-1-8 {
    top: 77%;
    left: 70%;
}
#wat-video-1-9 {
    top: 82.5%;
    left: 77%;
}
.unit1-listen-audio, .unit1-listen-video {
    top: 37%;
}
#listen-audio-1-1 {
    left: 9%;
}
#listen-audio-1-2 {
    left: 23%;
}
#listen-audio-1-3 {
    left: 37%;
}
#listen-audio-1-4 {
    left: 50.5%;
}
#listen-audio-1-5 {
    left: 64%;
}
#listen-audio-1-6 {
    left: 78%;
}
#listen-video-1-1 {
    left: 17%;
}
#listen-video-1-2 {
    left: 31%;
}
#listen-video-1-3 {
    left: 44.5%;
}
#listen-video-1-4 {
    left: 58%;
}
#listen-video-1-5 {
    left: 72%;
}
#listen-video-1-6 {
    left: 86%;
}
.unit1-listen-answer {
    width: 10%;
    top: 45%;
}
#listen-answer-1-1 {
    left: 10.5%;
}
#listen-answer-1-2 {
    left: 24.5%;
}
#listen-answer-1-3 {
    left: 38%;
}
#listen-answer-1-4 {
    left: 52%;
}
#listen-answer-1-5 {
    left: 65.5%;
}
#listen-answer-1-6 {
    left: 79.5%;
}
.wat-audio-window {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 30vw;
    height: 20vh;
    background-color: lightblue;
    border-radius: 5px;
    box-shadow: var(--bigblue-button);
    z-index: 5;
}
.wat-audio {
    height: 10vh;
}
.wat-audio-back-button {
    margin: 0 auto;
    width: 60%;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: orange;
    box-shadow: var(--bigorange-button);
    border-radius: 5px;
    font-size: var(--contentsbutton-text);
    cursor: pointer;
}
.listen-answer-display {
    position: absolute;
    /* background-color: blue; */
    /* opacity: .5; */
}
.listen-answer-display img {
    position: absolute;
    width: 100%;
    height: 100%
}
.unit1-listen-answer-display {
    left: 14%;
    top: 52%;
    height: 22vh;
    width: 72vw;
}
#activity-audio-1-1 {
    top: 72%;
    left: 10%;
}
#activity-audio-1-2 {
    top: 35%;
    left: 45%;
}
.unit2-wat-1 {
    top: 5%;
    left: 55%;
}
.unit2-listen {
    top: 5%;
    left: 10%;
}
.unit2-sing-1 {
    top: 49.5%;
    left: 10%;
}
.unit2-sing-2 {
    top: 84%;
    left: 10%;
}
.unit2-wat-2 {
    top: 5%;
    left: 55%;
}
.unit2-activity {
    top: 49.5%;
    left: 55%;
}
#wat-video-2-1 {
    top: 26%;
    left: 79%;
}
#wat-video-2-2 {
    top: 50%;
    left: 21%;
}
#wat-video-2-3 {
    top: 90%;
    left: 21.5%;
}
#wat-video-2-4 {
    top: 90%;
    left: 46.25%;
}
#wat-video-2-5 {
    top: 55%;
    left: 44.5%;
}
#wat-video-2-6 {
    top: 83.5%;
    left: 72.2%;
}
#listen-audio-2-1 {
    top: 39%;
    left: 14%;
}
#listen-audio-2-2 {
    top: 39%;
    left: 33%;
}
#listen-audio-2-3 {
    top: 39%;
    left: 52.5%;
}
#listen-audio-2-4 {
    top: 39%;
    left: 72%;
}
#listen-answer-2-1 {
    top: 39%;
    left: 22.5%;
}
#listen-answer-2-2 {
    top: 39%;
    left: 42%;
}
#listen-answer-2-3 {
    top: 39%;
    left: 61%;
}
#listen-answer-2-4 {
    top: 39%;
    left: 80%;
}
.unit2-listen-answer-display {
    top: 48%;
    left: 19%;
    height: 21vh;
    width: 64vw;
}
#wat-audio-2-1 {
    top:33%;
    left: 14%;
}
#wat-audio-2-2 {
    top:33%;
    left: 36%;
}
#wat-audio-2-3 {
    top:33%;
    left: 58%;
}
#wat-audio-2-4 {
    top:75%;
    left: 14%;
}
#wat-audio-2-5 {
    top:75%;
    left: 36%;
}
#wat-audio-2-6 {
    top:75%;
    left: 58%;
}
#wat-video-2-7 {
    top:39.5%;
    left: 24.2%;
}
#wat-video-2-8 {
    top:47%;
    left: 24.2%;
}
#wat-video-2-9 {
    top:39.5%;
    left: 46.5%;
}
#wat-video-2-10 {
    top:47%;
    left: 46.5%;
}
#wat-video-2-11 {
    top:39.5%;
    left: 68.2%;
}
#wat-video-2-12 {
    top:47%;
    left: 68.2%;
}
#wat-video-2-13 {
    top:82%;
    left: 24.2%;
}
#wat-video-2-14 {
    top:89.5%;
    left: 24.2%;
}
#wat-video-2-15 {
    top:82%;
    left: 46.5%;
}
#wat-video-2-16 {
    top:89.5%;
    left: 46.5%;
}
#wat-video-2-17 {
    top:82%;
    left: 68.2%;
}
#wat-video-2-18 {
    top:89.5%;
    left: 68.2%;
}
#wat-video-2-19 {
    top:19%;
    left: 80.5%;
}
.unit3-shimen {
    top:5%;
    left: 44%;
    width: 10%;
}
.unit3-sing {
    top:84%;
    left: 10%;
}
.unit3-play-1 {
    top:84%;
    left: 55%;
}
.unit3-play-2 {
    top:5%;
    left: 10%;
}
.unit3-wat {
    top:49%;
    left: 10%;
}
.unit3-chant {
    top:5%;
    left: 55%;
}
.unit3-play-3 {
    top:13%;
    left: 55%;
}
.unit3-activity-1 {
    top:21.5%;
    left: 55%;
}
.unit3-activity-2 {
    top:57%;
    left: 55%;
}
.unit3-shimen-overlay-image {
    position: absolute;
    top: 9.5%;
    left: 11.8%;
    width: 76.3vw;
    height: 89.5vh;
    z-index: 4;
    background-color: hsla(0, 0%, 40%, 0.5);
    box-shadow: 0 0 5px 5px hsla(0, 0%, 40%, 0.5);
    border-radius: 10px;
}
.unit3-shimen-overlay-back {
    top: 0%;
    z-index: 10;
}
.unit3-shimen-audio-window {
    top: 85%;
    height: 12vh;
}
.unit3-shimen-audio {
    width: 4vh;
    height: 4vh;
    opacity: 1;
}
#shimen-audio-3-1 {
    top: 40%;
    left: 20%;
}
#shimen-audio-3-2 {
    top: 73%;
    left: 45%;
}
#shimen-audio-3-3 {
    top: 68%;
    left: 70%;
}
#shimen-audio-3-4 {
    top: 34%;
    left: 37%;
}
#shimen-audio-3-5 {
    top: 55%;
    left: 68%;
}
#shimen-audio-3-6 {
    top: 15%;
    left: 50%;
}
#shimen-audio-3-7 {
    top: 32%;
    left: 32%;
}
#shimen-audio-3-8 {
    top: 26%;
    left: 48%;
}
#shimen-audio-3-9 {
    top: 47%;
    left: 47%;
}
#shimen-audio-3-10 {
    top: 28%;
    left: 69%;
}
#shimen-audio-3-11 {
    top: 70%;
    left: 51%;
}
#play-audio-3-1 {
    top: 16%;
    left:9%;
}
#play-audio-3-2 {
    top: 28%;
    left:9%;
}
#play-audio-3-3 {
    top: 41%;
    left:9%;
}
#play-audio-3-4 {
    top: 53%;
    left:9%;
}
#play-audio-3-5 {
    top: 65%;
    left:9%;
}
#play-audio-3-6 {
    top: 83%;
    left:14%;
}
#play-audio-3-7 {
    top: 83%;
    left:21%;
}
#play-audio-3-8 {
    top: 83%;
    left:28%;
}
#play-audio-3-9 {
    top: 83%;
    left:35%;
}
#play-audio-3-10 {
    top: 83%;
    left:42.2%;
}
#play-audio-3-11 {
    top: 83%;
    left:49.4%;
}
#play-audio-3-12 {
    top: 83%;
    left:56.6%;
}
#play-audio-3-13 {
    top: 83%;
    left:63.8%;
}
#play-audio-3-14 {
    top: 83%;
    left:71%;
}
#play-audio-3-15 {
    top: 83%;
    left:78%;
}
#play-audio-3-16 {
    top: 65%;
    left:83%;
}
#play-audio-3-17 {
    top: 53%;
    left:83%;
}
#play-audio-3-18 {
    top: 41%;
    left:83%;
}
#play-audio-3-19 {
    top: 28%;
    left:83%;
}
#play-audio-3-20 {
    top: 16%;
    left:83%;
}
#play-audio-3-random {
    top: 89.5%;
    left: 16%;
    width: 13%;
}
.unit3-play-2-video {
    top: 13.5%;
    left: 11.3%;
    width: 10%;
}
.unit3-play-2-2 {
    top: 18%;
    left: 64.5%;
    width: 25%;
    height: 17%;
}
.play2-rpsgame-window {
    position: absolute;
    top:10%;
    left: 50%;
    transform: translateX(-50%);
    height: 80vh;
    width: 80vw;
}
.play2-rpsgame-window-upper {
    margin-top: 5vh;
    height: 60vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.play2-rpsgame-result-display {
    width: 56vw;
    box-shadow: 0px 0px 4px 2px darkblue;
    display: flex;
    justify-content: center;
    align-items: center;
}
.play-2-rpsgame-result-image {
    height: 50vh;
    width: 50vh;
    border: none;
}
.play2-rpsgame-again-container {
    width: 24vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2vw;
}
.play2-rpsgame-again-button {
    height: 20vh;
}
.play2-rpsgame-again-button:hover {
    box-shadow: 0px 0px 4px 2px black;
}
.play2-rpsgame-window-lower {
    height: 20vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.play2-rpsgame-language-select {
    width: 10vw;
    height: 10vh;
}
.play2-rpsgame-language-select:hover {
    box-shadow: 0px 0px 4px 2px black;
}
.rps-active-language {
    box-shadow: 0px 0px 4px 2px blue;
}
#wat-audio-3-1 {
    top: 23%;
    left: 69.5%;
}
#wat-audio-3-2 {
    top: 31%;
    left: 69.5%;
}
#wat-audio-3-3 {
    top: 39.2%;
    left: 69.5%;
}
#wat-audio-3-4 {
    top: 47.4%;
    left: 69.5%;
}
#wat-audio-3-5 {
    top: 55.6%;
    left: 69.5%;
}
#wat-audio-3-6 {
    top: 63.8%;
    left: 69.5%;
}
.unit3-wat-video, .unit3-wat-answer {
    width: 7%;
}
#wat-video-3-1 {
    top: 23%;
    left: 77.7%;
}
#wat-video-3-2 {
    top: 31%;
    left: 77.7%;
}
#wat-video-3-3 {
    top: 39.2%;
    left: 77.7%;
}
#wat-video-3-4 {
    top: 47.4%;
    left: 77.7%;
}
#wat-video-3-5 {
    top: 55.6%;
    left: 77.7%;
}
#wat-video-3-6 {
    top: 63.8%;
    left: 77.7%;
}
#wat-answer-3-1 {
    top: 23%;
    left: 85.5%;
}
#wat-answer-3-2 {
    top: 31%;
    left: 85.5%;
}
#wat-answer-3-3 {
    top: 39.2%;
    left: 85.5%;
}
#wat-answer-3-4 {
    top: 47.4%;
    left: 85.5%;
}
#wat-answer-3-5 {
    top: 55.6%;
    left: 85.5%;
}
#wat-answer-3-6 {
    top: 63.8%;
    left: 85.5%;
}
.unit3-wat-answer-image {
    width: 4%;
}
#wat-answer-image-3-1 {
    top: 37%;
    left: 30.5%;
}
#wat-answer-image-3-2 {
    top: 37%;
    left: 11%;
}
#wat-answer-image-3-3 {
    top: 37%;
    left: 50%;
}
#wat-answer-image-3-4 {
    top: 72.5%;
    left: 30.5%;
}
#wat-answer-image-3-5 {
    top: 72.5%;
    left: 11%;
}
#wat-answer-image-3-6 {
    top: 72.5%;
    left: 50%;
}
#play-audio-3-21 {
    top: 26.5%;
    left: 78.5%;
}
#play-audio-3-22 {
    top: 26.5%;
    left: 84%;
    width: 6%;
}
#play-audio-3-23 {
    top: 34%;
    left: 78.5%;
}
#play-audio-3-24 {
    top: 34%;
    left: 84%;
    width: 6%;
}
#play-audio-3-25 {
    top: 41.5%;
    left: 78.5%;
}
#play-audio-3-26 {
    top: 41.5%;
    left: 84%;
    width: 6%;
}
#play-audio-3-27 {
    top: 56.5%;
    left: 78.5%;
}
#play-audio-3-28 {
    top: 56.5%;
    left: 84%;
    width: 6%;
}
#play-audio-3-29 {
    top: 64%;
    left: 78.5%;
}
#play-audio-3-30 {
    top: 64%;
    left: 84%;
    width: 6%;
}
.unit3-play-3-image-window {
    position: absolute;
    top: 15%;
    left: 8%;
    width: 60vw;
    height: 75vh;
}
.apple-box {
    position: absolute;
    height: 11.4vh;
    width: 6.2vw;
    pointer-events: none;
    border-radius: 9999px;
}
.apple {
    pointer-events: all;
}
#apple1 {
    top: 28.8%;
    left: 26.2%;
}
#apple2 {
    top: 28.8%;
    left: 33.5%;
}
#apple3 {
    top: 28.8%;
    left: 40.8%;
}
#apple4 {
    top: 28.8%;
    left: 48%;
}
#apple5 {
    top: 28.8%;
    left: 55.3%;
}
#apple6 {
    top: 28.8%;
    left: 62.6%;
}
#apple7 {
    top: 28.8%;
    left: 69.8%;
}
#apple8 {
    top: 32%;
    left: 23.7%;
}
#apple9 {
    top: 32%;
    left: 30.8%;
}
#apple10 {
    top: 32%;
    left: 37.9%;
}
#apple11 {
    top: 32%;
    left: 44.9%;
}
#apple12 {
    top: 32%;
    left: 52%;
}
#apple13 {
    top: 32%;
    left: 59.1%;
}
#apple14 {
    top: 32%;
    left: 66.1%;
}
#apple15 {
    top: 37.1%;
    left: 29.2%;
}
#apple16 {
    top: 37.1%;
    left: 35.8%;
}
#apple17 {
    top: 37.1%;
    left: 42.4%;
}
#apple18 {
    top: 37.1%;
    left: 49%;
}
#apple19 {
    top: 37.1%;
    left: 55.6%;
}
#apple20 {
    top: 37.1%;
    left: 62.2%;
}
.apple-basket-front {
    position: absolute;
    top: 36.2%;
    left: 18.8%;
    height: 25.2vh;
    width: 62.1vw;
    pointer-events: none;
}
#activity-audio-3-1 {
    top: 55%;
    left: 18%
}
#activity-audio-3-2 {
    top: 62.5%;
    left: 18%
}
#activity-answer-3-1 {
    top: 55%;
    left: 26%;
}
#activity-answer-3-2 {
    top: 62.5%;
    left: 26%;
}
.unit3-activity-2-answer-box-1 {
    position: absolute;
    top: 26%;
    left: 53%;
    width: 12vw;
    height: 15vh;
}
.unit3-activity-2-answer-box-2 {
    position: absolute;
    top: 26%;
    left: 70%;
    width: 12vw;
    height: 15vh;
}
.unit4-activity-1 {
    top: 17.5%;
    left:10%;
}
.unit4-wat-1 {
    top: 26%;
    left:10%;
}
.unit4-chant {
    top: 75.5%;
    left:55%;
}
.unit4-sing {
    top: 84%;
    left:55%;
}
.unit4-listen-1 {
    top: 5%;
    left:10%;
}
.unit4-listen-2 {
    top: 34%;
    left:10%;
}
.unit4-listen-3 {
    top: 64%;
    left:10%;
}
.unit4-wat-2 {
    top: 5%;
    left:55%;
}
.unit4-play {
    top: 34%;
    left:55%;
}
.unit4-activity-2 {
    top: 64%;
    left:55%;
}
#wat-video-4-1 {
    top: 12.5%;
    left: 7.7%;
    height: 6%;
}
#wat-video-4-2 {
    top: 19%;
    left: 7.7%;
    height: 6%;
}
#wat-video-4-3 {
    top: 25.5%;
    left: 7.7%;
    height: 6%;
}
#wat-video-4-4 {
    top: 31.5%;
    left: 7.7%;
    height: 6%;
}
#wat-video-4-5 {
    top: 38%;
    left: 7.7%;
    height: 6%;
}
#wat-audio-4-1 {
    top: 70%;
    left: 7%;
}
#wat-audio-4-2 {
    top: 62%;
    left: 13%;
}
#wat-audio-4-3 {
    top: 57%;
    left: 21%;
}
#wat-audio-4-4 {
    top: 63%;
    left: 43%;
}
#wat-audio-4-5 {
    top: 69%;
    left: 39%;
}
#wat-audio-4-6 {
    top: 77%;
    left: 34%;
}
#wat-audio-4-7 {
    top: 84%;
    left: 31%;
}
#wat-audio-4-8 {
    top: 53%;
    left: 34%;
}
#wat-audio-4-9 {
    top: 30%;
    left: 24%;
}
#wat-audio-4-10 {
    top: 41%;
    left: 42%;
}
#wat-audio-4-11 {
    top: 29%;
    left: 48%;
}
#wat-audio-4-12 {
    top: 70%;
    left: 50%;
}
#wat-audio-4-13 {
    top: 62%;
    left: 61%;
}
#wat-audio-4-14 {
    top: 56%;
    left: 80%;
}
#wat-audio-4-15 {
    top: 82%;
    left: 50%;
}
#wat-audio-4-16 {
    top: 84.5%;
    left: 55.5%;
}
#wat-audio-4-17 {
    top: 84%;
    left: 60.5%;
}
#wat-audio-4-18 {
    top: 83.5%;
    left: 65.5%;
}
#wat-audio-4-19 {
    top: 52%;
    left: 56%;
}
#wat-audio-4-20 {
    top: 52%;
    left: 66%;
}
#listen-audio-4-1 {
    top: 38%;
    left: 15%;
}
#listen-audio-4-2 {
    top: 38%;
    left: 41%;
}
#listen-audio-4-3 {
    top: 38%;
    left: 67%;
}
#listen-answer-4-1 {
    top: 38%;
    left: 23.5%;
}
#listen-answer-4-2 {
    top: 38%;
    left: 49.5%;
}
#listen-answer-4-3 {
    top: 38%;
    left: 75.5%;
}
.unit4-listen-1-answer-display {
    top: 48%;
    left: 14%;
    width: 63vw;
    height: 22vh;
}
#listen-audio-4-4 {
    top: 72.5%;
    left: 16%;
}
#listen-audio-4-5 {
    top: 72.5%;
    left: 29%;
}
#listen-audio-4-6 {
    top: 72.5%;
    left: 41.5%;
}
#listen-audio-4-7 {
    top: 15%;
    left: 57%;
}
#listen-audio-4-8 {
    top: 29%;
    left: 70%;
}
#listen-audio-4-9 {
    top: 17%;
    left: 82.5%;
}
#listen-audio-4-10 {
    top: 49%;
    left: 59%;
}
#listen-audio-4-11 {
    top: 49.5%;
    left: 80.5%;
}
#listen-answer-4-4 {
    top: 79.5%;
    left: 16%;
}
#listen-answer-4-5 {
    top: 79.5%;
    left: 28.5%;
}
#listen-answer-4-6 {
    top: 79.5%;
    left: 41%;
}
.unit4-listen-2-answer-display {
    top: 52%;
    height: 19vh;
    width: 5vw;
}
.unit4-listen-2-answer-display1 {
    left: 17.5%;
}
.unit4-listen-2-answer-display2 {
    left: 30%;
}
.unit4-listen-2-answer-display3 {
    left: 42.5%;
}
#listen-audio-4-12 {
    top: 76%;
    left: 18%;
}
#listen-audio-4-13 {
    top: 76%;
    left: 65%;
}
#listen-audio-4-14 {
    top: 88%;
    left: 45.5%;
}
#listen-answer-4-7 {
    top: 76%;
    left: 26.5%;
}
#listen-answer-4-8 {
    top: 76%;
    left: 73%;
}
.unit4-listen-3-answer-display-1 {
    top: 20%;
    left: 12%;
    height: 35vh;
    width: 34vw;
}
.unit4-listen-3-answer-display-2 {
    top: 20%;
    left: 55%;
    height: 50vh;
    width: 34vw;
}
#wat-video-4-6 {
    top: 25%;
    left: 8.5%;
}
#wat-video-4-7 {
    top: 91%;
    left: 27%;
}
#wat-video-4-8 {
    top: 55%;
    left: 22%;
}
#wat-video-4-9 {
    top: 39%;
    left: 33.5%;
}
#wat-video-4-10 {
    top: 65%;
    left: 7%;
}
#wat-video-4-11 {
    top: 73%;
    left: 34%;
}
#wat-video-4-12 {
    top: 83%;
    left: 20%;
}
#wat-video-4-13 {
    top: 32%;
    left: 16%;
}
#wat-video-4-14 {
    top: 25%;
    left: 51%;
}
#wat-video-4-15 {
    top: 91%;
    left: 67%;
}
#wat-video-4-16 {
    top: 28%;
    left: 77%;
}
#wat-video-4-17 {
    top: 85%;
    left: 76%;
}
#wat-video-4-18 {
    top: 85%;
    left: 49.5%;
}
#wat-video-4-19 {
    top: 37%;
    left: 59%;
}
#wat-video-4-20 {
    top: 56%;
    left: 74%;
}
#wat-video-4-21 {
    top: 76%;
    left: 63%;
}
#wat-video-4-22 {
    top: 58%;
    left: 49%;
}
#wat-answer-4-1 {
    top: 55%;
    left: 31.5%;
}
#wat-answer-4-2 {
    top: 39%;
    left: 43%;
}
#wat-answer-4-3 {
    top: 65%;
    left: 16.5%;
}
#wat-answer-4-4 {
    top: 73%;
    left: 43.5%;
}
#wat-answer-4-5 {
    top: 83%;
    left: 29.5%;
}
#wat-answer-4-6 {
    top: 32%;
    left: 25.5%;
}
#wat-answer-4-7 {
    top: 28%;
    left: 86.5%;
}
#wat-answer-4-8 {
    top: 85%;
    left: 85.5%;
}
#wat-answer-4-9 {
    top: 85%;
    left: 59%;
}
#wat-answer-4-10 {
    top: 37%;
    left: 68.5%;
}
#wat-answer-4-11 {
    top: 56%;
    left: 83.5%;
}
#wat-answer-4-12 {
    top: 76%;
    left: 72.5%;
}
#wat-answer-4-13 {
    top: 58%;
    left: 58.5%;
}
.unit4-wat-2-answer-display {
    height: 15vh;
    width: 15vh;
}
#wat-answer-display-4-1 {
    top: 40%;
    left: 26%;
}
#wat-answer-display-4-2 {
    top: 23%;
    left: 38.5%;
}
#wat-answer-display-4-3 {
    top: 49%;
    left: 12%;
}
#wat-answer-display-4-4 {
    top: 58%;
    left: 39%;
}
#wat-answer-display-4-5 {
    top: 68%;
    left: 25%;
}
#wat-answer-display-4-6 {
    top: 17%;
    left: 21%;
}
#wat-answer-display-4-7 {
    top: 13%;
    left: 81%;
}
#wat-answer-display-4-8 {
    top: 68%;
    left: 81%;
}
#wat-answer-display-4-9 {
    top: 70%;
    left: 53.5%;
}
#wat-answer-display-4-10 {
    top: 20%;
    left: 65%;
}
#wat-answer-display-4-11 {
    top: 40%;
    left: 79%;
}
#wat-answer-display-4-12 {
    top: 61%;
    left: 67%;
}
#wat-answer-display-4-13 {
    top: 43%;
    left: 54%;
}
#play-audio-4-1 {
    top: 26%;
    left: 26.5%;
}
#play-audio-4-2 {
    top: 26%;
    left: 42%;
}
#play-audio-4-3 {
    top: 26%;
    left: 58%;
}
#activity-audio-4-1 {
    top: 76%;
    left: 57%;
}
#activity-audio-4-2 {
    top: 16%;
    left: 15%;
}
#activity-audio-4-3 {
    top: 17.5%;
    left: 25%;
}
#activity-audio-4-4 {
    top: 27%;
    left: 29%;
}
#activity-audio-4-5 {
    top: 41%;
    left: 23.5%;
}
#activity-audio-4-6 {
    top: 30.5%;
    left: 18.5%;
}
#activity-audio-4-7 {
    top: 41%;
    left: 10.5%;
}
#activity-audio-4-8 {
    top: 25%;
    left: 7.5%;
}
#activity-audio-4-9 {
    top: 58%;
    left: 7.5%;
}
#activity-audio-4-10 {
    top: 59%;
    left: 20%;
}
#activity-audio-4-11 {
    top: 75%;
    left: 25%;
}
#activity-audio-4-12 {
    top: 74.5%;
    left: 11.5%;
}
#activity-audio-4-13 {
    top: 45.5%;
    left: 38%;
}
#activity-audio-4-14 {
    top: 39.5%;
    left: 43%;
}
#activity-audio-4-15 {
    top: 50%;
    left: 45%;
}
#activity-audio-4-16 {
    top: 59%;
    left: 42.5%;
}
#activity-audio-4-17 {
    top: 64.5%;
    left: 37%;
}
#activity-audio-4-18 {
    top: 58%;
    left: 31.5%;
}
#activity-audio-4-19 {
    top: 47%;
    left: 30%;
}
#activity-audio-4-20 {
    top: 53%;
    left: 37%;
}
.unit5-play {
    top: 5%;
    left: 55%;
    width: 22.5%;
}
.unit5-chant {
    top: 84%;
    left: 55%;
    width: 22.5%;
}
.unit5-listen {
    top: 5%;
    left: 10%;
}
.unit5-activity-1 {
    top: 58%;
    left: 10%;
}
.unit5-wat {
    top: 5%;
    left: 55%;
}
.unit5-activity-2 {
    top: 21%;
    left: 55%;
}
#play-audio-5-1 {
    top: 10%;
    left: 23%;
}
#play-audio-5-2 {
    top: 10%;
    left: 40%;
}
#play-audio-5-3 {
    top: 10%;
    left: 56%;
}
#play-audio-5-4 {
    top: 10%;
    left: 70%;
}
#play-audio-5-5 {
    top: 32%;
    left: 17%;
}
#play-audio-5-6 {
    top: 32%;
    left: 28%;
}
#play-audio-5-7 {
    top: 32%;
    left: 40%;
}
#play-audio-5-8 {
    top: 32%;
    left: 56%;
}
#play-audio-5-9 {
    top: 32%;
    left: 67%;
}
#play-audio-5-10 {
    top: 32%;
    left: 81%;
}
#play-audio-5-11 {
    top: 55%;
    left: 17%;
}
#play-audio-5-12 {
    top: 53%;
    left: 28%;
}
#play-audio-5-13 {
    top: 55%;
    left: 37%;
}
#play-audio-5-14 {
    top: 53%;
    left: 61%;
}
#play-audio-5-15 {
    top: 47%;
    left: 70%;
}
#play-audio-5-16 {
    top: 53%;
    left: 84%;
}
#play-audio-5-17 {
    top: 71.5%;
    left: 23%;
}
#play-audio-5-18 {
    top: 71.5%;
    left: 37%;
}
#play-audio-5-19 {
    top: 71.5%;
    left: 56%;
}
#play-audio-5-20 {
    top: 78%;
    left: 70%;
}
#play-audio-5-1-random {
    top: 90%;
    left: 46%;
    width: 11.5%;
}
#play-audio-5-2-random {
    top: 90%;
    left: 58.4%;
    width: 11.5%;
}
#listen-audio-5-1 {
    top: 57%;
    left: 20%;
}
#listen-audio-5-2 {
    top: 57%;
    left: 41%;
}
#listen-audio-5-3 {
    top: 57%;
    left: 62%;
}
#listen-answer-5-1 {
    top: 57%;
    left: 29%;
}
#listen-answer-5-2 {
    top: 57%;
    left: 49.5%;
}
#listen-answer-5-3 {
    top: 57%;
    left: 71%;
}
.unit5-listen-answer-display {
    top: 27%;
    left: 24.5%;
    width: 52vw;
    height: 50vh;
}
#activity-audio-5-1 {
    top: 14%;
    left: 30%;
}
#activity-audio-5-2 {
    top: 14%;
    left: 48%;
}
#activity-audio-5-3 {
    top: 14%;
    left: 65%;
}
#activity-audio-5-4 {
    top: 34%;
    left: 82.5%;
}
#activity-audio-5-5 {
    top: 50.5%;
    left: 82.5%;
}
#activity-answer-5-1 {
    top: 41%;
    left: 82.5%;
}
#activity-answer-5-2 {
    top: 57.5%;
    left: 82.5%;
}
.unit5-activity-answer-display-1 {
    top: 35%;
    left: 19%;
    width: 60vw;
    height: 10vh;
}
.unit5-activity-answer-display-2 {
    top: 52%;
    left: 19%;
    width: 60vw;
    height: 13vh;
}
.listen-answer-block {
    position: absolute;
    background-color: white;
}
#wat-video-5-1 {
    top: 47%;
    left: 12.5%;
}
#wat-video-5-2 {
    top: 47%;
    left: 24%;
}
#wat-video-5-3 {
    top: 56%;
    left: 18.5%;
}
#wat-video-5-4 {
    top: 47%;
    left: 40%;
}
#wat-video-5-5 {
    top: 47%;
    left: 51.5%;
}
#wat-video-5-6 {
    top: 56%;
    left: 46%;
}
#wat-video-5-7 {
    top: 47%;
    left: 67.5%;
}
#wat-video-5-8 {
    top: 47%;
    left: 79%;
}
#wat-video-5-9 {
    top: 56%;
    left: 73%;
}
#wat-answer-5-1 {
    top: 64.5%;
    left: 18.5%;
}
#wat-answer-5-2 {
    top: 64.5%;
    left: 46%;
}
#wat-answer-5-3 {
    top: 64.5%;
    left: 73%;
}
.unit5-wat-answer-block {
    width: 12vw;
    height: 6vh;
}
#wat-answer-5-1-block {
    top: 34.5%;
    left: 17%;
}
#wat-answer-5-2-block {
    top: 34.5%;
    left: 43%;
}
#wat-answer-5-3-block {
    top: 34.5%;
    left: 70%;
}
#activity-audio-5-6 {
    top: 11%;
    left: 41%;
}
#activity-audio-5-7 {
    top: 11%;
    left: 53%;
}
#activity-answer-5-3 {
    top: 18%;
    left: 41%;
}
#activity-answer-5-4 {
    top: 18%;
    left: 52.5%;
}
.unit5-activity-2-answer-display-1 {
    top: 46.5%;
    left: 43%;
    height: 6vh;
    width: 5vw;
}
.unit5-activity-2-answer-display-2 {
    top: 55%;
    left: 55%;
    height: 6vh;
    width: 5vw;
}
.unit6-shimen {
    top: 5%;
    left: 43.3%;
    width: 9%;
}
.unit6-wat {
    top: 5%;
    left: 55%;
}
.unit6-sing {
    top: 13%;
    left: 55%;
}
.unit6-play {
    top: 5%;
    left: 10%;
}
.unit6-activity {
    top: 5%;
    left: 55%;
}
#shimen-audio-6-1 {
    top: 9%;
    left: 38%;
}
#shimen-audio-6-2 {
    top: 9%;
    left: 30%;
}
#shimen-audio-6-3 {
    top: 9%;
    left: 22%;
}
#shimen-audio-6-4 {
    top: 9%;
    left: 14%;
}
#shimen-audio-6-5 {
    top: 15%;
    left: 8%;
}
#shimen-audio-6-6 {
    top: 29%;
    left: 8%;
}
#shimen-audio-6-7 {
    top: 43%;
    left: 8%;
}
#shimen-audio-6-8 {
    top: 57%;
    left: 8%;
}
#shimen-audio-6-9 {
    top: 71%;
    left: 8%;
}
#shimen-audio-6-10 {
    top: 79%;
    left: 14%;
}
#shimen-audio-6-11 {
    top: 79%;
    left: 23%;
}
#shimen-audio-6-12 {
    top: 79%;
    left: 32%;
}
#shimen-audio-6-13 {
    top: 79%;
    left: 41.3%;
}
#shimen-audio-6-14 {
    top: 79%;
    left: 50%;
}
#shimen-audio-6-15 {
    top: 79%;
    left: 59%;
}
#shimen-audio-6-16 {
    top: 79%;
    left: 68%;
}
#shimen-audio-6-17 {
    top: 79%;
    left: 77%;
}
#shimen-audio-6-18 {
    top: 71%;
    left: 83%;
}
#shimen-audio-6-19 {
    top: 57%;
    left: 83%;
}
#shimen-audio-6-20 {
    top: 43%;
    left: 83%;
}
#shimen-audio-6-21 {
    top: 29%;
    left: 83%;
}
#shimen-audio-6-22 {
    top: 15%;
    left: 83%;
}
#shimen-audio-6-23 {
    top: 9%;
    left: 76%;
}
#shimen-audio-6-24 {
    top: 9%;
    left: 68%;
}
#shimen-audio-6-25 {
    top: 9%;
    left: 60%;
}
#shimen-audio-6-26 {
    top: 9%;
    left: 52%;
}
.unit6-shimen-random {
    top: 91%;
    left: 15.3%;
    width: 12%;
}
.unit6-shimen-highlight {
    position: absolute;
    height: 3vw;
    width: 3vw;
    border-radius: 9999px;
    cursor: pointer;
}
.unit6-shimen-highlight:hover {
    box-shadow: 0 0 5px 5px yellow;
}
#shimen-highlight-a {
    top: 59.5%;
    left: 69.3%;
}
#shimen-highlight-b {
    top: 41%;
    left: 40.5%;
}
#shimen-highlight-c {
    top: 51.5%;
    left: 55%;
}
#shimen-highlight-d {
    top: 42%;
    left: 61%;
}
#shimen-highlight-e {
    top: 60.5%;
    left: 23.5%;
}
#shimen-highlight-f {
    top: 67%;
    left: 27%;
}
#shimen-highlight-g {
    top: 51.5%;
    left: 69%;
}
#shimen-highlight-h {
    top: 33.5%;
    left: 26%;
}
#shimen-highlight-i {
    top: 59.5%;
    left: 64%;
}
#shimen-highlight-j {
    top: 20%;
    left: 25%;
}
#shimen-highlight-k {
    top: 31%;
    left: 45.5%;
}
#shimen-highlight-l {
    top: 73%;
    left: 70%;
}
#shimen-highlight-m {
    top: 46%;
    left: 75.5%;
}
#shimen-highlight-n {
    top: 66%;
    left: 63%;
}
#shimen-highlight-o {
    top: 59.5%;
    left: 79.5%;
}
#shimen-highlight-p {
    top: 51.5%;
    left: 76%;
}
#shimen-highlight-q {
    top: 31%;
    left: 42.5%;
}
#shimen-highlight-r {
    top: 51%;
    left: 73%;
}
#shimen-highlight-s {
    top: 20%;
    left: 69%;
}
#shimen-highlight-t {
    top: 25%;
    left: 79%;
}
#shimen-highlight-u {
    top: 29%;
    left: 25%;
}
#shimen-highlight-v {
    top: 43%;
    left: 56.5%;
}
#shimen-highlight-w {
    top: 77%;
    left: 39%;
}
#shimen-highlight-x {
    top: 45%;
    left: 70%;
}
#shimen-highlight-y {
    top: 45%;
    left: 73%;
}
#shimen-highlight-z {
    top: 32%;
    left: 63%;
}
.unit6-shimen-highlight-window {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,0.5);
    top: 0%;
    left: 0%;
    z-index: 10;
}
.unit6-shimen-highlight-center-box {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    height: 80vh;
    width: 70vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 2px 4px black;
}
.unit6-shimen-highlight-image {
    height: 80%;
    width: 80%;
}
.unit6-shimen-highlight-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 20%;
    width: 100%;
}
.unit6-shimen-highlight-audio-letter {
    width: 10vw;
    height: 8vh;
    cursor: pointer;
}
.unit6-shimen-highlight-audio-word {
    width: 6vw;
    height: 8vh;
    cursor: pointer;
}
.unit6-shimen-highlight-audio-letter:hover, .unit6-shimen-highlight-audio-word:hover {
    box-shadow: 0px 0px 4px 2px black;
}
#wat-video-6-1 {
    top: 88%;
    left: 52%;
}
#wat-video-6-2 {
    top: 85%;
    left: 22%;
}
#wat-video-6-3 {
    top: 91%;
    left: 22%;
}
.unit6-wat-block {
    background-color: white;
    top: 88%;
    left: 73%;
    width: 15%;
    height: 8%;
}
.unit6-play-letters-grid-left {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: repeat(3,1fr);
    top: 60%;
    left: 15%;
    width: 42.5vw;
    height: 36vh;
    z-index: 2;
}
.unit6-play-letters-grid-right {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(6,1fr);
    top: 20%;
    left: 62%;
    width: 30vw;
    height: 72vh;
    z-index: 2;
}
.unit6-play-letters-grid-right-box {
    padding: 1vh;
    height: 12vh;
}
.held-card {
    position: absolute;
    height: 12vh;
    width: 6vw;
    top: 50%;
    left: 50%;
}
.letter-drop-zone {
    padding: 2px;
    height: 12vh;
}
.unit6-reset-button {
    top: 83%;
    left: 79.5%;
    width: 12%;
}
.unit6-play-audio {
    width: 3%;
    height: 5%;
}
#play-audio-6-1 {
    top: 18%;
    left: 17.2%;
}
#play-audio-6-2 {
    top: 18%;
    left: 23%;
}
#play-audio-6-3 {
    top: 18%;
    left: 28.5%;
}
#play-audio-6-4 {
    top: 18%;
    left: 34%;
}
#play-audio-6-5 {
    top: 18%;
    left: 39.7%;
}
#play-audio-6-6 {
    top: 18%;
    left: 45.5%;
}
#play-audio-6-7 {
    top: 18%;
    left: 51%;
}
#play-audio-6-8 {
    top: 30%;
    left: 14.5%;
}
#play-audio-6-9 {
    top: 30%;
    left: 20%;
}
#play-audio-6-10 {
    top: 30%;
    left: 25.5%;
}
#play-audio-6-11 {
    top: 30%;
    left: 31.2%;
}
#play-audio-6-12 {
    top: 30%;
    left: 37%;
}
#play-audio-6-13 {
    top: 30%;
    left: 42.5%;
}
#play-audio-6-14 {
    top: 30%;
    left: 48%;
}
#play-audio-6-15 {
    top: 30%;
    left: 53.7%;
}
#activity-audio-6-1 {
    top: 23%;
    left: 68%;
}
#activity-audio-6-2 {
    top: 31%;
    left: 68%;
}
#activity-audio-6-3 {
    top: 38.5%;
    left: 68%;
}
.unit7-shimen {
    top: 5%;
    left: 46.6%;
    width: 9%;
}
.unit7-play-1 {
    top: 5%;
    left: 65.2%;
    width: 25%;
}
.unit7-play-2 {
    top: 13.3%;
    left: 65.2%;
    width: 25%;
}
.unit7-chant {
    top: 84%;
    left: 65.2%;
    width: 25%;
}
.unit7-wat {
    top: 5%;
    left: 10%;
}
.unit7-listen {
    top: 5%;
    left: 55%;
}
.unit7-activity {
    top: 49.5%;
    left: 55%;
}
#shimen-audio-7-1 {
    top: 54%;
    left: 24.5%;
}
#shimen-audio-7-2 {
    top: 60%;
    left: 80%;
}
.unit7-shape-cover {
    position: absolute;
    cursor: pointer;
}
#shape-1 {
    top: 15%;
    left: 13%;
    height: 25vh;
    width: 14vw;
}
#shape-2 {
    top: 14%;
    left: 36%;
    height: 28vh;
    width: 16vw;
}
#shape-3 {
    top: 21.8%;
    left: 62%;
    height: 18vh;
    width: 20vw;
}
#shape-4 {
    top: 57.8%;
    left: 25.5%;
    height: 22.5vh;
    width: 12.5vw;
}
#shape-5 {
    top: 55.8%;
    left: 48%;
    height: 25vh;
    width: 19.5vw;
}
#shape-6 {
    top: 15%;
    left: 13%;
    height: 25vh;
    width: 14vw;
}
#shape-7 {
    top: 13%;
    left: 36%;
    height: 28vh;
    width: 16vw;
}
#shape-8 {
    top: 13%;
    left: 62%;
    height: 28vh;
    width: 20vw;
}
#shape-9 {
    top: 56%;
    left: 25.5%;
    height: 25vh;
    width: 12.5vw;
}
#shape-10 {
    top: 55.8%;
    left: 48%;
    height: 26vh;
    width: 19.5vw;
}
.unit7-play-1-answer-block {
    width: 15vw;
    height: 5vh;
}
#play-answer-7-1-block {
    top: 41%;
    left: 15%;
}
#play-answer-7-2-block {
    top: 41%;
    left: 37%;
}
#play-answer-7-3-block {
    top: 41%;
    left: 65%;
}
#play-answer-7-4-block {
    top: 82%;
    left: 25%;
}
#play-answer-7-5-block {
    top: 82%;
    left: 50%;
}
#play-answer-7-1 {
    top: 46%;
    left: 15.5%;
}
#play-answer-7-2 {
    top: 46%;
    left: 39.5%;
}
#play-answer-7-3 {
    top: 46%;
    left: 67.5%;
}
#play-answer-7-4 {
    top: 87%;
    left: 27.2%;
}
#play-answer-7-5 {
    top: 87%;
    left: 53%;
}
.unit7-play-1-shapes {
    top: 68.5%;
    left: 77.6%;
    width: 15%;
}
.unit7-play-1-animals {
    top: 76.2%;
    left: 77.6%;
    width: 15%;
}
.unit7-play-2-audio {
    height: 5vh;
    width: 5vh;
}
#play-audio-7-1 {
    top: 19%;
    left: 20%;
}
#play-audio-7-2 {
    top: 16%;
    left: 29%;
}
#play-audio-7-3 {
    top: 18%;
    left: 39%;
}
#play-audio-7-4 {
    top: 20%;
    left: 53%;
}
#play-audio-7-5 {
    top: 22%;
    left: 71.5%;
}
#play-audio-7-6 {
    top: 31.5%;
    left: 27.5%;
}
#play-audio-7-7 {
    top: 31.5%;
    left: 44%;
}
#play-audio-7-8 {
    top: 38.5%;
    left: 60%;
}
#play-audio-7-9 {
    top: 46%;
    left: 14.5%;
}
#play-audio-7-10 {
    top: 48.5%;
    left: 28.8%;
}
#play-audio-7-11 {
    top: 47.5%;
    left: 40.5%;
}
#play-audio-7-12 {
    top: 51%;
    left: 48%;
}
#play-audio-7-13 {
    top: 50%;
    left: 62%;
}
#play-audio-7-14 {
    top: 49.5%;
    left: 71%;
}
#play-audio-7-15 {
    top: 48.5%;
    left: 81%;
}
#play-audio-7-16 {
    top: 59%;
    left: 14.5%;
}
#play-audio-7-17 {
    top: 60.5%;
    left: 21.5%;
}
#play-audio-7-18 {
    top: 59%;
    left: 40%;
}
#play-audio-7-19 {
    top: 60.5%;
    left: 55.2%;
}
#play-audio-7-20 {
    top: 67.5%;
    left: 16.5%;
}
#play-audio-7-21 {
    top: 68.2%;
    left: 55.3%;
}
#play-audio-7-22 {
    top: 68%;
    left: 73%;
}
#play-audio-7-23 {
    top: 73%;
    left: 25.7%;
}
#play-audio-7-24 {
    top: 73%;
    left: 29.2%;
}
#play-audio-7-25 {
    top: 92%;
    left: 38.4%;
}
.unit7-play-2-random {
    top: 83%;
    left: 14.7%;
    width: 12%;
}
#wat-audio-7-1 {
    top: 20.5%;
    left: 31.5%;
}
#wat-audio-7-2 {
    top: 28%;
    left: 84%;
}
#wat-audio-7-3 {
    top: 45%;
    left: 55%;
}
#wat-audio-7-4 {
    top: 68%;
    left: 42.5%;
}
#wat-audio-7-5 {
    top: 69%;
    left: 81%;
}
#wat-video-7-1 {
    top: 27.5%;
    left: 29.5%;
}
#wat-video-7-2 {
    top: 35%;
    left: 81.7%;
}
#wat-video-7-3 {
    top: 52%;
    left: 52.7%;
}
#wat-video-7-4 {
    top: 75%;
    left: 40.2%;
}
#wat-video-7-5 {
    top: 76%;
    left: 79%;
}
#listen-audio-7-1 {
    top: 35.7%;
    left: 21%;
}
#listen-audio-7-2 {
    top: 35.7%;
    left: 41%;
}
#listen-audio-7-3 {
    top: 35.7%;
    left: 61%;
}
#listen-answer-7-1 {
    top: 35.7%;
    left: 30%;
}
#listen-answer-7-2 {
    top: 35.7%;
    left: 50%;
}
#listen-answer-7-3 {
    top: 35.7%;
    left: 70%;
}
.unit7-listen-answer-display {
    top: 42.9%;
    left: 23%;
    width: 54vw;
    height: 19vh;
}
#activity-audio-7-1 {
    top: 20%;
    left: 11%;
}
#activity-audio-7-2 {
    top: 20%;
    left: 41%;
}
#activity-audio-7-3 {
    top: 40%;
    left: 73%;
}
#activity-audio-7-4 {
    top: 79.5%;
    left: 73%;
}
#activity-answer-7-1 {
    top: 40%;
    left: 81.5%;
}
#activity-answer-7-2 {
    top: 79.5%;
    left: 81.5%;
}
.unit7-activity-answer-block {
    width: 15vw;
}
#activity-answer-7-1-block {
    top: 16%;
    left: 75%;
    height: 23vh;
}
#activity-answer-7-2-block {
    top: 48%;
    left: 75%;
    height: 31vh;
}
.unit8-play-1 {
    top: 5%;
    left: 55%;
}
.unit8-chant {
    top: 84%;
    left: 55%;
}
.unit8-play-2 {
    top: 5%;
    left: 10%;
}
.unit8-activity {
    height: 5%;
    width: 10%;
}
.unit8-3hints {
    top: 61%;
    left: 10%;
}
.unit8-kanji {
    top: 5%;
    left: 55%;
}
.unit8-footprints {
    top: 29.5%;
    left: 55%;
}
#play-audio-8-1 {
    top: 16.5%;
    left: 81%;
}
#play-audio-8-2 {
    top: 23.5%;
    left: 81%;
}
#play-audio-8-3 {
    top: 35.5%;
    left: 81%;
}
#play-audio-8-4 {
    top: 42.5%;
    left: 81%;
}
#play-audio-8-5 {
    top: 54.5%;
    left: 81%;
}
#play-audio-8-6 {
    top: 61.5%;
    left: 81%;
}
#play-audio-8-7 {
    top: 73.5%;
    left: 81%;
}
#play-audio-8-8 {
    top: 80.5%;
    left: 81%;
}
#play-answer-8-1 {
    top: 16.5%;
    left: 86.5%;
}
#play-answer-8-2 {
    top: 23.5%;
    left: 86.5%;
}
#play-answer-8-3 {
    top: 35.5%;
    left: 86.5%;
}
#play-answer-8-4 {
    top: 42.5%;
    left: 86.5%;
}
#play-answer-8-5 {
    top: 54.5%;
    left: 86.5%;
}
#play-answer-8-6 {
    top: 61.5%;
    left: 86.5%;
}
#play-answer-8-7 {
    top: 73.5%;
    left: 86.5%;
}
#play-answer-8-8 {
    top: 80.5%;
    left: 86.5%;
}
.unit8-play-1-audio-window {
    height: 12vh;
    top: 83%;
    left: 45%;
}
.unit8-image-layer-enlarge {
    position: absolute;
    top: 10%;
    left: 40%;;
    height: 6vh;
    width: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    box-shadow: var(--bigorange-button);
    cursor: pointer;

}
.unit8-image-layer-enlarged-image {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    height: 85vh;
    width: 80vw;
    z-index: 6;
    display: flex;
    justify-content: center;
}
.unit8-image-layer-enlarged-image img {
   height: 100%;
   width: auto;
}
#play-audio-8-9 {
    top: 44%;
    left: 15%;
}
#play-audio-8-10 {
    top: 44%;
    left: 34.5%;
}
#play-audio-8-11 {
    top: 44%;
    left: 54%;
}
#play-audio-8-12 {
    top: 44%;
    left: 73.5%;
}
#play-audio-8-13 {
    top: 84.8%;
    left: 15%;
}
#play-audio-8-14 {
    top: 84.8%;
    left: 34.5%;
}
#play-audio-8-15 {
    top: 84.8%;
    left: 54%;
}
#play-audio-8-16 {
    top: 84.8%;
    left: 73.5%;
}
#play-answer-8-9 {
    top: 44%;
    left: 20.2%;
}
#play-answer-8-10 {
    top: 44%;
    left: 39.7%;
}
#play-answer-8-11 {
    top: 44%;
    left: 59.5%;
}
#play-answer-8-12 {
    top: 44%;
    left: 79%;
}
#play-answer-8-13 {
    top: 84.8%;
    left: 20.2%;
}
#play-answer-8-14 {
    top: 84.8%;
    left: 39.7%;
}
#play-answer-8-15 {
    top: 84.8%;
    left: 59.5%;
}
#play-answer-8-16 {
    top: 84.8%;
    left: 79%;
}
.unit8-play-2-answer-display {
    height: 26.8vh;
    width: 11.2vw;
    border-radius: 5px;
    background-color: transparent;
}
#play-answer-8-9-img {
    top: 12.5%;
    left: 15.5%;
    height: 26.1vh;
    width: 10.6vw;
}
#play-answer-8-10-img {
    top: 14.2%;
    left: 37%;
    height: 23.8vh;
    width: 6.3vw;
}
#play-answer-8-11-img {
    top: 18.8%;
    left: 55%;
    height: 14.8vh;
    width: 10.3vw;
}
#play-answer-8-12-img {
    top: 12.5%;
    left: 75.7%;
    width: 7.2vw;
}
#play-answer-8-13-img {
    top: 58%;
    left: 15%;
    height: 18vh;
}
#play-answer-8-14-img {
    top: 56.5%;
    left: 35.5%;
    width: 9.4vw;
    height: 20.8vh;
}
#play-answer-8-15-img {
    top: 57.8%;
    left: 54.5%;
    height: 18.4vh;
    width: 10.5vw;
}
#play-answer-8-16-img {
    top: 58%;
    left: 74.2%;
    height: 18vh;
    width: 10.4vw;
}
#activity-audio-8-1 {
    top: 35%;
    left: 10%;
}
#activity-audio-8-2 {
    top: 35%;
    left: 20%;
}
#activity-audio-8-3 {
    top: 35%;
    left: 29%;
}
#activity-audio-8-4 {
    top: 35%;
    left: 38.5%;
}
#activity-audio-8-5 {
    top: 35%;
    left: 47%;
}
#activity-audio-8-6 {
    top: 35%;
    left: 56.5%;
}
#activity-audio-8-7 {
    top: 35%;
    left: 65.5%;
}
#activity-audio-8-8 {
    top: 57.5%;
    left: 14%;
}
#activity-audio-8-9 {
    top: 57.5%;
    left: 22.5%;
}
#activity-audio-8-10 {
    top: 57.5%;
    left: 32%;
}
#activity-audio-8-11 {
    top: 57.5%;
    left: 40%;
}
#activity-audio-8-12 {
    top: 57.5%;
    left: 51%;
}
#activity-audio-8-13 {
    top: 57.5%;
    left: 59.5%;
}
#activity-audio-8-14 {
    top: 57.5%;
    left: 68%;
}
#activity-audio-8-15 {
    top: 74.5%;
    left: 41%;
}
#activity-audio-8-16 {
    top: 74.5%;
    left: 49%;
}
#activity-audio-8-17 {
    top: 74.5%;
    left: 57%;
}
#activity-audio-8-18 {
    top: 81.8%;
    left: 41%;
}
#activity-audio-8-19 {
    top: 81.8%;
    left: 49%;
}
#activity-audio-8-20 {
    top: 81.8%;
    left: 57%;
}
#activity-audio-8-21 {
    top: 89%;
    left: 41%;
}
#activity-audio-8-22 {
    top: 89%;
    left: 49%;
}
#activity-audio-8-23 {
    top: 89%;
    left: 57%;
}
#activity-answer-8-1 {
    top: 74.5%;
    left: 64.5%;
}
#activity-answer-8-2 {
    top: 81.8%;
    left: 64.5%;
}
#activity-answer-8-3 {
    top: 89%;
    left: 64.5%;
}
.unit8-3hints-answer-display {
    width: 7vw;
    height: 14vh;
}
#activity-answer-8-1-display {
    top: 43%;
    left: 40.6%;
}
#activity-answer-8-2-display {
    top: 20.5%;
    left: 39%;
}
#activity-answer-8-3-display {
    top: 43%;
    left: 68.5%;
}
#activity-audio-8-24 {
    top: 73.5%;
    left: 15%;
}
#activity-audio-8-25 {
    top: 73.5%;
    left: 44.5%;
}
#activity-audio-8-26 {
    top: 73.5%;
    left: 73.5%;
}
#activity-answer-8-4 {
    top: 73.5%;
    left: 20.2%;
}
#activity-answer-8-5 {
    top: 73.5%;
    left: 49.7%;
}
#activity-answer-8-6 {
    top: 73.5%;
    left: 78.7%;
}
.unit8-kanji-answer-display, .unit8-footprints-answer-display {
    width: 17vw;
    height: 40vh;
    background-color: white;
}
#activity-answer-8-4-display {
    top: 25.5%;
    left: 11%;
}
#activity-answer-8-5-display {
    top: 25.5%;
    left: 41%;
}
#activity-answer-8-6-display {
    top: 25.5%;
    left: 71%;
}
#activity-audio-8-27 {
    top: 73.5%;
    left: 15%;
}
#activity-audio-8-28 {
    top: 73.5%;
    left: 44.5%;
}
#activity-audio-8-29 {
    top: 73.5%;
    left: 73.5%;
}
#activity-answer-8-7 {
    top: 73.5%;
    left: 20.2%;
}
#activity-answer-8-8 {
    top: 73.5%;
    left: 49.7%;
}
#activity-answer-8-9 {
    top: 73.5%;
    left: 78.7%;
}
#activity-answer-8-7-display {
    top: 25.5%;
    left: 11%;
}
#activity-answer-8-8-display {
    top: 25.5%;
    left: 41%;
}
#activity-answer-8-9-display {
    top: 25.5%;
    left: 71%;
}
.picture-book-select {
    position: absolute;
    top: 5%;
    height: 90vh;
    border-radius: 10px;
    cursor: pointer;
}
.picture-book-select-full {
    width: 80vw;
}
.picture-book-select-half {
    width: 40vw;
}
#book-page-1, #book-page-2, #book-page-4, #book-page-6 {
    left: 10%;
}
#book-page-3, #book-page-5 {
    left: 50%;
}
.picture-book-select-full:hover, .picture-book-select-half:hover {
    border: solid 8px red;
}
.book-view-control-bar {
    position: absolute;
    top: 91%;
    height: 7vh;
    width: 65vw;
    left: 50%;
    transform: translateX(-50%);
}
.picture-book-audio-player {
    position: absolute;
    height: 7vh;
    width: 40vw;
    border: none;
    top: 91.5%;
    left: 30%;
}
.picture-book-page-view-window {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 60vw;
    height: 78vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.picture-book-page-view-window img {
    height: 100%;
    width: auto;
    max-width: 60vw;
}
.unit9-book-control {
    width: 10%;
}
#book-page-back {
    top: 91%;
    left: 18%;
}
#book-page-next {
    top: 91%;
    left: 72.2%;
}
.picture-book-audio {
    position: absolute;
    /* background-color: blue;
    opacity: 0.5; */
    border-radius: 8px;
    cursor: pointer;
}
.picture-book-audio:hover {
    border: 6px solid red;
}
#audio-9-1 {
    top: 80.9%;
    left: 15.2%;
    height: 12.6vh;
    width: 25.8vw;
}
#audio-9-2 {
    top: 13%;
    left: 63%;
    height: 28.5vh;
    width: 23.5vw;
}
#audio-9-3 {
    top: 7.5%;
    left: 35.5%;
    height: 8vh;
    width: 12vw;
}
#audio-9-4 {
    top: 39.6%;
    left: 8%;
    height: 8vh;
    width: 12vw;
}
#audio-9-5 {
    top: 66%;
    left: 34.5%;
    height: 8vh;
    width: 12vw;
}
#audio-9-6 {
    top: 6.5%;
    left: 67.5%;
    height: 15vh;
    width: 23vw;
}
#audio-9-7 {
    top: 33.5%;
    left: 54.5%;
    height: 15vh;
    width: 23vw;
}
#audio-9-8 {
    top: 55%;
    left: 67.5%;
    height: 16vh;
    width: 23vw;
}
#audio-9-9 {
    top: 16%;
    left: 35.5%;
    height: 8vh;
    width: 12vw;
}
#audio-9-10 {
    top: 39.6%;
    left: 8%;
    height: 8vh;
    width: 12vw;
}
#audio-9-11 {
    top: 70%;
    left: 34.5%;
    height: 8vh;
    width: 12vw;
}
#audio-9-12 {
    top: 5%;
    left: 67.5%;
    height: 19vh;
    width: 23vw;
}
#audio-9-13 {
    top: 29%;
    left: 54.5%;
    height: 19vh;
    width: 23.5vw;
}
#audio-9-14 {
    top: 56%;
    left: 72.5%;
    height: 12vh;
    width: 18vw;
}
span {
    width: fit-content;
    height: min-content;
}
.grayed {
    opacity: 0.4;
}
.unavailable, #chant-repeat.unavailable {
    background-color: rgba(0,0,0,0.8);
    opacity: 0.5;
    pointer-events: none;
}
.closed {
    display: none;
    z-index: -25;
}