@font-face {
    font-family: 'Joystix Monospace';
    src: url('../fonts/joystix_monospace-webfont.woff2') format('woff2'),
         url('../fonts/joystix_monospace-webfont.woff') format('woff'),
         url('../fonts/joystix_monospace-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#orientation-notice {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    text-align: center;
    z-index: 9999;
    visibility: hidden; /* Hide by default */
}


/* computer-location-page */

body, html {
    font-family: 'Joystix Monospace';
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
}

main{
    position: relative; 
    width: 100vw;
    height: 100vh;
    background-color: black;
}

.background-container {
    background-color: black;
    position: relative;
    width: 100%;
    height: 100vh; 
    background: no-repeat center center/cover;
}

.game-title {
    background-color: black;
    position: absolute; /* Fixed to the top of the page */
    top: 1rem; /* Align to the top */
    left: 0;
    width: 100%; /* Full width to ensure centering */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align text to the top */
    padding: 0.5rem; /* Optional padding for spacing */
    animation: MoveUpDown 3s linear infinite;

}

@keyframes MoveUpDown {
    0%, 50% {
        transform: translateY(3);
    }
    50% {
        transform: translateY(-3%);
    }
}

/* Styling for the game title text */
.game-title h1 {
    font-size: 2.5rem; /* Adjust size as needed */
    color: aqua;
    margin: 0; /* Remove default margin */
    word-wrap: break-word; /* Prevents text overflow */
    max-width: 90vw; /* Limit width to prevent overflow */
    text-align: center; /* Center align text */
}

.background-container img {
    position: relative;
    margin-top: 4%;
    width: 100%;
    height: auto;
}

/* Styling for the start button */
.start-button-container {
    position: absolute; /* Position relative to the .background-container */
    top: 30%; /* Adjust this value as needed to place the button below the title */
    left: 53%; /* Center horizontally */
    transform: translateX(-50%); /* Offset to fully center */
    display: flex;
    justify-content: center;
    
}

/* Styling for the start button */
.start-button {
    background-color: black;
    border: 4px solid aqua;
    width: 200px;
    height: 60px;
    cursor: pointer;
    font-family: 'Joystix Monospace';
    font-size: 1.2rem;
    color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    animation: MoveUpDown 3s linear infinite;

}

.page-title  {
    background-color: black;
    color: aqua;
    font-family: 'Joystix Monospace';
    padding: 5px;
    font-size: 35px;
    text-align: center;
    display: flex;
    animation: MoveUpDown 2s linear infinite; 
    position: absolute;
    top: 10px;
    left: 16%;
    margin: 0;
}

@keyframes MoveUpDown {
    0%, 50% {
        transform: translateY(10);
    }
    50% {
        transform: translateY(-10%);
    }
}

/* style for the logo button */
.open-btn {
    position: absolute;
    width: 12%;
    height: 25%;
    top: 22%;
    left: 60%;
    background: none;
    border: none;
    cursor: pointer;
}

/* style for the instruction window  */
.instruction {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border: 7px solid white;
    z-index: 10;
    background-color: black;
    padding: 10px;
    width: 580px;
    max-width: 80%;
    transition: transform 0.3s ease-in-out;
}

.instruction.active {
    display: block;
    transform: translate(-50%, -50%) scale(1);
}

.instruction .instruction-1,
.instruction .instruction-2,
.instruction .instruction-3,
.instruction .instruction-4,
.instruction .instruction-5 {
    display: none;
}

.instruction .instruction-1.active,
.instruction .instruction-2.active,
.instruction .instruction-3.active,
.instruction .instruction-4.active,
.instruction .instruction-5.active {
    display: block;
}

.tap {
    background-color: black;
    border: 3px solid aqua;
    color: aqua;
    float: right;
    font-size: 15px;
    margin: 15px;
    font-family: 'Joystix Monospace';
    padding: 7px;
}

.instruction-close .close-btn {
    float: right;
    background-color: black;
    color: aqua;
    font-size: 30px;
    box-shadow: none;
    border: none;
    outline: none;
    font-weight: bold;
}

.instruction-text p {
    color: aqua;
    padding-right: 20px;
}

.input-answer input {
    left: 50%;
    font-family: 'Joystix Monospace';
    margin-top: 1rem;
    background-color: aliceblue;
}

/* book-location-page */

.open-btn-book {
    position: absolute;
    width: 12%;
    height: 25%;
    top: 30%;
    left: 44%;
    background: none;
    border: none;
    cursor: pointer;
}

.book-container.active {
    display: flex;
    align-items: flex-start; 
}

.resources-container.active {
    display: flex;
    align-items: flex-start;
}

.resources-container input {
    font-family: 'Joystix Monospace';
}

.book-img {
    margin-right: 20px; 
}

.book-img img {
    margin-top: 30%;
}

.book-info {
    flex: 1; 
}

.book-info p {
    margin-top: 50%;
    margin-left: 12%;
    line-height: 1.2rem;
}

.book-container,
.resources-container {
    display: none;
}


/* dialogue-style */

.dialogue {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh;
    padding: 5px;
}

.dialogue-1,
.dialogue-2,
.dialogue-3,
.dialogue-4,
.dialogue-5,
.dialogue-6,
.dialogue-7,
.dialogue-8 {
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start; 
    width: 90%; 
    max-width: 1200px;

    animation: MoveUpDown 3s linear infinite;
    position: relative;
    left: 0;
    bottom: 0;
}

@keyframes MoveUpDown {
    0%, 50% {
        transform: translateY(3);
    }
    50% {
        transform: translateY(-3%);
    }
}

.dialogue-1,
.dialogue-2,
.dialogue-3,
.dialogue-4,
.dialogue-5,
.dialogue-6,
.dialogue-7,
.dialogue-8 {
    display: none;
}

.dialogue-1.active,
.dialogue-2.active,
.dialogue-3.active,
.dialogue-4.active,
.dialogue-5.active,
.dialogue-6.active,
.dialogue-7.active,
.dialogue-8.active {
    display: flex; 
}

.dialogue-1 img,
.dialogue-2 img,
.dialogue-3 img,
.dialogue-4 img,
.dialogue-5 img,
.dialogue-6 img,
.dialogue-7 img,
.dialogue-8 img {
    width: 25vw; 
    height: auto; 
    margin-right: 20px; 
}

.mascot-text,
.main-character-text {
    font-family: 'Joystix Monospace';
    text-align: left;
    border: solid 3px; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 20px; 
    flex: 1; 
    font-size: 0.8rem;
}

.mascot-text {
    color: #f20089;
    border-color: #f20089;
}

.main-character-text {
    color: aqua;
    border-color: aqua;
}

.button-container {
    display: flex;
    justify-content: space-between; 
    width: 90%; 
    max-width: 1200px;
}

.tap-d {
    background-color: black;
    border: 3px solid aqua;
    color: aqua;
    font-size: 25px;
    font-family: 'Joystix Monospace';
    padding: 7px;
}

.tap-start {
    background-color: black;
    border: 3px solid aqua;
    color: aqua;
    font-size: 25px;
    font-family: 'Joystix Monospace';
    padding: 7px;
    z-index: 5;
}

.tap-start a {
    color: aqua;
    text-decoration: none;
} 

.tap-finish {
    background-color: black;
    border: 3px solid aqua;
    color: aqua;
    font-size: 25px;
    font-family: 'Joystix Monospace';
    padding: 7px;
}

.tap-finish a {
    color: aqua;
    text-decoration: none;
}



.tap-start {
    display: none;
}

.tap-start.active {
    display: inline-block;
}

h1 {
    font-size: 10px;
}

.open-btn-printer {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 12%;
    height: 25%;
    background: none;    
    border: none;
}

.open-btn-study {
    position: absolute;
    top: 10%;
    left: 72%;
    width: 12%;
    height: 25%;
    background: none;
    border: none;
}

.open-btn-charging {
    border: none;
    background: none;
    position: absolute;
    top: 20%;
    left: 43%;
    width: 12%;
    height: 50%;
}

.open-btn-game {
    position: absolute;
    top: 2%;
    left: 65%;
    width: 30%;
    height: 35%;
    border: none;
    background: none;
}



/* media queries */

/* iphone SE */
@media only screen and (max-width: 375px) {
    .background-container img {
        margin-top: 5%;
    }

    .book-img img {
        margin-top: 30%;
    }

    .book-info p {
        margin-top: 30%;
        margin-left: 12%;
        line-height: 1.2rem;
    }
}

/* iPhone XR */
@media only screen and (max-width: 896px) {
    .background-container img {
        margin-top: 0;
    }
}

/* iPhone 14 Pro Max */
@media only screen and (max-width: 932px) {
    .background-container img {
        margin-top: 0;
    }
}

/* Samsung Galaxy S8+ */
@media only screen and (max-width: 740px) {
    .background-container img {
        margin-top: 1%;
    }
}

#answerInput1, #answerInput2, #numberInput, #yes, #book-answer-1, #book-answer-2, #book-answer-3, #game-corner-answer  {
    font-family: 'Joystix Monospace', monospace;
    border: 2px solid gray;
    background-color: white;
    padding: 5px;
    font-size: 16px;
    margin: 0 5px;
}

#answerInput1.correct, #answerInput2.correct, #numberInput.correct, #game-corner-answer.correct, #book-answer-1.correct, #book-answer-2.correct, #book-answer-3.correct, #yes.correct {
    font-family: 'Joystix Monospace', monospace;
    color: aqua;
    border-color: aqua;
}

#answerInput1.error, #answerInput2.error, #numberInput.error, #game-corner-answer.error, #book-answer-1.error, #book-answer-2.error, #book-answer-3.error, #yes.error {
    font-family: 'Joystix Monospace', monospace;
    color: #f20089;
    border-color: #f20089;
}

/* cursors */

.cursor-studyroom {
    position: absolute !important;
    background: transparent !important;
    top: 48%; 
    left: 84%; 
    transform: translateX(-50%);
    width: 60px !important; 
    height: 60px !important;
    z-index: 5; 
    animation: MoveUpDownVertical 6s ease-in-out infinite;
}

.cursor-computer {
    position: absolute !important;
    background: transparent !important;
    top: 52%; 
    left: 71%;  
    transform: translateX(-50%);
    width: 60px !important; 
    height: 60px !important;
    z-index: 5; 
    animation: MoveUpDownVertical 6s ease-in-out infinite;
}

.cursor-book {
    position: absolute !important;
    background: transparent !important;
    top: 52%; 
    left: 53%; 
    transform: translateX(-50%);
    width: 60px !important; 
    height: 60px !important;
    z-index: 5; 
    animation: MoveUpDownVertical 6s ease-in-out infinite;
}

.cursor-printer {
    position: absolute !important;
    background: transparent !important;
    top: 35%; 
    left: 60%; 
    transform: translateX(-50%);
    width: 60px !important; 
    height: 60px !important;
    z-index: 5; 
    animation: MoveUpDownVertical 6s ease-in-out infinite;
}

.cursor-game { 
    position: absolute !important;
    background: transparent !important;
    top: 40%; 
    left: 86%; 
    transform: translateX(-50%);
    width: 60px !important; 
    height: 60px !important;
    z-index: 5; 
    animation: MoveUpDownVertical 6s ease-in-out infinite;
}

@keyframes MoveUpDownVertical {
    0%, 100% {
        transform: translate(-50%, -50%); 
    }
    50% {
        transform: translate(-50%, -60%); 
    }
}

.continue-button {
    background-color: black;
    border: 3px solid aqua;
    color: aqua;
    float: right;
    font-size: 15px;
    margin: 15px;
    font-family: 'Joystix Monospace';
    padding: 7px;
    display: none;
}

.finish {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; 
    left: 25%;
    bottom: -100%; /* Start outside the screen */
    transform: translateX(-50%);
    animation: appear 0.5s ease forwards;
	width: 90vh;
}

.finish h1 {
	width: 70vh;
    color: #f20089;
    font-size: 3rem;
}

@keyframes appear {
    from {
        bottom: -100%; /* Start outside the screen */
    }
    to {
        bottom: 25%; /* Move to the middle of the screen */
    }
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Make sure clicks go through the canvas */
    background: transparent; /* Allows clicks through the canvas */
}

#background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; 
}

/* iPhone 14 Pro Max, iPhone 14, iPhone 13, iPhone 12, iPhone 11 */
@media only screen and (min-width: 430px) and (orientation: landscape) {
    body {
        font-family: 'Joystix Monospace';
    }
}

/* iPhone SE, iPhone 8, iPhone 7 */
@media only screen and (min-width: 375px) and (orientation: landscape) {
    body {
        font-family: 'Joystix Monospace';
    }
}

/* iPhone Mini (12, 13) */
@media only screen and (min-width: 360px) and (orientation: landscape) {
    body {
        font-family: 'Joystix Monospace';
    }
}

/* Android Small (Pixel 4, Galaxy S8, Galaxy S9) */
@media only screen and (min-width: 360px) and (orientation: landscape) {
    body {
        font-family: 'Joystix Monospace';
    }
}

/* Android Medium (Pixel 5, Galaxy S10, Galaxy S20) */
@media only screen and (min-width: 412px) and (orientation: landscape) {
    body {
        font-family: 'Joystix Monospace';
    }
}

/* Android Large (Pixel 6, Galaxy S21, Galaxy S22, Pixel 7) */
@media only screen and (min-width: 430px) and (orientation: landscape) {
    body {
        font-family: 'Joystix Monospace';
    }
}

/* Large Phablets and Small Tablets (iPad Mini, Galaxy Tab) */
@media only screen and (min-width: 768px) and (orientation: landscape) {
    body {
        font-family: 'Joystix Monospace';
    }
}