@import url("https://fonts.googleapis.com/css2?family=Delius&display=swap");

:root {
  font-family: "Delius";
  --main-font-size: 1vw;
  font-size: var(--main-font-size);

  --main-text-color: #583535;
  --neutral-color: #f6eee9;
  --rare-color: #77978a;
  color: var(--main-text-color);

  /*cursor*/
  cursor: url("/images/mainskin/default_cursor.png"), default;

  /*background*/
  background: url('/images/denskin/wallpaper.png') repeat;
  background-size: 10rem;
  overflow: hidden; 
}

/*text highlight*/
::selection {
  color: var(--neutral-color);
  background: var(--rare-color);
}

img, .dialogueBubble {
  position: absolute;
}

a {
  cursor: url("/images/mainskin/pointer_cursor.png"), pointer;
}

body {
  margin: 0;
  overflow: hidden; 
}

a>img {
  transition: 0.5s ease;
}

.clockwise:hover {
  transform: rotate(5deg);
}

.counterclockwise:hover {
  transform: rotate(-5deg);
}

/*dialogue*/
.dialogueBubble {
  background-color: var(--neutral-color);
  border-radius: 1rem;
  max-width: 10rem;
  max-height: max-content;
  padding: 0.25rem;
  text-align: center;
  bottom: 15rem;
  left: 30rem;
  z-index: 1;
}

/*links*/
.console {
  width: 10rem;
  z-index: 1;
  bottom: 23.5rem;
  left: 1rem;
}

.gramophone {
  width: 8rem;
  z-index: 1;
  left: 16rem;
  bottom: 24rem;
}

.vini {
  width: 21rem;
  z-index: 1;
  left: 8rem;
  bottom:-0.5rem;
}

.shrines {
  width: 9rem;
  z-index: 1;
  left: 33.5rem;
  bottom: 31.4rem;
}

.easel {
  width: 8rem;
  right: 45rem;
  bottom: 13rem;
}

.stardrop {
  width: 4rem;
  z-index: 1;
  right: 30rem;
  bottom: 39rem;
}

.books {
  width: 4.5rem;
  z-index: 1;
  left: 59.5rem;
  bottom: 33rem;
}

.typewriter {
  width: 6rem;
  z-index: 1;
  right: 29rem;
  bottom: 27rem;
}

.computer {
  width: 10rem;
  z-index: 1;
  right: 7.5rem;
  bottom: 25rem;
}

.globe {
  width: 18rem;
  right: -3rem;
  bottom: -11rem;
}

/*decoration*/
.shadow {
  filter: drop-shadow(rgb(39, 24, 24) 0 1rem 10px)
}

.sign {
  width: 17rem;
  left: 5rem; 
  bottom: 37rem;
}

.fireplace {
  width: 16rem;
  left: 30rem;
  bottom: 12.5rem;
}

.credenza {
  width: 33rem;
  left: -6rem;
  bottom: 13rem;
}

.bookshelf {
  width: 13rem;
  right: 28rem;
  bottom: 13rem;
}

.desk {
  width: 25rem;
  bottom: 14rem;
  right: 0.5rem;
}

.rug {
  width: 44rem;
  height: 22rem;
  bottom: -10rem;
  left: 13rem
}

.floor {
  width: 100%;
  height: 16rem;
  z-index: -1;
  bottom: 0;
}

/* shrine page*/
.mementoMortem {
  width: 10rem;
  display: block;
  margin: auto;
}

@media screen and (width < 600px) {
  :root {
    --main-font-size: 4vw
  }
}