* {
    margin: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2500px;
    background-color: #333319;
    overflow: hidden;
}

.scene,
.object,
.face {
    --rX: 0deg;
    --rY: 0deg;
    --rZ: 0deg;
    --tX: 0px;
    --tY: 0px;
    --tZ: 0px;
    transform: rotateX(var(--rX)) rotateY(var(--rY)) rotateZ(var(--rZ)) translate3d(var(--tX), var(--tY), var(--tZ));
}

/* Scene initial rotation and positioning */
.scene {
    --rX: -15deg;
    --rY: -55deg;
    position: absolute;
    top: 35vw;
    scale: 0.75;
}

/* We're gonna rock down to electric avenue 🎶 */
/* Hey that's cool you can put emojis in here */
.nautilus {
    animation: rocking 4s ease-in-out infinite alternate-reverse;
}

/* Overlay styling */
.overlay {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background-color: #333319;
    z-index: 3;
    transform-origin: left;
}

.book-spine {
    position: fixed;
    width: 7vw;
    height: 100vh;
    background-color: #e5ffff;
    z-index: 4;
}

.overlay h1,
.overlay h2 {
    color: #e5ffff;
    font-weight: 100;
    margin-left: 15vw;
    margin-right: 15vw;
    text-align: center;
}

.overlay h1 {
    font-size: 8vw;
    font-family: 'Blackwood Castle Shadow', sans-serif;
}

.overlay h2 {
    font-size: 5vw;
    font-family: 'Blackwood Castle', sans-serif;
    margin-top: 5vh;
}

#open-button {
    font-size: 5vw;
    font-family: 'Blackwood Castle Shadow', sans-serif;
    color: #e5ffff;
    margin-top: 5vh;
    background-color: transparent;
    border-style: dashed;
    border-width: 2px;
    border-color: #333319;
    width: 30vw;
    align-self: center;
}

#open-button:hover {
    /* Neat hack to stop the border moving the page elements */
    border-color: #e5ffff;
}

/* UI elements styling */
.ui-elements {
    z-index: 2;
}

#ink-overlay {
    display: none;
}

.task-menu {
    position: absolute;
    display: grid;
    grid-template-columns: 90% 10%;
    top: 25%;
    left: -21%;
    height: 50%;
    width: 25%;
    background-color: #e5ffff;
    color: #333319;
}

.task-menu-notes {
    padding: 40px;
    padding-left: 30px;
}

.task-menu h1,
.task-menu li,
.task-menu h2,
.task-menu h3 {
    font-family: 'Sail', sans-serif;
}

.task-menu h1 {
    text-align: center;
    font-size: 5vw;
    margin-bottom: 1vh;
}

.task-menu li {
    font-size: 1.5vw;
}

.task-menu h2 {
    font-size: 1.25vw;
    margin-top: 1vh;
}

.task-menu h3 {
    font-size: 3vw;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    text-orientation: mixed;
    text-align: center;
    margin-right: 0.75vw;
}

#volume-button,
#command-button,
#mic-input-icon {
    position: absolute;
    font-size: 5vw;
    color: #e5ffff;
    background-color: transparent;
    border: none;
    top: 5%;
}

#volume-button:hover,
#command-button:hover {
    scale: 1.2;
}

#volume-button {
    left: 5%;
}

#command-button {
    right: 5%;
}

#mic-input-icon {
    -webkit-text-stroke: 5px #333319;
    display: none;
    font-size: 10vw;
    top: 75%;
    left: 50%;
}

#cannonball {
    position: absolute;
    display: none;
    top: 60%;
    scale: 3;
}

#browser-warning {
    display: none;
    position: absolute;
    top: 2vh;
    right: 2vw;
    transform: none;
    background-color: rgba(51, 51, 25, 0.95);
    color: #e5ffff;
    padding: 1.5vw;
    border: 2px solid #e5ffff;
    border-radius: 8px;
    max-width: 25vw;
    text-align: center;
    z-index: 5;
    font-family: 'Sail', sans-serif;
}

#browser-warning h2 {
    font-size: 1.2vw;
    margin-bottom: 0.5vh;
}

#browser-warning p {
    font-size: 0.9vw;
    margin-top: 0.5vh;
}

.grain-overlay {
    position: absolute;
    background-image: url("../media/images/user_interface/grain.png");
    height: 300%;
    width: 300%;
    bottom: 33%;
    opacity: 0.1;
    animation: grain 8s steps(10) infinite;
}

.face {
    position: absolute;
}

.scene,
.object {
    transform-style: preserve-3d;
}

/* Ship styling */
.cannon {
    transition: transform 2s ease-in-out;
    --tX: 100px;
    --tY: -100px;
    --tZ: 200px;
}

.cannon .front {
    --rY: 55deg;
}

.cannonball {
    --tX: 150px;
    --tY: -55px;
    --tZ: -650px;
}

.cannonball .front:hover {
    scale: 1.2;
}

/* Bow styling */

.bow .top {
    --rX: 90deg;
    --tY: 750px;
    --tZ: 250px;
}

.bow .left {
    --rY: 112deg;
    --tX: -630px;
    --tZ: -436px;
}

.bow .right {
    --rY: 68deg;
    --tX: -680px;
    --tZ: 310px;
}

/* Top deck styling */
.top-deck .front {
    transform: rotateX(0deg) translate3d(100px, -350px, -500px);
}

/* Ship styling */
.ship .top {
    --rX: 90deg;
    --tZ: 500px;
}

.ship .left {
    --rY: -90deg;
    --tZ: 500px;
}

.ship .right {
    --rY: 90deg;
    --tZ: -100px;
}

/* Mast styling */
/* Mast 1 */
.mast1 .front {
    --tX: 175px;
    --tY: -800px;
    --tZ: 500px;
}

.mast1 .back {
    --rY: 180deg;
    --tX: -175px;
    --tY: -800px;
    --tZ: -450px;
}

.mast1 .left {
    --rY: -90deg;
    --tX: 475px;
    --tY: -800px;
    --tZ: -151px;
}

.mast1 .right {
    --rY: 90deg;
    --tX: -475px;
    --tY: -800px;
    --tZ: 199px;
}

.mast1 .masts {
    --tX: 50px;
    --tY: -650px;
    --tZ: 500px;
}

/* Mast 2 */
.mast2 .front {
    --tX: 175px;
    --tY: -800px;
    --tZ: -100px;
}

.mast2 .back {
    --rY: 180deg;
    --tX: -175px;
    --tY: -800px;
    --tZ: 150px;
}

.mast2 .left {
    --rY: -90deg;
    --tX: -125px;
    --tY: -800px;
    --tZ: -151px;
}

.mast2 .right {
    --rY: 90deg;
    --tX: 125px;
    --tY: -800px;
    --tZ: 199px;
}

.crows-nest .front {
    --tX: 124px;
    --tY: -725px;
    --tZ: -55px;
}

.crows-nest .back {
    --rY: 180deg;
    --tX: -120px;
    --tY: -725px;
    --tZ: 195px;
}

.crows-nest .left {
    --rY: -90deg;
    --tX: -125px;
    --tY: -725px;
    --tZ: -50px;
}

.crows-nest .right {
    --rY: -90deg;
    --tX: -125px;
    --tY: -725px;
    --tZ: -200px;
}

.crows-nest .bottom {
    --rX: -90deg;
    --tX: 125px;
    --tY: 125px;
    --tZ: -700px;
}

/* Ship cabin styling */
.ship-cabin .top {
    --rX: 90deg;
    --tY: -750px;
    --tZ: 250px;
}

.ship-cabin .front {
    --tY: -200px;
    --tZ: -500px;
    pointer-events: none; /* Need this otherwise the front face blocks the cannonball */
}

.ship-cabin .left {
    --rY: -90deg;
    --tX: -750px;
    --tY: -200px;
    --tZ: 250px;
}

.ship-cabin .right {
    --rY: -90deg;
    --tX: -750px;
    --tY: -200px;
    --tZ: -150px;
}

.ship-cabin .back {
    --rY: 180deg;
    --tY: -200px;
    --tZ: 1000px;
}

.ship-cabin .door {
    transition: transform 1s ease-in-out;
    --tX: 100px;
    --tY: -170px;
    --tZ: -500px;
}

.ship-cabin .door:hover {
    --tX: 100px;
}

.ship-cabin .ladder1 {
    --rX: 15deg;
    --tY: -315px;
    --tZ: -400px;
}

.ship-cabin .ladder2 {
    --rX: 15deg;
    --tX: 300px;
    --tY: -315px;
    --tZ: -400px;
}

/* Stern styling */
.stern .top {
    --rX: 90deg;
    --tY: -750px;
    --tZ: 450px;
}

.stern .left {
    --rY: -90deg;
    --tX: -745px;
    --tY: -0px;
    --tZ: 255px;
}

.stern .right {
    --rY: -90deg;
    --tX: -745px;
    --tY: -0px;
    --tZ: -150px;
}

.stern .back {
    --rX: 32deg;
    --rY: 180deg;
    --tY: -510px;
    --tZ: 785px;
}

/* Moon styling */
.moon {
    --tX: 1000px;
    --tY: -800px;
    --tZ: 3000px;
}

.moon .front {
    --rY: 55deg;
}

/* Squid styling */
.squid {
    --tX: -1200px;
    --tY: -240px;
}

.squid .head {
    --rY: 55deg;
}

.squid .crewtentacle {
    transform: rotateX(0deg) translate3d(0px, 0px, 0px);
}

.squid .tentacle1 {
    transform: rotateX(0deg) translate3d(0px, 0px, 0px);
}

.squid .tentacle2 {
    transform: rotateX(0deg) translate3d(0px, 0px, 0px);
}

.squid .tentacle3 {
    transform: rotateX(0deg) translate3d(0px, 0px, 0px);
}

.squid .tentacle4 {
    transform: rotateX(0deg) translate3d(0px, 0px, 0px);
}

/* Animations */
@keyframes page-turn {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-180deg);
    }
}

@keyframes expand {
    0% {
        scale: 0;
    }

    100% {
        scale: 100%;
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes rocking {
    0% {
        transform: rotate(-5deg) translateX(-5px);
    }

    50% {
        transform: rotate(5deg) translateX(5px);
    }

    100% {
        transform: rotate(-5deg) translateX(-5px);
    }
}

@keyframes pop {

    /* Inflation 😳 */
    0% {
        scale: 2.5;
    }

    99% {
        opacity: 1;
    }

    100% {
        scale: 5;
        opacity: 0;
    }
}

@keyframes acquired {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-100px);
    }
}

@keyframes grain {

    0%,
    100% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(-5%, 0%)
    }

    20% {
        transform: translate(-15%, 0%)
    }

    30% {
        transform: translate(-5%, 0%)
    }

    40% {
        transform: translate(-15%, 0%)
    }

    50% {
        transform: translate(-5%, 0%)
    }

    60% {
        transform: translate(-15%, 0%)
    }

    70% {
        transform: translate(-5%, 0%)
    }

    80% {
        transform: translate(-15%, 0%)
    }

    90% {
        transform: translate(-5%, 0%)
    }

    100% {
        transform: translate(-15%, 0%)
    }
}