@font-face {
    font-family: HauntingAttraction;
    src: url(HauntingAttraction.ttf);
}

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

body {
    background-color: #000;
}

.image {
    height: 70vh;
    width: 70vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 2rem;
    opacity: 0;
}

.text, .play_end, .next {
    color: #fff;
    text-align: center;
    padding: 0 5rem;
    margin-top: 1rem;
}

.play_end, .next {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.next {
    display: none;
}

.intro_game_over {
    font-size: 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #8b0000;
}

.play_end {
    font-size: 1rem;
    margin-top: 0.5rem;
    cursor: pointer;
}

.back {
    color: #fff;
    position: absolute;
    font-size: 1rem;
    left: 2vw;
    cursor: pointer;
    display: none;
}

.look, .enter, .jump, .enter_woods {
    color: #fff;
    position: absolute;
    text-align: center;
    width: 5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: none;
}

/* DIVS */

/* BEDROOM */

.bed {
    position: absolute;
    top: 70vh;
    left: 40.5vw;
    height: 2.7rem;
    width: 10rem;
    transform: rotate(160deg);
    display: none;
}

.window {
    position: absolute;
    top: 36vh;
    left: 31.5vw;
    height: 6rem;
    width: 3rem;
    display: none;
}

.cabinet {
    position: absolute;
    top: 75.5vh;
    left: 22.5vw;
    height: 2.5rem;
    width: 3.5rem;
    display: none;
}

.cabinet2 {
    position: absolute;
    top: 66vh;
    left: 47vw;
    height: 0.8rem;
    width: 2.3rem;
    display: none;
}

.drawer {
    position: absolute;
    top: 71vh;
    left: 24.5vw;
    height: 0.8rem;
    width: 2.8rem;  
    display: none;
}

.door {
    position: absolute;
    top: 44.3vh;
    left: 71.2vw;
    height: 9rem;
    width: 4rem;
    display: none;
}

.picture {
    position: absolute;
    top: 43vh;
    left: 15.1vw;
    height: 2rem;
    width: 2.5rem;
    display: none;
}

.picture2 {
    position: absolute;
    top: 46.5vh;
    left: 50vw;
    height: 1.7rem;
    width: 1rem;
    display: none;
}

.under_bed {
    position: absolute;
    top: 82.5vh;
    left: 50vw;
    height: 1rem;
    width: 7rem;
    transform: rotate(160deg);
    display: none;
}

.key {
    position: absolute;
    top: 50vh;
    left: 25vw;
    height: 3rem;
    width: 18rem;
    cursor: grab;
    display: none;
}

/* HALLWAY */

.hallway_window {
    position: absolute;
    top: 30vh;
    left: 30vw;
    height: 7rem;
    width: 3rem;
    transform: rotate(143deg);
    display: none;
}

.kitchen_door {
    position: absolute;
    top: 38vh;
    left: 45.5vw;
    height: 3.5rem;
    width: 2.8rem;
    display: none;
}

.bedroom_door {
    position: absolute;
    top: 89vh;
    left: 15.2vw;
    height: 1rem;
    width: 6.5rem;
    display: none;
}

.upstairs {
    position: absolute;
    top: 24.5vh;
    left: 61vw;
    height: 9rem;
    width: 9.5rem;
    display: none;
}

/* KITCHEN */

.kitchen_window {
    position: absolute;
    top: 24.75vh;
    left: 57vw;
    height: 6rem;
    width: 11rem;
    display: none;
}

.kitchen_cabinets_up {
    position: absolute;
    top: 28.5vh;
    left: 18vw;
    height: 4rem;
    width: 11rem;
    transform: rotate(9deg);
    display: none;
}

.kitchen_cabinets_down {
    position: absolute;
    top: 65vh;
    left: 17.2vw;
    height: 5.3rem;
    width: 11rem;
    transform: rotate(170deg);
    display: none;
}

.sink {
    position: absolute;
    top: 60vh;
    left: 48vw;
    height: 5.3rem;
    width: 10rem;
    display: none;
}

.kitchen_drawers {
    position: absolute;
    top: 60vh;
    left: 74.5vw;
    height: 6rem;
    width: 4rem;
    display: none;
}

.knife {
    position: absolute;
    top: 56vh;
    left: 36.8vw;
    height: 3rem;
    width: 13rem;
    transform: rotate(118deg);
    cursor: grab;
    display: none;
}

/* BACKYARD */

.sky {
    position: absolute;
    top: 25vh;
    left: 64vw;
    height: 4rem;
    width: 10rem;
    display: none;
}

.tree {
    position: absolute;
    top: 25vh;
    left: 15.5vw;
    height: 8rem;
    width: 20rem;
    display: none;
}

.gate {
    position: absolute;
    top: 75vh;
    left: 15.5vw;
    height: 4rem;
    width: 15rem;
    display: none;
}

.shack {
    position: absolute;
    top: 63vh;
    left: 74.5vw;
    height: 3.3rem;
    width: 5rem;
    display: none;
}

.shovel {
    position: absolute;
    top: 37vh;
    left: 60vw;
    height: 10.5rem;
    width: 2.3rem;
    display: none;
}

.shack_behind {
    position: absolute;
    top: 25vh;
    left: 15vw;
    height: 14.5rem;
    width: 8rem;
    display: none;
}

/* WOODS */

.forward {
    position: absolute;
    top: 24vh;
    left: 37vw;
    height: 15.7rem;
    width: 10rem;
   display: none;
}

.left {
    position: absolute;
    top: 24vh;
    left: 15.5vw;
    height: 15.7rem;
    width: 10rem;
   display: none;
}

.right {
    position: absolute;
    top: 24vh;
    left: 59.8vw;
    height: 12rem;
    width: 10rem;
   display: none;
}

.blink {
    position: absolute;
    top: 86vh;
    left: 73vw;
    height: 0.5rem;
    width: 0.5rem;
   background-color: #daa520;
    border-radius: 50%;
    animation: blinker 1s linear infinite;
    display: none;
}

@keyframes blinker {
    50% {
      opacity: 0;
    }
}

.boat_key {
    position: absolute;
    top: 52vh;
    left: 35vw;
    height: 3.8rem;
    width: 15rem;
    display: none;
}

.fade_in {
    opacity: 1;
    transition: opacity 2s linear;
}

.fade_out {
    opacity: 0;
    transition: opacity 3s linear;
}

/* CREDITS */

#scroll-container {
    height: 100vh;
    z-index: 1;
    overflow: hidden;
    display: none;
  }
  
  .scroll-text {
      position: relative;
      margin: auto;
    height: 100vh;
    text-align: center;
    color: #fff;
    
    /* animation properties */
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    
    -moz-animation: my-animation 30s linear;
    -webkit-animation: my-animation 30s linear;
    animation: my-animation 30s linear;
  }
  
  /* for Firefox */
  @-moz-keyframes my-animation {
    from { -moz-transform: translateY(100%); }
    to { -moz-transform: translateY(-100%); }
  }
  
  /* for Chrome */
  @-webkit-keyframes my-animation {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(-100%); }
  }
  
  @keyframes my-animation {
    from {
      -moz-transform: translateY(100%);
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
    }
    to {
      -moz-transform: translateY(-100%);
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
  }

/* SOUND */

.bedroom_music, .click_sound, .jumpscare_sound, .drawer_sound, .unlock_door, .hallway_music, .footstep_sound, .laugh1, .laugh2, .backyard_music, .laugh3, .woods_music, .end_music {
    display: none;
}