@font-face {
    font-family: "papyrus";
    src: url("fonts/papyrus.ttf");
}

.creepster-regular {
  font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #000;
}

* {
  -webkit-user-select: none;
  user-select: none;
}

h1 {
    font-family: "Creepster", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    color: red;
}

#experience-container {
    width: 1920px;
    height: 1080px;
    position: absolute;
    transform-origin: center center;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#experience-canvas {
    width: 100%;
    height: 100%;
}

#fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    z-index: 150;
}
#fade-overlay.active {
    opacity: 1;
    pointer-events: all;
}

video.scene-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

#start-screen {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    backdrop-filter: blur(9px);
    min-width: 100%;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 1s ease;
}

button.menu-button {
    font-family: "papyrus", fantasy;
    width: 220px;
    height: 60px;
    background-color:rgba(255, 0, 0, 0.505);
    border-style: solid;
    border-width: 2px;
    border-color: red;
    font-size: 2rem;
    font-weight: bold;
    transition: 0.5s;
}

button.menu-button:hover {
    background-color: rgb(255, 0, 0);
    border-color: black;
}

#enter-temple-button {
    position: fixed;
    left: 866px;
    bottom: 594px;
    width: 9.2%;
    height: 95px;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 20px 1px rgb(0, 101, 137);
    border-radius: 2%;
    transition: 0.5s;
}
#enter-temple-button:hover {
    cursor: pointer;
    transition: 0.5s;
    background-color: rgba(255, 255, 255, 0.9);
}

#rabbit-hitbox {
    position: fixed;
    width: 100%;
    height: 100%;
    clip-path: polygon(6.88% 28.42%, 22.48% 13.64%, 40.16% 0%, 54.04% 0%, 49.31% 11.27%, 62.26% 19.55%, 68.66% 30.45%, 72.7% 46.78%, 72.28% 58.17%, 19.22% 82.92%, 9.61% 74.26%, 2.55% 55.53%);
}

#rabbit-eye-hitbox {
    position: fixed;
    width: 100%;
    height: 100%;
    clip-path: polygon(23.04% 40.54%, 24.43% 34.43%, 28.32% 32.67%, 29.95% 34.16%, 27.44% 37.76%, 25.35% 39.36%);
}

#rabbit-nose-hitbox {
    position: fixed;
    width: 100%;
    height: 100%;
    clip-path: polygon(6.32% 58.22%, 8.42% 51.67%, 13.44% 52.48%, 14.14% 58.66%, 11.56% 61.52%, 8.53% 61.52%);
}

#clock-text-hitbox {
    position: fixed;
    width: 100%;
    height: 100%;
    clip-path: polygon(15.29% 3.96%, 74.51% 3.96%, 74.93% 11.55%, 81.11% 11.55%, 81.11% 15.64%, 75.16% 15.64%, 75.35% 19.15%, 68.23% 20.4%, 67.97% 15.64%, 15.29% 15.64%);
}

#angry-emoji-hitbox {
    position: fixed;
    width: 100%;
    height: 100%;
    clip-path: polygon(81.55% 8.17%, 85.76% 3.19%, 90.6% 6.19%, 89.97% 15.35%, 85.9% 19.21%, 82.1% 14.6%);
}

#clock-emoji-hitbox {
    position: fixed;
    width: 100%;
    height: 100%;
    clip-path: polygon(90.95% 7.67%, 95.16% 2.69%, 100% 5.69%, 99.37% 14.85%, 95.34% 17.86%, 91.5% 14.11%);
}

#grass-hitbox {
    position: fixed;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 93.02%, 100% 100%, 0% 100%, 0% 93.02%, 13.37% 93.02%, 13.37% 95.54%, 87.33% 95.54%, 87.33% 93.02%);
    background-color: rgba(26, 255, 0, 0);
    display: none;
}

#temple-hitbox {
    position: fixed;
    width: 100%;
    height: 100%;
    clip-path: polygon(37.67% 22.03%, 61.49% 22.03%, 59.75% 34.16%, 61.49% 46.29%, 64.48% 46.29%, 71.88% 65.25%, 87.26% 93.32%, 87.26% 95.79%, 13.37% 95.79%, 13.16% 93.32%, 27.79% 65.25%, 34.54% 46.29%, 37.67% 46.29%, 38.86% 34.16%);
    background-color: rgba(0, 125, 166, 0);
    display: none;
}

#interior-temple-walls-hitbox {
    position: fixed;
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#altar-hitbox {
    position: fixed;
    width: 100%;
    height: 100%;
    clip-path: polygon(44.68% 60.62%, 54.11% 60.62%, 51.07% 71.84%, 51.07% 75.82%, 51.91% 79.51%, 46.49% 79.51%, 48.06% 75.68%, 48.06% 71.84%);
}

#top-text-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color:rgba(0, 0, 0, 0.7);
    z-index: 69;
    text-align: center;
    color: white;
    display: none;
}

#top-text {
    font-family: "papyrus", fantasy;
    font-size: 1.5rem;
    line-height: 50px;
    margin: 0;
}

#dialogue-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100% - 24px);
    height: 150px;
    margin: 10px;
    background-color: rgb(90, 0, 0);
    border: solid;
    border-width: 5px;
    border-color: rgb(29, 0, 0);
    display: none;
}

#dialogue-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 99;
}

#dialogue-text {
    padding-left: 10px;
    font-family: "papyrus", fantasy;
    font-size: 1.8rem;
    color: white;
    margin: 10px;
}

#leave-temple-button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.0);
}
#leave-temple-button:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.3);
}

#floating-object {
    position: absolute;
    top: 510px;
    left: 47%;
    width: 100px;
    height: 100px;
    background-image: url(assets/knife.png);
    background-size: cover;
    animation: float 3s ease-in-out alternate infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-50px);
    }
}

#sacrifice-modal-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    display: none;
    pointer-events: none;
}
#sacrifice-modal-overlay.active {
    pointer-events: auto;
    display: block;
    z-index: 100;
}

#sacrifice-modal {
    position: fixed;
    width: 100%;
    height: 300px;
    top: 36%;
    background-color: rgba(169, 0, 0, 0.933);
    z-index: 120;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    display: none;
    pointer-events: none;
    transition: opacity 1.5s ease-in-out;
}
#sacrifice-modal.active {
    opacity: 1;
    transition: opacity 2s ease-in-out;
}
#sacrifice-modal.interactable {
    pointer-events: auto;
}

#sacrifice-modal-header {
    color: white;
    font-family: papyrus, fantasy;
    font-size: 6.5rem;
    margin: 0;
}

#sacrifice-modal-button-container {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

#sacrifice-modal-button-yes {
    width: 400px;
    height: 90px;
    background-color: green;
    margin-left: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    line-height: 90px;
    border-style: solid;
    border-radius: 10px;
    border-color: rgb(20, 101, 0);
}

#sacrifice-modal-button-no {
    width: 400px;
    height: 90px;
    background-color: red;
    margin-right: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3rem;
    line-height: 90px;
    border-style: solid;
    border-radius: 10px;
    border-color: rgb(145, 0, 0);
}

#game-scene-1 {
    display: block;
}

#game-scene-2 {
    display: none;
}

#enter-the-mmmmd-cutscene {
    display: none;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3.5rem;
    margin-left: 4%;
}

#enter-the-mmmmd-click-overlay {
    display: none;
    width: 100%;
    height: 100%;
    opacity: 20%;
    text-align: left;
}

#inside-overlay-text {
    margin-top: auto;
    margin-left: 60%;
}

#cutscene-text {
    transition: color 1.6s ease-out;
}

#game-scene-3 {
    display: none;
}

#mmmmd-sign-hitbox {
    clip-path: polygon(9.4% 30.88%, 41.3% 31.87%, 42.13% 61.63%, 9.12% 61.14%);    
    position: fixed;
    width: 100%;
    height: 100%;
}

#mmmmd-floor-hitbox {
    clip-path: polygon(0% 76.42%, 100% 76.42%, 100% 100%, 0% 100%);
    position: fixed;
    width: 100%;
    height: 100%;
}

#mmmmd-mysterious-box {
    clip-path: polygon(46.52% 25.92%, 53.48% 25.92%, 53.48% 38.29%, 46.52% 38.3%);
    position: fixed;
    width: 100%;
    height: 100%;
}

#mmmmd-sky-hitbox {
    clip-path: polygon(0% 0%, 100% 0%, 100% 76.9%, 0% 76.9%);
    position: fixed;
    width: 100%;
    height: 100%;
}