* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: white;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

@font-face {
    font-family: "OMORI1";
    src: url("fonts/OMORI_GAME2.ttf") format("truetype");
}

h1 {
    font-family: "OMORI1", sans-serif;
    font-size: 105px;

    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.character {
    position: absolute;
    left: 50%;
    top: 67%;
    transform: translate(-50%, -50%);

    width: 500px;
    height: auto;

}

.lightbulb {
    position: absolute;
    left: 42%;
    top: 0%;
    width: 65px;
}

.menu {
    position: absolute;
    left: 47%;
    bottom: 60px;
    transform: translateX(-50%);

    display: flex;
    gap: 40px;
}

.button-container {
    display: flex;
    align-items: center;
}

.hand {
    width: 80px;
    height: auto;

    margin-right: 8px;

    visibility: hidden;
}

.button-container:hover .hand {
    visibility: visible;
}

.menu-btn {
    font-family: "OMORI1";
    font-size: 28px;

    color: white;
    background: black;

    border: 3px solid white;
    outline: 3px solid black;

    padding: 8px 25px;

    width: 210px;

    white-space: nowrap;


    cursor: pointer;
}
/*for the fade in*/

/* INTRO SCREEN */



.intro-container {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;
}


.intro-title {
    font-family: "OMORI1", sans-serif;
    font-size: 160px;

    position: static;
    transform: none;

    margin-bottom: 80px;
}


.intro-text {
    font-family: "OMORI1", sans-serif;
    font-size: 45px;
    color: white;

    margin-bottom: 40px;
}


/* YES / NO BUTTON */

.choice {
   position: absolute;
    left: 40%;
    bottom: -30%;
    transform: translateX(-50%);
}


.pointer {
    width: 80px;
    height: auto;

    margin-right: 10px;

    opacity: 0;
}


.choice-text {

    font-family: "OMORI1";
    font-size: 28px;

    color: white;
    background: black;

    border: 3px solid white;
    outline: 3px solid black;

    padding: 8px 25px;

    cursor: pointer;

    user-select: none;
}


/* fade transition */

.fade-out {
    opacity: 0;
    transition: opacity 0.8s;
}

/* MENU FADE IN */

body {
    opacity: 1;
    transition: opacity 0.8s;
}

.fade-in {
    opacity: 0;
}

/*shky text*/

.intro-text {
    animation: omoriShake 0.4s infinite;
}

@keyframes omoriShake {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, 2px); }
    80% { transform: translate(1px, -2px); }
    100% { transform: translate(0, 0); }
}

/*index bg*/
.intro {
    background-image: url("images/stairs.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: 100vw;
    height: 100vh;
}

/* ========================= */
/* WHO AM I BACKGROUND */
/* ========================= */

.space-background {

    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background-image: url("images/space.png");
    background-repeat: repeat-x;
    background-size: auto 100%;

    animation: moveSpace 60s linear infinite;

    z-index: -1;

}

@keyframes moveSpace {

    from {
        background-position: 0 0;
    }

    to {
        background-position: -1920px 0;
    }

}

/* ===================== */
/* WHO AM I LOADING */
/* ===================== */

.loading-screen{

    background:black;

    width:100vw;
    height:100vh;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    overflow:hidden;

}

.loading-gif{

    width:220px;

    margin-bottom:35px;

}

.remember-text{

    font-family:"OMORI1";

    color:white;

    font-size:34px;

    animation:rememberShake .08s infinite;

}

body{
    transition: opacity .8s ease;
}

.fade-in{
    opacity: 0;
}

.fade-out{
    opacity: 0;
}

#preloader{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:black;

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    z-index:9999;

    transition:opacity .8s ease;

}


.neighbor {
    position: fixed;
    top: -38%;
    left: 8%;
    width: 1230px;
    z-index: 1;
}

#stairs-btn{

    position: absolute;

    width: 85px;
    height: 300px;

    left: 930px;
    top: 98px;

    z-index: 5;

    cursor: pointer;



}

#leave-dialog{

    position: fixed;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    width: 950px;
    height: 220px;

    display: none;

    z-index: 100;

}
.dialog-box{

    width: 100%;
    height: 100%;

    background: black;

    border: 5px solid white;

    position: relative;

}

.dialog-text{

    position:absolute;

    left:25px;
    top:40px;

    width:650px;

    font-family:"OMORI1";

    font-size:28px;

    color:white;

}

.portrait-box{

    position: absolute;

    right: 0px;
    top: -175px;

    width: 170px;
    height: 170px;

    background: black;

    border: 5px solid white;

    display: flex;

    justify-content: center;
    align-items: center;

}

.dialog-portrait{

    width: 161px;

}

.dialog-name{

    font-family:"OMORI1";

    font-size:34px;

    color:white;

    letter-spacing:1px;

}

.dialog-name-box{

    position:absolute;

    top:-68px;
    left:0px;

    background:black;

    border:5px solid white;

    padding:8px 20px;

    z-index:200;

}

.dialog-buttons{

    position:absolute;

    right:35px;
    bottom:20px;

    display:flex;

    gap:15px;

    align-items:center;

}

.dialog-buttons button{

    font-family:"OMORI1";

    font-size:28px;

    background:black;

    color:white;

    border:3px solid white;

    outline:3px solid black;

    padding:6px 18px;

    cursor:pointer;

}

.dialog-button-container{

    display:flex;

    align-items:center;

}

.dialog-pointer{

    width:70px;

    margin-right:8px;

    visibility:hidden;

}

.dialog-button-container:hover .dialog-pointer{

    visibility:visible;

}

.dream-character{

    position: absolute;

    left: 50%;
    top: 58%;

    transform: translate(-50%, -50%);

    width: 50px;

    z-index: 2;

    image-rendering: pixelated;

}

.catface {

    position: absolute;

    left: 740px;
    top: 98px;

    width: 155px;

    z-index: 3;

}

/* ========================= */
/* PORTFOLIO ROOM */
/* ========================= */

.portfolio-room{

    width:100vw;
    height:100vh;

    background-image:url("images/bookshelf.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    position:relative;
    overflow:hidden;

}

.portfolio-container{

    width:100%;
    height:100%;

    position:relative;

}

/* ========================= */
/* PORTFOLIO SHELVES */
/* ========================= */

/* ========================= */
/* PORTFOLIO PAGE */
/* ========================= */

.portfolio-room{

    width:100vw;
    height:100vh;

    overflow:hidden;

}

.portfolio-container{

    position:relative;

    width:100%;
    height:100%;

}

.article-menu{

    position:absolute;

    left:47%;
    bottom:480px;

    transform:translateX(-50%);

    display:flex;

    gap:45px;

    align-items:center;

}

.dialog-text a{

    color:white;

    text-decoration:underline;

}

.dialog-text a:hover{

    color:#d8d8d8;

}

.nav-button-container{

    position:absolute;

    display:flex;

    align-items:center;

}

#key-container{

    left:20px;
    top:340px;

}

#laptop-container{

    left:1310px;
    top:343px;

}

#key-gif{

    width:80px;

}

#laptop-gif{

    width:80px;

}

#key-btn{

    position:absolute;

    left:80px;

    width:80px;
    height:105px;

    background:transparent;

    border:none;

    cursor:pointer;

}

#laptop-btn{

    position:absolute;

    left:80px;

    width:80px;
    height:97px;

    background:transparent;

    border:none;

    cursor:pointer;

}

.nav-button-container:hover .hand{

    visibility: visible;

}

.dream-laptop{

    position: absolute;

    left: 555px;
    top: 455px;

    width: 30px;

    z-index: 3;

    image-rendering: pixelated;

}

#dream-laptop-btn{

    position: absolute;

    left: 555px;
    top: 455px;

    width: 30px;
    height: 35px;

    background: transparent;   
    border: none;              

    cursor: pointer;

    z-index: 4;

}

#dream-laptop-pointer{

    position:absolute;

    left:490px;      
    top:465px;

    width:55px;      

    visibility:hidden;

    z-index:5;

}
#dream-laptop-btn:hover + #dream-laptop-pointer{

    visibility:visible;

}

#stairs-pointer{

    position: absolute;

    left: 860px;   /* Adjust this */
    top: 259px;    /* Adjust this */

    width: 70px;   /* Adjust if needed */

    visibility: hidden;

    z-index: 6;

}

#stairs-btn:hover + #stairs-pointer{

    visibility: visible;

}

.toaster{

    position: absolute;

    left: 715px;
    top: 290px;

    width: 23px;

    z-index: 3;

    image-rendering: pixelated;

}

#toaster-btn{

    position: absolute;

    left: 715px;
    top: 290px;

    width: 23px;
    height: 23px;

    background: transparent;  /* Temporary */
    border: none;             /* Temporary */

    cursor: pointer;

    z-index: 4;

}

#toaster-pointer{

    position: absolute;

    left: 650px;   /* Adjust as needed */
    top: 295px;

    width: 60px;

    visibility: hidden;

    z-index: 5;

}

#toaster-btn:hover + #toaster-pointer{
    visibility: visible;
}

#portfolio-loader{

    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    z-index: 9999;

}

/* ========================= */
/* TV BUTTON */
/* ========================= */

#tv-btn{

    position: absolute;

    left: 970px;
    top: 615px;

    width: 40px;
    height: 40px;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 10;

}

#tv-pointer{

    position:absolute;

    left: 915px;
    top: 630px;

    width:60px;

    visibility:hidden;

    z-index:5;

}

#tv-btn:hover + #tv-pointer{

    visibility:visible;

}

/* ========================= */
/* PET BUTTON */
/* ========================= */

#pet-btn{

    position: absolute;

    left: 610px;
    top: 315px;

    width: 20px;
    height: 20px;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 10;

}

#pet-pointer{

    position: absolute;

    left: 550px;
    top: 315px;

    width: 60px;

    visibility: hidden;

    z-index: 9999;

    border: none;

}

#pet-btn:hover + #pet-pointer{

    visibility: visible;

}

/* ========================= */
/* FLOWER BUTTON */
/* ========================= */

#flower-btn{

    position: absolute;

    left: 595px;
    top: 575px;

    width: 30px;
    height: 35px;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 10;

}

#flower-pointer{

    position: absolute;

    left: 540px;
    top: 580px;

    width: 60px;

    visibility: hidden;

    z-index: 9999;

}

#flower-btn:hover + #flower-pointer{

    visibility: visible;

}

/* ========================= */
/* REESE BUTTON */
/* ========================= */

#reese-btn{

    position: absolute;

    left: 508px;
    top: 445px;

    width: 38px;
    height: 20px;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 10;

}

#reese-pointer{

    position: absolute;

    left: 450px;
    top: 450px;

    width: 60px;

    visibility: hidden;

    z-index: 9999;

}

#reese-btn:hover + #reese-pointer{

    visibility: visible;

}

.click-text{

    position: absolute;

    top: 220px;
    left: 49%;

    transform: translateX(-50%);

    font-family: "OMORI1";

    font-size: 24px;

    color: white;

    letter-spacing: 2px;

    text-shadow: 2px 2px 0 black;

    z-index: 20;

}

.mobile-warning{

    position: absolute;

    bottom: -90px;
    left: 50%;

    transform: translateX(-50%);

    font-family: "OMORI1";

    font-size: 22px;

    color: white;

    text-shadow: 2px 2px 0 black;

    white-space: nowrap;

}