/* Copyright (C) 2025 Jan-Dirk van Dingenen */

@font-face {
    font-family: 'gothicabold';
    src: url('gothica-bold-webfont.woff2') format('woff2'),
         url('gothica-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dexte_denim_handwritingRg';
    src: url('dextedenimhandwriting-regular-webfont.woff2') format('woff2'),
         url('dextedenimhandwriting-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gunny_rewrittenregular';
    src: url('gnyrwn971-webfont.woff2') format('woff2'),
         url('gnyrwn971-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

::selection, button::selection {
  background: transparent;
}

body {
    overflow: hidden;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    background-color: #101010;
    background-image: url(img/table6.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
}

gameWrapper {
    margin:auto auto;
    height:calc(var(--baseSize)* 57);
    width:calc(var(--baseSize)* 100);
}

#gameBook {
    position: absolute;
    top: calc(var(--baseSize)* 9);
    left: 50%;
    transform: translate(-50%, 0);
    z-index:1;
}

#book {
    transition:margin-left 0.2s;
    filter: drop-shadow(0px 0px calc(var(--baseSize)* 2) #f0f0f025);
    --cursorX:-1000;
    --cursorY:-1000;
}

#book .page, #book .hard {
    background-size: cover;
    background-repeat: no-repeat;
}

#book .page:not(.cover), .pageCanvas, .innerPageWrapper {
    text-align:center;
    width: calc(var(--baseSize) * var(--bookWidth)) !important;
    height: calc(var(--baseSize)* var(--bookHeight)) !important;
}

.pageCanvas {
    pointer-events: none;
    filter: drop-shadow(calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.1) black);
}

#book[activetool='Magnify'] .innerPageWrapper:has(.magnifyCursor) > .pageCanvas {
    -webkit-mask-image: radial-gradient(circle at calc(var(--cursorX)* var(--baseSize)) calc(var(--cursorY)* var(--baseSize)), #00000000 0px, #00000000 calc(var(--baseSize)* 7), #101010 calc(var(--baseSize)* 7));
}

#book .page-wrapper{
    perspective:2000px;
}

#book .cover{
    box-shadow:inset 0 0 5px #666;
}

#book .coverFront {
    background-image: url(img/cover3.png);
}

#book #coverEye {
    --eyeX: calc(calc(calc(var(--cursorX))) - 8);
    --eyeY: calc(calc(calc(var(--cursorY))) - 8);
    --minX: min(var(--eyeX), 9);
    --maxX: max(var(--minX), 7.5);
    --minY: min(var(--eyeY), 9.25);
    --maxY: max(var(--minY), 8.5);
    position: absolute;
    left: calc(var(--baseSize)* var(--maxX));
    top: calc(var(--baseSize)* var(--maxY));
    background-image: url(img/eye2.jpg);
    width: calc(var(--baseSize)* 14);
    height: calc(var(--baseSize)* 14);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    transition: left 2s ease-out, top 2s ease-out;
}

#book .coverInsideFront {
    background-image: url(img/insideCover3.png);
}

#book .coverInsideBack {
    background-image: url(img/insideBack2.png);
}

#book .coverBack {
    background-image: url(img/coverBack1.png);
}

#book .page.odd:not(.hard):after {
    content: "";
    position: absolute;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.5) 3%, rgba(0, 0, 0, 0) 12%);
    box-shadow: inset 0 0 var(--baseSize) #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events:none;
    z-index: 2;
}

#book .page.even:not(.hard):after {
    content: "";
    position: absolute;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.5) 3%, rgba(0, 0, 0, 0) 12%);
    box-shadow: inset 0 0 var(--baseSize) #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events:none;
    z-index: 2;
}

#tools {
    position: absolute;
    top: calc(var(--baseSize)* 2);
    transform: translate(-50%, 0);
    left: 50%;
    display: flex
;
    gap: calc(var(--baseSize)* 1);
    background-color: #1e1c13;
    padding: calc(var(--baseSize)* 0.5);
    padding-top: calc(var(--baseSize)* 0.8);
    box-shadow: inset 0 0 calc(var(--baseSize)* 0.5) #e2d5af;
    box-sizing: border-box;
    border: solid calc(var(--baseSize)* 0.2) #f6e7b4;
    border-style: groove;
    border-radius: calc(var(--baseSize)* 0.2);
}

.tool {
    position: relative;
    width: calc(var(--baseSize)* 4);
    height: calc(var(--baseSize)* 4);
    background-color: #dfdbc8;
    box-shadow: inset calc(var(--baseSize)* 0.2) calc(var(--baseSize)* 0.2) calc(var(--baseSize)* 0.5) #ffeded, 0 0 calc(var(--baseSize)* 0.25) #666666;
    border-radius: calc(var(--baseSize)* 0.2);
    box-sizing: border-box;
    cursor: pointer;
    background-image: url(img/iconCircle.jpg);
    background-size: contain;
}

.tool:after {
    content: attr(toolname);
    position: absolute;
    top: calc(var(--baseSize)* -0.75);
    width: calc(var(--baseSize)* 4);
    text-align: center;
    font-size: calc(var(--baseSize)* 0.6);
    font-family: monospace;
    text-transform: uppercase;
    color: #e2d5af;
}

.tool:before {
    content: "";
    position: absolute;
    width: calc(var(--baseSize)* 3);
    height: calc(var(--baseSize)* 3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: var(--img);
    background-size: calc(var(--baseSize)* 3) calc(var(--baseSize)* 3);
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0.5) sepia(1) hue-rotate(10deg) brightness(1.6) drop-shadow(calc(var(--baseSize)* 0.05) calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.05) black);
}

.tool:hover {
    filter: drop-shadow(calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.2) calc(var(--baseSize)* 0.3) black) brightness(1.1);
}

.cursorDiv {
    position: absolute;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index: 5;
}

.cursorDiv.portableHolepuncherL {
    border-radius: 50%;
    background-color:#00000080;
    width: calc(var(--baseSize)* 4);
    height: calc(var(--baseSize)* 4);
}

.cursorDiv.portableHolepuncherM {
    border-radius: 50%;
    background-color:#00000080;
    width: calc(var(--baseSize)* 2);
    height: calc(var(--baseSize)* 2);
}

.cursorDiv.portableHolepuncherS {
    border-radius: 50%;
    background-color:#00000080;
    width: calc(var(--baseSize)* 1.5);
    height: calc(var(--baseSize)* 1.5);
}
.cursorDiv.markTool, .cursorDiv.markTool:after {
    background-color: #00000080;
    width: calc(var(--baseSize)* 0.9);
    height: calc(var(--baseSize)* 0.15);
    rotate: 45deg;
    transform: translate(calc(var(--baseSize)* -0.4), calc(var(--baseSize)* 0.3));
}

.cursorDiv.markTool:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    rotate: -90deg;
    transform: translate(0, 0);
}

.cursorDiv.repairCursor {
    width: calc(var(--baseSize)* 2);
    height: calc(var(--baseSize)* 3);
    background-image: url(icons/wrench.svg);
    background-size: calc(var(--baseSize)* 3) calc(var(--baseSize)* 3);
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.2) calc(var(--baseSize)* 0.1) black);
    transform: translate(25%, -25%);
}

.cursorDiv.hintCursor {
    width: calc(var(--baseSize)* 2);
    height: calc(var(--baseSize)* 3);
    background-image: url(icons/hint.svg);
    background-size: calc(var(--baseSize)* 3) calc(var(--baseSize)* 3);
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.2) calc(var(--baseSize)* 0.1) black);
    transform: translate(25%, -25%);
}

.cursorDiv.lampCursor {
    border-radius: 50%;
    backdrop-filter: brightness(1) contrast(1.4) grayscale(1) sepia(1);
    width: calc(var(--baseSize)* 14);
    height: calc(var(--baseSize)* 14);
    box-shadow: 0 0 0 1px #00ffff, 0 0 calc(var(--baseSize)* 2) #00ffff94, inset 0 0 calc(var(--baseSize)* 2) #00ffff73;
    z-index: 5;
}

.cursorDiv.measureCursor {
    width: calc(var(--baseSize)* 2);
    height: calc(var(--baseSize)* 2);
    background-image: url(icons/measure-tape.svg);
    background-size: calc(var(--baseSize)* 2) calc(var(--baseSize)* 2);
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.2) calc(var(--baseSize)* 0.1) black);
    transform: translate(25%, -25%);
}

.cursorDiv.magnifyCursor {
    border-radius: 50%;
    width: calc(var(--baseSize)* 14);
    height: calc(var(--baseSize)* 14);
    box-shadow: 0 0 calc(var(--baseSize)* 0.75) calc(var(--baseSize)* 0.75) #0000005e, 0 0 calc(var(--baseSize)* 1) #ffffff, 0 0 0 calc(var(--baseSize)* 1) #989797, 0 0 calc(var(--baseSize)* 0.5) calc(var(--baseSize)* 1) #000, inset 0 0 calc(var(--baseSize)* 4) #cfcfcf;
    z-index: 5;
}

.lanternLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 4;
    -webkit-mask-image: radial-gradient(circle at calc(var(--cursorX)* var(--baseSize)) calc(var(--cursorY)* var(--baseSize)), black 0px, black calc(var(--baseSize)* 6.5), transparent calc(var(--baseSize)* 7));
    background-color: #00ffff59;
    pointer-events: none;
    color: #000000;
    font-family: gunny_rewrittenregular;
    font-size: calc(var(--baseSize)* 1.1);
    line-height: calc(var(--baseSize)* 1);
    display: none;
    text-shadow: 0 0 3px #dcbe93, 0 0 3px #e1d6c7;
}

.underLanternLayer {
    z-index:-1;
}

.underLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.zoomLayer {
    position: absolute;
    --halfPageX: calc(var(--bookWidth) / 2);
    --halfPageY: calc(var(--bookHeight) / 2);
    top: calc(calc(var(--cursorY) - var(--halfPageY))* var(--baseSize)* -1);
    left: calc(calc(var(--cursorX) - var(--halfPageX))* var(--baseSize)* -1);
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 4;
    -webkit-mask-image: radial-gradient(circle at calc(var(--cursorX)* var(--baseSize)) calc(var(--cursorY)* var(--baseSize)), black 0px, black calc(var(--baseSize)* 3.25), transparent calc(var(--baseSize)* 3.5));
    pointer-events: none;
    scale: 2;
}

#book:not([activetool='Lamp']) .lanternLayer {
    display:none !important;
}

.uiLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 3;
}

.page1Text {
    width: calc(var(--baseSize)* 26);
    rotate: -4deg;
    margin-left: calc(var(--baseSize)* 2);
    margin-top: calc(var(--baseSize)* 11.5);
    text-align: left;
}

.hiddenText7 {
    position: absolute;
    left: calc(var(--baseSize)* 9.8);
    top: calc(var(--baseSize)* 4.5);
    font-weight: bold;
}

.page2Image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(img/lantern2.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.page2Text {
    width: calc(var(--baseSize)* 23);
    rotate: -4deg;
    margin-left: calc(var(--baseSize)* 2);
    margin-top: calc(var(--baseSize)* 2);
    text-align: left;
}

.page3Text {
    width: calc(var(--baseSize)* 13);
    margin-left: calc(var(--baseSize)* 15);
    margin-top: calc(var(--baseSize)* 1.5);
    rotate: 5deg;
    font-size: calc(var(--baseSize)* 1.4);
    text-shadow: 0 0 3px #dcbe93, 0 0 3px #e1d6c7;
    line-height: calc(var(--baseSize)* 1.2);
}

.page7Text {
    width: calc(var(--baseSize)* 14);
    rotate: -5deg;
    margin-left: calc(var(--baseSize)* 7);
    margin-top: calc(var(--baseSize)* 19);
    text-align: left;
    background-image: url(img/tentaclethingy.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: calc(var(--baseSize)* 7);
}

.page5Text {
    width: calc(var(--baseSize)* 10);
    rotate: -5deg;
    margin-left: calc(var(--baseSize)* 2);
    margin-top: calc(var(--baseSize)* 31);
    text-align: left;
}

.page9Text {
    width: calc(var(--baseSize)* 12);
    margin-left: calc(var(--baseSize)* 2.5);
    margin-top: calc(var(--baseSize)* 19);
    text-align: justify;
}

.page11Text {
    width: calc(var(--baseSize)* 9);
    rotate: 0deg;
    margin-left: calc(var(--baseSize)* 18.6);
    margin-top: calc(var(--baseSize)* 8);
    text-align: justify;
}

.page12Text, .page13Text {
    position: absolute;
    width: calc(var(--baseSize)* 19);
    font-size: calc(var(--baseSize)* 0.75);
    line-height: calc(var(--baseSize)* 0.9);
    text-align: justify;
    pointer-events: none;
    color: #211505;
    font-family: 'gothicabold';
    text-shadow: 0 0 1px #ffffff80;
}

.page12aText {
    top: calc(var(--baseSize)* 6.5);
    left: calc(var(--baseSize)* 8.5);
}

.page13bText {
    top: calc(var(--baseSize)* 6.5);
    left: calc(var(--baseSize)* 1);
}

.page12cText {
    bottom: calc(var(--baseSize)* 4.5);
    left: calc(var(--baseSize)* 8.5);
}

.page13dText {
    bottom: calc(var(--baseSize)* 5.5);
    left: calc(var(--baseSize)* 2);
}

.page12LanternText {
    position: absolute;
    left: calc(var(--baseSize)* -15);
    top: calc(var(--baseSize)* 18.5);
    width: calc(var(--baseSize)* 35);
    rotate: -90deg;
}

.page14LanternText {
    position: absolute;
    left: calc(var(--baseSize)* 13);
    top: calc(var(--baseSize)* 14.5);
    width: calc(var(--baseSize)* 14);
    text-align: justify;
}

.page14LanternText p:last-child {
    transform: translate(calc(var(--baseSize)* -1), 0);
    width: calc(var(--baseSize)* 15);
}

.page16Text {
    width: calc(var(--baseSize)* 18);
    rotate: 1deg;
    margin-left: calc(var(--baseSize)* 5);
    margin-top: calc(var(--baseSize)* 25);
    text-align: left;
}

.page16bText {
    width: calc(var(--baseSize)* 18.5);
    rotate: 1deg;
    margin-left: calc(var(--baseSize)* 5);
    margin-top: calc(var(--baseSize)* 26);
    text-align: left;
}

.page16Image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(img/lantern12.png);
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events:none;
}

.page17Image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(img/lantern13.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.head {
    position: absolute;    
    border-radius: 50%;
    width: calc(var(--baseSize)* 2.2);
    height: calc(var(--baseSize)* 2.3);
}

.head.head1 {
    top: calc(var(--baseSize)* 7.5);
    left: calc(var(--baseSize)* 5);
}

.head.head2 {
    top: calc(var(--baseSize)* 11);
    left: calc(var(--baseSize)* 10.1);
    width: calc(var(--baseSize)* 2);
}

.head.head3 {
    top: calc(var(--baseSize)* 6.89);
    left: calc(var(--baseSize)* 16.5);
}

.head.head4 {
    top: calc(var(--baseSize)* 7.4);
    left: calc(var(--baseSize)* 22.3);
    width: calc(var(--baseSize)* 2);
}

.head.head5 {
    top: calc(var(--baseSize)* 16.1);
    left: calc(var(--baseSize)* 23.1);
}

.head.head6 {
    top: calc(var(--baseSize)* 17.1);
    left: calc(var(--baseSize)* 21.5);
}

.head.head7 {
    top: calc(var(--baseSize)* 16.5);
    left: calc(var(--baseSize)* 6.8);

}

.head.headClicked {
    backdrop-filter: brightness(1.2);
}

.uiLayer16 .codeclicky1 {
    position: absolute;
    width: calc(var(--baseSize)* 3);
    height: calc(var(--baseSize)* 3);
    top: calc(var(--baseSize)* 13.1);
    left: calc(var(--baseSize)* 11.5);
    clip-path: polygon(78% 31%, 100% 22%, 87% 60%, 63% 83%, 31% 78%, 17% 100%, 0 100%, 0 73%, 27% 37%, 85% 2%);
}

.uiLayer16 .codeclicky2 {
    position: absolute;
    width: calc(var(--baseSize)* 3);
    height: calc(var(--baseSize)* 4);
    top: calc(var(--baseSize)* 8);
    left: calc(var(--baseSize)* 18.5);
    border-radius: 90% 90% 0 130%;
}

.numberWheel {
    --wheelSize: 1;
    position: absolute;    
    display: flex;
    flex-direction: column;
    font-size: calc(var(--baseSize)* var(--wheelSize));
}

.page3 .numberWheel {
    left: calc(var(--baseSize)* 13);
    top: calc(var(--baseSize)* 32.5);
}

.page5 .numberWheel {
    left: calc(var(--baseSize)* 24.3);
    top: calc(var(--baseSize)* 16);
}

.page3 .numberWheel.numberWheel1 {
    left: calc(var(--baseSize)* 14.5);
}

.page3 .numberWheel.numberWheel2 {
    left: calc(var(--baseSize)* 16);
}

.page5 .numberWheel.numberWheel1 {
    left: calc(var(--baseSize)* 26);
}


.page13 .numberWheel {
    left: calc(var(--baseSize)* 17);
    top: calc(var(--baseSize)* 16);
}

.page13 .numberWheel.numberWheel1 {
    left: calc(var(--baseSize)* 18.5);
}

.page13 .numberWheel.numberWheel2 {
    left: calc(var(--baseSize)* 20);
}


.numberWheelLineWrap {
    position: relative;
    overflow: hidden;
    height: calc(var(--baseSize)* var(--wheelSize));
    width: calc(var(--baseSize)* var(--wheelSize));
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.65) 100%);
}

.numberWheelNum {
    width: calc(var(--baseSize)* var(--wheelSize));
    height: calc(var(--baseSize)* var(--wheelSize));
    text-align: center;
    line-height: calc(var(--baseSize)* var(--wheelSize));
    color: #3c2401;
    background: linear-gradient(to bottom, rgba(206, 176, 133, 0.35) 0%, rgba(206, 176, 133, 0.85) 50%, rgba(206, 176, 133, 0.35) 100%);
    font-family: sans-serif;
}

.numberWheelLine {    
    position: absolute;
    top: calc(var(--baseSize)* var(--wheelSize) * var(--numSelected) * -1);
    left:0;
    box-sizing: border-box;
    transition: top 0.5s;
}

.numberWheelUp, .numberWheelDown {
    --halfWheelSize : calc(var(--wheelSize) / 2);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 calc(var(--baseSize)* var(--halfWheelSize)) calc(var(--baseSize)* var(--halfWheelSize)) calc(var(--baseSize)* var(--halfWheelSize));
    border-color: transparent transparent #482d05c2 transparent;
    filter: drop-shadow(1px 1px 0 #a7895e) drop-shadow(-1px -1px 0 #a7895e);
}

.numberWheelDown {
    transform: rotate(180deg);
}

.clockDial {
    position: absolute;
    width: calc(var(--baseSize)* 2.5* var(--clockSize));
    height: calc(var(--baseSize)* 2.5* var(--clockSize));
    border-radius: 100%;
}

.clockDial0 {
    top: calc(var(--baseSize)* 9);
    left: calc(var(--baseSize)* 2);
}

.clockDial1 {
    top: calc(var(--baseSize)* 31.5);
    left: calc(var(--baseSize)* 2.8);
}

.clockDial2 {
    top: calc(var(--baseSize)* 33.7);
    left: calc(var(--baseSize)* 12.4);
}

.clockDial3 {
    top: calc(var(--baseSize)* 30.9);
    left: calc(var(--baseSize)* 20.4);
}

.clockHandle {
    position: absolute;
    bottom: calc(var(--baseSize)* 1.3* var(--clockSize));
    left: calc(var(--baseSize)* 1.2* var(--clockSize));
    width: calc(var(--baseSize)* 0.225* var(--clockSize));
    height: calc(var(--baseSize)* 1.3* var(--clockSize));
    background-image: url(img/clockHandle.png);
    background-repeat: no-repeat;
    rotate: calc(var(--value)* 30deg);
    transform-origin: bottom center;
    filter: sepia(1) drop-shadow(1px 1px 1px black);
}

.backText {
    font-family: dexte_denim_handwritingRg;
    color: white;
    font-size: calc(var(--baseSize)* 1.97);
    padding: calc(var(--baseSize)* 3);
    font-weight: bold;
    text-shadow: 0 0 calc(var(--baseSize)* 0.1) #dd8405;
    font-variant: all-petite-caps;
    letter-spacing: calc(var(--baseSize)* 0.33);
    text-align: justify;
    animation: letterPulse 10s infinite;
    animation-timing-function: linear;
    cursor:default;
}

@keyframes letterPulse {
  0% { color:#fff; text-shadow: 0 0 calc(var(--baseSize)* 0.1) #dd8405;}
  50% { color:#ffdc96; text-shadow: 0 0 calc(var(--baseSize)* 0.5) #a2ff00;}
  100% { color:#fff; text-shadow: 0 0 calc(var(--baseSize)* 0.1) #dd8405;}
}

.measureLine {
    position: absolute;
    left: calc(var(--fromX)* var(--baseSize));
    top: calc(var(--fromY)* var(--baseSize));
    rotate: calc(var(--rot) - 90deg);
    width: calc(var(--baseSize)* 0.5);
    height: calc(var(--len)* var(--baseSize));
    background-color: #000;
    transform-origin: top left;
    pointer-events: none;
    background-image: url(img/measure.png);
    background-size: var(--baseSize);
    background-repeat: repeat-y;
    opacity: 0.75;
}

.revealcode {
    position: absolute;
    width: calc(var(--baseSize)* 0.75);
    height: calc(var(--baseSize)* 0.75);
    top: calc(var(--baseSize)* 11.6);
    left: calc(var(--baseSize)* 4.6);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.lanternLayer .revealcode {
    background-image: url(img/reveal.png);
}

.deepPlanet {
    position: absolute;
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.deepPlanet.deepPlanet1 {
    background-image: url(img/mars.png);
    left: calc(var(--baseSize)* 0.6);
    top: calc(var(--baseSize)* 13.1);
    width: calc(var(--baseSize)* 4);
    height: calc(var(--baseSize)* 4);
    rotate: 7deg;
}

.deepPlanet.deepPlanet2 {
    background-image: url(img/jupiter.png);
    left: calc(var(--baseSize)* 21.8);
    top: calc(var(--baseSize)* 15.4);
    width: calc(var(--baseSize)* 4);
    height: calc(var(--baseSize)* 4);
}

.deepPlanet.deepPlanet3 {
    background-image: url(img/neptune.png);
    left: calc(var(--baseSize)* 15.2);
    top: calc(var(--baseSize)* 0.3);
    width: calc(var(--baseSize)* 2.3);
    height: calc(var(--baseSize)* 2.3);
}

.deepPlanet.deepPlanet4 {
    background-image: url(img/earth.png);
    left: calc(var(--baseSize)* 13.2);
    top: calc(var(--baseSize)* 7.8);
    width: calc(var(--baseSize)* 4.3);
    height: calc(var(--baseSize)* 4.4);
}

.deepPlanet.deepPlanet5 {
    background-image: url(img/pinkplanet.png);
    left: calc(var(--baseSize)* 25.9);
    top: calc(var(--baseSize)* 11.3);
    width: calc(var(--baseSize)* 2.7);
    height: calc(var(--baseSize)* 2.7);
}

.deepPlanet.deepPlanet6 {
    background-image: url(img/greenplanet.png);
    left: calc(var(--baseSize)* 8.1);
    top: calc(var(--baseSize)* 13.5);
    width: calc(var(--baseSize)* 2.7);
    height: calc(var(--baseSize)* 2.7);
}

.deepPlanet.uiElement {
    background-image: none !important;
}

#book:not([activetool='']) .uiElement {
    pointer-events:none;
}

#lampLight {
    position: absolute;
    pointer-events: none;
    top: calc(var(--baseSize)* 9);
    right: calc(var(--baseSize)* 8);
    width: calc(var(--baseSize)* 8);
    height: calc(var(--baseSize)* 8);
    box-shadow: calc(var(--baseSize)* -15) calc(var(--baseSize)* 7) calc(var(--baseSize)* 42) cyan;
    border-radius: 100%;
    z-index: 99;
}

#lampLight2 {
    position: absolute;
    pointer-events: none;
    top: calc(var(--baseSize)* -15);
    left: calc(var(--baseSize)* 0);
    width: calc(var(--baseSize)* 15);
    height: calc(var(--baseSize)* 15);
    box-shadow: calc(var(--baseSize)* 2) calc(var(--baseSize)* 2) calc(var(--baseSize)* 100) #ffff75;
    border-radius: 100%;
    z-index: 99;
}

.page11eye {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: none;
    pointer-events:none;
}

.lefteye.page11eye {
    background-image: url(img/page11lefteye.png);
}

.righteye.page11eye {
    background-image: url(img/page11righteye.png);
}

.hovertje1 {
    position: absolute;
    width: calc(var(--baseSize)* 2);
    height: calc(var(--baseSize)* 2);
    top: calc(var(--baseSize)* 8);
    left: calc(var(--baseSize)* 15);
    clip-path: polygon(31% 72%, 48% 59%, 45% 46%, 31% 28%, 43% 13%, 74% -5%, 45% 28%, 57% 43%, 61% 59%, 41% 76%, 20% 82%, 55% 75%);
}

.hovertje2 {
    position: absolute;
    width: calc(var(--baseSize)* 3);
    height: calc(var(--baseSize)* 0.5);
    top: calc(var(--baseSize)* 24);
    left: calc(var(--baseSize)* 22);
    clip-path: polygon(14% 12%, 30% 54%, 48% 42%, 79% 50%, 85% 15%, 89% 38%, 88% 60%, 70% 80%, 49% 59%, 29% 79%, 11% 62%, 10% 38%);
    rotate: -36deg;
}


.skulleye {
    position: absolute;    
    width: calc(var(--baseSize)* 0.4);
    height: calc(var(--baseSize)* 0.4);
    border-radius: 50% 100%;    
    box-shadow: 0 0 calc(var(--baseSize)* 0.5) cyan;
    background: radial-gradient(ellipse at center, rgba(255, 244, 244, 1) 21%, rgba(0, 255, 255, 1) 100%);
    pointer-events:none;
    display:none;
}

.skulleye1 {
    top: calc(var(--baseSize)* 4.5);
    left: calc(var(--baseSize)* 25.4);
    rotate: -6deg;
}

.skulleye2 {
    top: calc(var(--baseSize)* 4.9);
    left: calc(var(--baseSize)* 26.5);
    rotate: -26deg;
}

.skulleye3 {
    top: calc(var(--baseSize)* 33.45);
    left: calc(var(--baseSize)* 23.1);
    width: calc(var(--baseSize)* 0.7);
    height: calc(var(--baseSize)* 0.4);
    rotate: -15deg;
}

.skulleye4 {
    top: calc(var(--baseSize)* 33.2);
    left: calc(var(--baseSize)* 24.8);
    width: calc(var(--baseSize)* 0.55);
    height: calc(var(--baseSize)* 0.45);
    rotate: -44deg;
}

#startGame {
    position: absolute;
    font-family: gothicabold;
    bottom: 10vh;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 4vh;
    color: #f2b045bd;
    cursor: pointer;
    background-image: url(img/button.png);
    padding: 2vh 3.5vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #edd5ad;
    border-bottom: 0.5vh solid #27120c;
    border-right: 0.5vh solid #4b2316;
}

#startGame:hover {
    filter: hue-rotate(-15deg) brightness(1.2);
    transition: all 1s;
    border-bottom: 0.1vh solid #27120c;
    border-right: 0.1vh solid #4b2316;
    transform: translate(calc(-50% - 0.3vh), -0.2vh);
}

#intro {
    position: absolute;
    font-family: gothicabold;
    color: #fccf87;
    width: 50vw;
    bottom: 25vh;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: justify;
    font-size: 2vh;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #d5b581;
}

#splashScreen {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-image: url(img/intro.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #022734;    
    z-index: 2;
}

#splashText {
    position: absolute;
    color: #fec900;
    text-shadow: 0.2vh 0.2vh 0 #000, -0.1vh -0.1vh 1px #42dad9;
    font-family: 'gothicabold';
    font-size: 4vh;
    left: 50%;
    bottom: 5vh;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

#splashTitle {
    position: absolute;
    color: #fec900;
    text-shadow: 0.5vh 0.5vh 0 #000, -0.25vh -0.25vh 1px #42dad9;
    font-family: 'gothicabold';
    font-size: 1vh;
    left: 50%;
    top: 15vh;
    transform: translate(-50%, -50%);
    cursor: pointer;
    animation: splashIn;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    opacity:0;
}

@keyframes splashIn {
  0% { font-size: 1vh; scale:0.1; opacity:0;}
  5% { font-size: 1vh; scale:0.2; opacity:1;}
  100% { font-size: 14vh; scale:1; opacity:1;}
}

#quithelp {
    position: absolute;
    bottom: 1vh;
    color: #fbcf87;
    font-family: 'gothicabold';
    right: 1vh;
    opacity: 0.5;
    display:none;
}


#book[activetool='Measure'][current='12'] .page-wrapper[page='14'],
#book[activetool='Measure'][current='13'] .page-wrapper[page='14'] {
    width:97% !important;
    z-index:30 !important;
}

#book[activetool='Measure'][current='12'] .page:not(.cover).page12, 
#book[activetool='Measure'][current='13'] .page:not(.cover).page12, 
#book[activetool='Measure'] .innerPageWrapper.innerPageWrapper12 {
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

#book[activetool='Measure'][current='12'] canvas.pageCanvas,
#book[activetool='Measure'][current='13'] canvas.pageCanvas{
    position: absolute;
    top: 0;
    left: 0;
}

#book[activetool='Measure'][current='12'] .page-wrapper[page='14'] > div, 
#book[activetool='Measure'][current='13'] .page-wrapper[page='14'] > div, 
#book[activetool='Measure'][current='12'] .page-wrapper[page='14'] > div > div,
#book[activetool='Measure'][current='13'] .page-wrapper[page='14'] > div > div {
    width: 100% !important;
    transform: none !important;
    rotate: none !important;
}

#page18ExtraCanvas {
    pointer-events:none;
}

.page15Horror {
    display:none;
}

.page15Horror1 {
    position: absolute;
    top: calc(var(--baseSize)* 3.9);
    left: calc(var(--baseSize)* 15.8);
    width: calc(var(--baseSize)* 13);
    height: calc(var(--baseSize)* 24.5);
    background-image: url(img/horror.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.page15Horror2 {
    position: absolute;
    top: calc(var(--baseSize)* 4.5);
    left: calc(var(--baseSize)* 10);
    width: calc(var(--baseSize)* 18);
    height: calc(var(--baseSize)* 33.5);
    background-image: url(img/horror2.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.page15Horror3 {
    position: absolute;
    top: calc(var(--baseSize)* 6);
    left: calc(var(--baseSize)* 2);
    width: calc(var(--baseSize)* 30);
    height: calc(var(--baseSize)* 56);
    background-image: url(img/horror2.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.page15Horror4 {
    position: absolute;
    top: calc(var(--baseSize)* 6);
    left: calc(var(--baseSize)* -4); 
   width: calc(var(--baseSize)* 43);
    height: calc(var(--baseSize)* 61);
    background-image: url(img/horror3.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
}

#poemScroller {
    position: absolute;
    width: max-content;
    left: 50%;
    transform: translate(-50%, 0);
    top: 100%;
    z-index: 2;
    font-family: 'dexte_denim_handwritingRg';
    font-size: calc(var(--baseSize)* 1.4) !important;
    font-weight: bolder;
    color: #000000;
    text-shadow: -1px -1px 0 #2e1703, 1px 1px 0 #cc7800;
    text-align: left;
    animation: poemScroll 120s infinite;
    animation-timing-function: linear;
}

@keyframes poemScroll {
  0% { top:100%;}
  100% { top:-100%;}
}

#clock {
    position: absolute;
    top: calc(var(--baseSize)* 3.7);
    left: calc(var(--baseSize)* 19);
    width: calc(var(--baseSize)* 6);
    height: calc(var(--baseSize)* 6);
    border-radius: 50%;
    --hours: 0;
    --minutes: 0;
    rotate: -22deg;
    z-index: -1;
    pointer-events: none;
}

.clockHand {
    width: 50%;
    position: absolute;
    top: 50%;
    transform-origin: 100%;
    transform: rotate(90deg);
    background: linear-gradient(to right, rgba(90, 90, 90, 0) 0%, rgba(90, 90, 90, 0) 20%, rgb(57 57 57 / 90%) 21%, rgb(86 86 86) 90%, rgba(90, 90, 90, 0) 100%);
}

.clockHandHours {
    height: calc(var(--baseSize)* 0.2);
    rotate: calc(var(--hours) * 1deg);
}

.clockHandMinutes{
    height: calc(var(--baseSize)* 0.1);
    rotate: calc(var(--minutes) * 1deg);
}

.puzzle15Piece {
    position: absolute;
    width: calc(var(--baseSize)* 5);
    height: calc(var(--baseSize)* 6.5);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    filter: sepia(0.4) drop-shadow(calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.12) #000000a0);
}

#puzzlePieceContainer {
    position: absolute;
    top: 0;
    left: 10%;
    width: 90%;
    height: 100%;
    pointer-events:none;
}

.puzzle15Piece1 {
    top:calc(var(--baseSize)* 12);
    left:calc(var(--baseSize)* 11);
    background-image: url(img/page15piece1.png);
}

.puzzle15Piece2 {
    top:calc(var(--baseSize)* 22);
    left:calc(var(--baseSize)* 9);    
    background-image: url(img/page15piece7.png);
}

.puzzle15Piece3 {
    top:calc(var(--baseSize)* 27);
    left:calc(var(--baseSize)* 2);
    background-image: url(img/page15piece3.png);
}

.puzzle15Piece4 {
    top:calc(var(--baseSize)* 18);
    left:calc(var(--baseSize)* 19);
    background-image: url(img/page15piece4.png);
}

.puzzle15Piece5 {
    top:calc(var(--baseSize)* 17);
    left:calc(var(--baseSize)* 2);
    background-image: url(img/page15piece5.png);
}

.puzzle15Piece6 {
    top: calc(var(--baseSize)* 29);
    left: calc(var(--baseSize)* 15.5);
    background-image: url(img/page15piece6.png);
}

.hintCard {
    position: relative;
    top: calc(var(--baseSize)* 1 + calc(var(--clue)* var(--baseSize)* -3));
    left: calc(var(--baseSize)* -0.5 + calc(var(--clue)* var(--baseSize)* 0.5));
    width: calc(var(--baseSize)* 20);
    height: calc(var(--baseSize)* 11);
    padding: calc(var(--baseSize)* 1.5);
    cursor: move;
    background-image: url(img/clueCard3.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.1) calc(var(--baseSize)* 0.15) black);
    padding-top: calc(var(--baseSize)* 3.5);
    padding-bottom: calc(var(--baseSize)* 0.5);
    box-sizing: border-box;
    font-family: 'gunny_rewrittenregular';
    font-size: calc(var(--baseSize)* 1);
    line-height: calc(var(--baseSize)* 0.9);
    color: #303030;
}

.clueRevealLink {
    position: absolute;
    top: calc(var(--baseSize)* 0.5);
    right: calc(var(--baseSize)* 1);
    width: fit-content;
    text-decoration: underline;
    cursor: pointer;
    padding: calc(var(--baseSize)* 0.25);
    backdrop-filter: blur(calc(var(--baseSize)* 0.05));
    border-radius: calc(var(--baseSize)* 0.5);
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

.clueRevealLink:hover {
    filter: invert(1);
}

.hintCard.hiddenHint {
    background-image: var(--backImage, url('img/card1-0.png'));
}

img.hintpart {
    vertical-align: top;
    height: calc(var(--baseSize)* 4);
    width: auto;
}

#scoring {
    position: absolute;
    top: calc(var(--baseSize)* 16);
    left: calc(var(--baseSize)* 59);
    width: calc(var(--baseSize)* 14);
    height: calc(var(--baseSize)* 22);
    z-index: 0;
    text-align: center;
    font-family: 'gothicabold';
    font-size: calc(var(--baseSize)* 2);
    color: #00f8ff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #acf2f4;
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
    display:none;
}

.innerPageWrapper:after {
    position: absolute;
    pointer-events: none;
    content: "1";
    bottom: calc(var(--baseSize)* 0.5);
    right: calc(var(--baseSize)* 0.5);
    color: #3b2e11;
    font-size: calc(var(--baseSize)* 1.25);
    text-align: right;
    font-family: 'gothicabold';
    opacity: 0.5;
}

.innerPageWrapper1:after {content: "1";}
.innerPageWrapper2:after {content: "2";}
.innerPageWrapper3:after {content: "3";}
.innerPageWrapper4:after {content: "4";}
.innerPageWrapper5:after {content: "5";}
.innerPageWrapper6:after {content: "6";}
.innerPageWrapper7:after {content: "7";}
.innerPageWrapper8:after {content: "8";}
.innerPageWrapper9:after {content: "9";}
.innerPageWrapper10:after {content: "10";}
.innerPageWrapper11:after {content: "11";}
.innerPageWrapper12:after {content: "12";}
.innerPageWrapper13:after {content: "13";}
.innerPageWrapper14:after {content: "14";}
.innerPageWrapper15:after {content: "15";}
.innerPageWrapper16:after {content: "16";}
.innerPageWrapper17:after {content: "17";}
.innerPageWrapper18:after {content: "18";}