body {
    /* disable long press in iOS? */
    -webkit-touch-callout: none;
}


.skyColor {
    filter: hue-rotate(240deg) saturate(100%) brightness(100%) drop-shadow(0px 0px 20px white);
}

.baseColor {
    filter: hue-rotate(24deg) saturate(68%) brightness(100%) drop-shadow(0px 0px 20px white);
}

.grayColor {
    filter: hue-rotate(0deg) saturate(0%) brightness(100%) drop-shadow(0px 0px 20px white);
}

.hidden {
    display: none !important;
}

/* ----------------------   UI Styles   ---------------------------*/

/* Mobile first sizes */

.mainUI {
    border: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* allow click-through in transparent areas */
}


.regionUI {
    border: 0px;
    position: absolute;
    display: flex;
    flex-direction: row;
    pointer-events: auto;
}

.uiLink {
    border: 0px !important;
    background: rgba(0, 0, 0, 0.1);

}

.infoUI {
    position: absolute;
    display: flex;
    flex-direction: row;
    pointer-events: auto;
}

div.imgnav {
    width: 50%;
    bottom: 1%;
    left: 70%;
}

div.imgnav .imgnavspacer {
    display: none;
}

.buttonUI {
    max-width: 100%;
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: auto;
    filter: drop-shadow(0px 0px 20px white);
}


.joystick-container {
    bottom: 10px;
    left: 10px;
    width: 25%;
    height: auto;
}

.storage-label {
    width: 50%;
    left: 50%;
    top: 1%;
    position: relative;
}

.storage-label img {
    height: auto;
    width: 100%;
}

.tutorial-window {
    width: 80%;
    height: auto;
    left: 10%;
    position: absolute;
    top: 10%;
}

.tutorial-window img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

.tutorial-window, .centreUI {
    width: 98%;
    height: fit-content;
    left: 1%;
    position: absolute;
    top: 1%;
}


.transcript {
    border: 3px solid black;
    border-radius: 5px;

    text-align: left;
    background: rgba(255, 255, 255, 0.9);
    padding: 1.5em;


}

div#radio-transcript {

    width: 60%;
    left: 20%;

}

div#transcript-text {
    height: fit-content;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.transcript {
    top: 50%;
}

.transcript p {
    font-size: 1rem;

}

div.imgnav .buttonUI {
    max-width: 15%;
}

.closeButton {
    top: 1%;
    right: 0;
    width: 10%;
    z-index: 100;
}

/* Breakpoints to scale the HTML UI for different devices */

/* Tablets */
@media screen and (min-width: 600px) {
    .joystick-container {
        bottom: 10px;
        left: 10px;
        width: 20%;
        height: auto;
    }

    .tutorial-window {
        width: 80%;
        height: auto;
        left: 10%;
        position: absolute;
        top: 10%;
    }

    .transcript p {
        font-size: 1.5rem;

    }

    div.imgnav {
        width: auto;
        bottom: 1%;
        left: 65%;
    }

    div.imgnav .buttonUI {
        max-width: 100%;
    }

    .closeButton {
        top: 1%;
        left: 90%;
        width: 5%;
        z-index: 100;
    }

    div.imgnav .imgnavspacer {
        display: block;
        width: 50%;
    }

}

/* Desktop */
@media screen and (min-width: 1024px) {
    .joystick-container {
        bottom: 10px;
        left: 10px;
        width: 10%;
        height: auto;
    }

    .tutorial-window, .centreUI {
        width: 80%;
        height: 95%;
        left: 10%;
        position: absolute;
        top: 5%;
    }

    .transcript p {
        font-size: 1.5rem;

    }

    div.imgnav {
        width: auto;
        bottom: 1%;
        right: 1%;
    }

    .closeButton {
        top: 1%;
        left: 90%;
        width: 4%;
        z-index: 100;
    }


}

.img-zoom-container {
    position: relative;
}

.img-zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    /*set the size of the lens:*/
    width: 40px;
    height: 40px;
}

.img-zoom-result {
    border: 1px solid #d4d4d4;
    /*set the size of the result div:*/
    width: 300px;
    height: 300px;
}

}