@font-face {
  font-family: BasicHandwriting;
  src: url(/fonts/BasicHandwriting.ttf);
}
@font-face {
  font-family: Malagua;
  src: url(/fonts/malagua.ttf);
}
@font-face {
  font-family: EmojiFont;
  src: url(/fonts/EmojiFont.ttf);
}

@font-face {
  font-family: SwirlyCurly;
  src: url(/fonts/SwirlyCurly.otf);
}

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

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

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

@font-face {
  font-family: Halloween;
  src: url(/fonts/Ghost-Shadow.ttf);
}

.bonbon-regular {
  font-family: "Bonbon", cursive;
  font-weight: 400;
  font-style: normal;
}

body {
  background-image: url(/images/bg18.gif);
  color: black;
  font-family: Typewriter;
  cursor: url("/images/candle-cursor.gif"), auto;
  width: 100vw;
  height: 100vw;
}

.pagecontainer {
  width: 99vw;
  height: 45vw;
  overflow: hidden;
}

h1 {
  color: royalblue;
  font-family: Dracula;
  font-size: 74px;
  text-shadow:
    0 0 6px white,
    /*middle bright glow*/ 0 0 10px antiquewhite,
    0 0 20px antiquewhite,
    0 0 30px antiquewhite;
}

h2 {
  color: antiquewhite;
  font-family: Meglona;
  font-size: 37px;
}

h3 {
  font-family: NewRomantics;
  color: pink;
  font-size: 42px;
  letter-spacing: 0.5rem;
}

a {
  text-decoration: none;
  color: royalblue;
}

a:hover {
  color: #03255a;
}

.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: absolute;
}
.imgtxt span {
  font-family: Meglona;
  text-align: center;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 2.5rem;
  color: #fff;
  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.imgtxt:hover span,
.imgtxt:focus span {
  opacity: 1;
}
.imgtxt:hover img,
.imgtxt:focus img {
  rotate: 2deg;
}

@keyframes blinkglow {
  0% {
    text-shadow:
      0 0 6px white,
      /*middle bright glow*/ 0 0 10px antiquewhite,
      0 0 20px antiquewhite,
      0 0 30px antiquewhite;
  }
  50% {
    text-shadow: 0 0 6px white;
  }
  100% {
    text-shadow:
      0 0 6px white,
      /*middle bright glow*/ 0 0 10px antiquewhite,
      0 0 20px antiquewhite,
      0 0 30px antiquewhite;
  }
}

.door:hover {
  opacity: 0;
}

/* ===== Scrollbar CSS ===== */
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 0px;
}

*::-webkit-scrollbar-track {
  background: #000000;
}

*::-webkit-scrollbar-thumb {
  background-color: #121d45;
  border-radius: 0px;
  border: 0px none #ffffff;
}

.playPauseBtn {
  background-color: antiquewhite;
  color: black;
  border: 1vw solid transparent;
  border-image: url(/images/frame2-dither.png) 21 round;
  background-clip: padding-box;
  padding-top: 1vw;
  padding-bottom: 1vw;
  cursor: pointer;
  font-family: Typewriter;
  position: absolute;
  font-size: 1.1vw;
}
.playPauseBtn:hover {
  rotate: 2deg;
}
/*End of sitewide/misc stylings*/

/*Start of index styling*/
#site-title {
  color: #b54501;
  font-family: Halloween;
  font-size: 5vw;
  letter-spacing: 0.5vw;
  animation: blinkglow 5s linear infinite;
  position: absolute;
  text-align: center;
  width: 100vw;
  top: -0.5vw;
  z-index: 2;
}

#site-title span:nth-of-type(odd) {
  color: #b54501;
}

#site-title span:nth-of-type(even) {
  color: #6a3e97;
}

#lanternsleft {
  position: absolute;
  width: 15vw;
  left: 2vw;
  top: -1vw;
  filter: drop-shadow(0 0 15px antiquewhite);
  transform-origin: top center;
  animation: swing 8s infinite;
  z-index: 2;
}

@keyframes swing {
  0% {rotate: 10deg;}
  50% {rotate: -10deg}
  100% {rotate: 10deg;}
}

@keyframes swing2 {
  0% {rotate: -10deg;}
  50% {rotate: 10deg}
  100% {rotate: -10deg;}
}

#fogdiv{
  position: fixed;
  top: 0vw;
  left: 0vw;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  background: none !important;
  opacity: 50%;
  z-index: 1;
}

.layer-1 {
  width: 200%;
  height: 200%;
  position: absolute;
  animation: fog-move 30s linear infinite alternate;
}

@keyframes fog-move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-50%, -20%); }
}
#jack-o-lanterns {
  position: absolute;
  width: 15vw;
  top: 40.2vw;
  left: 55vw;
}
#doorswirl {
  position: absolute;
  width: 26vw;
  left: 37.1vw;
  top: 7.7vw;
}

#doorframe {
  position: absolute;
  width: 26vw;
  left: 37vw;
  top: 10vw;
}

#frontdoor {
  position: absolute;
  width: 26vw;
  left: 37vw;
  top: 10vw;
}

#webrings {
  color: pink;
  width: 15vw;
  text-align: center;
  height: 11vw;
  overflow: scroll;
  overflow-x: hidden;
  position: absolute;
  left: 64vw;
  top: 11vw;
  font-size: 0.9vw;
}

#note1 {
  rotate: -8deg;
}

#note1pic {
  position: absolute;
  width: 18vw;
  left: 17vw;
  top: 4vw;
}

#note1info {
  position: absolute;
  left: 20vw;
  top: 8.9vw;
  font-size: 1em;
  width: 12.4vw;
  height: 15.2vw;
  line-height: 1.8vw;
  overflow-y: scroll;
}

#note2 {
  rotate: 4deg;
  text-align: center;
}

#note2pic {
  position: absolute;
  width: 24vw;
  left: 64vw;
  top: 24vw;
}

#note2info {
  position: absolute;
  left: 68.3vw;
  top: 30vw;
  width: 16vw;
  height: 13vw;
  font-size: 1.5em;
  overflow-y: scroll;
}

#note3pic {
  position: absolute;
  width: 19vw;
  left: 18vw;
  top: 28vw;
}

#note3info {
  position: absolute;
  left: 22vw;
  width: 13.4vw;
  height: 14vw;
  top: 31vw;
  rotate: 2.8deg;
  line-height: 1.13vw;
  font-size: 1em;
  overflow-y: scroll;
}

#lanternsright {
  position: absolute;
  width: 18vw;
  left: 83vw;
  top: -8vw;
  filter: drop-shadow(0 0 15px antiquewhite);
  transform-origin: top center;
  animation: swing2 10s infinite;
  z-index: 2;
}
/*End of index page styling*/

/*Start of room styling*/
#roommusic {
  width: 9vw;
  top: 40vw;
  left: 8vw;
}

#rug {
  position: absolute;
  left: 24vw;
  top: 21vw;
  width: 50vw;
}

#shelf {
  position: absolute;
  left: 37vw;
  top: -0.5vw;
  rotate: -3deg;
  animation: float 6s infinite;
}

#crystal-pile {
  position: absolute;
  top: 34vw;
  left: 50vw;
  width: 5vw;
}

#crystal-ball {
  position: absolute;
  width: 5vw;
  top: 35vw;
  left: 62.5vw;
}

#table {
  position: absolute;
  left: 28vw;
  top: 20vw;
  width: 12vw;
  animation: float 8s infinite;
  rotate: 5deg;
}

#shelfpic {
  width: 32vw;
}

#bed {
  position: absolute;
  left: 0.1vw;
  top: 19.3vw;
  width: 30vw;
  animation: float 7s infinite;
}

#deskroompic {
  width: 25vw;
}

#lantern1 {
  position: absolute;
  width: 10vw;
  left: 2vw;
  top: -1vw;
  filter: drop-shadow(0 0 15px antiquewhite);
  transform-origin: top center;
  animation: swing2 10s infinite;
  
}

#lantern2 {
  position: absolute;
  width: 10vw;
  left: 19vw;
  top: -1vw;
  filter: drop-shadow(0 0 15px antiquewhite);
  animation: swing 9s infinite;
  transform-origin: top center;
}

#lantern3 {
  position: absolute;
  width: 10vw;
  left: 70vw;
  top: -2vw;
  filter: drop-shadow(0 0 15px antiquewhite);
  transform-origin: top center;
  animation: swing2 10s infinite;
}

#lantern4 {
  position: absolute;
  width: 10vw;
  left: 85vw;
  top: -6vw;
  filter: drop-shadow(0 0 15px antiquewhite);
  animation: swing 15s infinite;
  transform-origin: top center;
}

#desk {
  right: 4vw;
  top: 18vw;
  animation: float 6s infinite;
}

#desk span {
  top: 28%;
}

#wall2arrow {
  position: absolute;
  width: 6vw;
  left: 92vw;
  top: 14vw;
}

#aboutgif {
  width: 18vw;
}

#aboutme {
  position: absolute;
  top: 14.3vw;
  left: 5.9vw;
  animation: float 7s infinite;
}

#ouija {
  position: absolute;
  width: 8vw;
  top: 33vw;
  left: 55vw;
  rotate: 10deg;
  transform: skewx(-14deg);
}

#candles-floor {
  position: absolute;
  width: 4vw;
  top: 15vw;
  left: 32.6vw;
  z-index: 2;
  animation: float 5s infinite;
  rotate: -5deg
}

@keyframes float {
  0% {transform: translatey(0);}
  50% {transform: translateY(-0.5vw) /*rotate(5deg);*/}
  100% {transform: translateY(0);}
}
/*#music{
  position: absolute;
  left: 26.2vw;
  top: 9vw;
}*/
/*End of room styling*/

/*Start of about me styling*/
.backbtnpic {
  width: 11.5vw;
}

#aboutmusic {
  position: absolute;
  width: 9vw;
  top: 23vw;
  left: 12vw;
}

#about-title {
  text-align: center;
  font-size: 2vw;
}

#about-info {
  width: 10vw;
  height: 10vw;
  position: absolute;
  left: 10vw;
  padding-left: 15px;
  top: 10vw;
  font-size: 0.87vw;
}

#aboutpara {
  position: absolute;
  padding: 15px;
  width: 44vw;
  height: 29vw;
  left: 26.7vw;
  overflow: scroll;
  overflow-x: hidden;
}

#aboutpara h3 {
  color: black;
}

#likesdislikes {
  color: black;
  position: absolute;
  width: 15vw;
  max-height: 38vw;
  left: 75vw;
  padding-left: 1vw;
  padding-right: 1vw;
  overflow-y: scroll;
}

#likesdislikes h3 {
  color: black;
  text-align: center;
}

#statuscafe {
  position: absolute;
  width: 15vw;
  max-height: 7vw;
  padding: 0.5vw;
  top: 30vw;
  left: 7vw;
  overflow: scroll;
  overflow-x: hidden;
}

#aboutcloud {
  position: absolute;
  left: 17vw;
  top: -9vw;
  width: 24vw;
}

#aboutlights {
  position: absolute;
  width: 12vw;
  left: 67vw;
  top: -3vw;
}

#aboutcorner {
  position: absolute;
  width: 9vw;
  top: 30vw;
  left: 65.7vw;
  height: 10vw;
}
/*End of about me styling*/

/*Start of shelf styling*/
.shelfbg {
  position: absolute;
  left: 0.1vw;
  width: 100vw;
  top: -29vw;
  bottom: 0.1vw;
}

#shelfmusic {
  left: 45vw;
  top: 1vw;
}

#snoopyfigure {
  position: absolute;
  width: 10vw;
  left: 12vw;
  top: 6vw;
}

#jjkfigure {
  position: absolute;
  width: 11vw;
  left: 22vw;
  top: 15.3vw;
}

#moviestop {
  position: absolute;
  width: 11.5vw;
  left: 19.6vw;
  top: 6.7vw;
}

#moviesmiddle {
  position: absolute;
  width: 9.4vw;
  left: 14vw;
  top: 15vw;
}

#moviesbottom {
  position: absolute;
  width: 17vw;
  left: 14vw;
  top: 25vw;
}

#movies span {
  position: absolute;
  left: 22vw;
  top: 20vw;
}

#booksleft {
  position: absolute;
  width: 12vw;
  left: 35vw;
  top: 6.8vw;
}

#booksright {
  position: absolute;
  width: 11vw;
  left: 53vw;
  top: 4.8vw;
}

#booksmiddle {
  position: absolute;
  width: 10vw;
  left: 45.3vw;
  top: 5.8vw;
}

#readinglog span {
  position: absolute;
  left: 50vw;
  top: 11vw;
}

#tv {
  width: 26vw;
  position: absolute;
  left: 37vw;
  top: 15vw;
}

#videos {
  position: absolute;
  left: 71vw;
  top: 15.5vw;
}

#videospic {
  width: 11.5vw;
}

#photos {
  position: absolute;
  left: 71vw;
  top: 6vw;
}

#photospic {
  width: 11.5vw;
}

#quartz {
  position: absolute;
  width: 4vw;
  left: 16vw;
  top: 35vw;
}

#crystal {
  position: absolute;
  width: 4vw;
  left: 26.5vw;
  top: 36vw;
}

#kuromifigure {
  position: absolute;
  width: 8vw;
  left: 19.5vw;
  top: 33.5vw;
}

#tv {
  left: 37vw;
  top: 15vw;
  z-index: 1;
  pointer-events: none;
}

#spookyvideos {
  position: absolute;
  top: 16.4vw;
  left: 38.2vw;
  z-index: 0;
  filter: drop-shadow(0 0 20px antiquewhite);
  width: 23.4vw;
  height: 18.7vw;
}

#pumpkin-lights-1 {
  position: absolute;
  left: 15vw;
  width: 15.9vw;
  filter: drop-shadow(0 0 10px orange);
}

#pumpkin-lights-2 {
  position: absolute;
  width: 15.9vw;
  left: 36vw;
  filter: drop-shadow(0 0 10px orange);
}

#pumpkin-lights-3 {
  position: absolute;
  width: 15.9vw;
  left: 47.7vw;
  filter: drop-shadow(0 0 10px orange);
}

#pumpkin-lights-4 {
  position: absolute;
  width: 15.9vw;
  left: 69vw;
  filter: drop-shadow(0 0 10px orange);
}

#candle-bottle {
  position: absolute;
  width: 12vw;
  top: 25vw;
  left: 67vw;
  filter: drop-shadow(0 -50px 20px #d2b84a);
}

#shelf-candle {
  position: absolute;
  width: 7vw;
  top: 29.5vw;
  left: 76vw;
  filter: drop-shadow(0 -15px 10px #d2b84a);
}
/*
#pc{
  position: absolute;
  left: 34vw;
  top: 12vw;
}
*/

/*
#games{
  position: absolute;
  left: 67.8vw;
  top: 28vw;
}
*/
/*End of shelf styling*/

/*Start of reading log styling*/
#readingmusic {
  left: 45vw;
  top: 1vw;
}

#bookiframe {
  position: absolute;
  left: 36vw;
  top: 7.2vw;
  width: 27.4vw;
  height: 32.4vw;
}

.book:hover {
  transform: scale(2);
  z-index: 2;
}

#koaBtn {
  position: absolute;
  width: 4.5vw;
  top: 7.2vw;
  left: 14.4vw;
}

#thgBtn {
  position: absolute;
  width: 4.6vw;
  top: 7.2vw;
  left: 19.2vw;
}

#cfBtn {
  position: absolute;
  width: 4.8vw;
  top: 7.2vw;
  left: 24vw;
}

#mjBtn {
  position: absolute;
  width: 4.7vw;
  top: 17.4vw;
  left: 14.4vw;
}

.bookTitle {
  text-align: center;
}
.bookReview {
  background-color: antiquewhite;
  border: 20px solid transparent;
  border-image: url("/images/frame1-dither.png") 18 round;
  background-clip: padding-box;
  text-align: center;
  padding-bottom: 12px;
  padding-left: 5px;
  padding-right: 5px;
}

.bookReview h2 {
  color: black;
}

.bookReview h3 {
  color: black;
}

/*End of reading log styling*/

/*Start of movies styling*/
#moviesbg {
  position: absolute;
  left: -5vw;
  width: 110vw;
  top: -29vw;
  bottom: 0.1vw;
}

#moviesmusic {
  left: 74.5vw;
  top: 42vw;
}

#letterboxd h2 {
  position: absolute;
  left: 45vw;
}

#letterboxd-embed-wrapper-tc {
  position: absolute;
  background-color: black;
  color: antiquewhite;
  top: 6.3vw;
  left: 34.1vw;
  padding-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  width: 30vw;
  border: double;
}

#moviescredit {
  position: absolute;
  top: 47.2vw;
  left: 40.7vw;
  background-color: antiquewhite;
}

#dvds h2 {
  position: absolute;
  left: 16.3vw;
  top: 2vw;
  padding-bottom: 1px;
}

#moviefavs h2 {
  position: absolute;
  top: 2.6vw;
  left: 76vw;
  width: 5vw;
  text-align: center;
  height: 2vw;
  padding-bottom: 16px;
}

#coraline {
  position: absolute;
  width: 5vw;
  left: 70vw;
  top: 11vw;
}

#hmc {
  position: absolute;
  width: 5vw;
  left: 75.3vw;
  top: 11.2vw;
}

#lotr {
  position: absolute;
  width: 5vw;
  left: 80.7vw;
  top: 11.2vw;
}

#smitsv {
  position: absolute;
  width: 5vw;
  left: 83.6vw;
  top: 22.4vw;
}

#americanpsycho {
  position: absolute;
  width: 5vw;
  left: 78.3vw;
  top: 22.5vw;
}

#midsommar {
  position: absolute;
  width: 5vw;
  top: 22.5vw;
  left: 72.9vw;
}

#arrival {
  position: absolute;
  width: 5vw;
  top: 32vw;
  left: 70vw;
}
/*End of movies styling*/

/*Start of photos styling*/
#photosmusic {
  left: 11vw;
  top: 12vw;
}

#photosnotepic {
  position: absolute;
  width: 26vw;
  top: 18vw;
  left: 2vw;
}

#photosnote {
  position: absolute;
  width: 18vw;
  top: 24.4vw;
  left: 6.4vw;
  font-size: 2vw;
}

.photopile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 50%;
  margin-left: 27.5vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
}
.photopile figure {
  display: inline-block;
  background: white;
  box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.55);
  transform: rotate(2deg);
  margin: 0 -25px;
}
.photopile figure img {
  max-width: calc(100% - 2rem);
  margin: 1rem 1rem 0 1rem;
  border: 2px rgb(0, 0, 0, 0.55) inset;
}
.photopile figcaption,
.popovers figcaption {
  font-family: Typewriter;
  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile button {
  background: none;
  border: none;
  max-width: 40%;
}
.photopile button:hover,
.photopile button:focus {
  z-index: 3;
  cursor: pointer;
}
.photopile button:nth-child(2n) {
  transform: rotate(-10deg);
}
.photopile button:nth-child(3n) {
  transform: rotate(5deg);
}
.photopile button:nth-child(4n) {
  transform: rotate(4deg);
}
.photopile button:nth-child(5n) {
  transform: rotate(-2deg);
}
.photopile button:nth-child(6n) {
  transform: rotate(-7deg);
}
:popover-open {
  border: none;
  box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.55);
  position: fixed;
  top: -3vw;
  left: 5vw;
}
.popovers figure:popover-open {
  display: block;
  background: white;
}
.popovers figure:popover-open figcaption {
  margin: 2.5vmin 1rem 4vmin 1rem;
  font-size: 175%;
  color: black;
}
.popovers figure:popover-open img {
  margin: 4vmin 4vmin 0 4vmin;
  width: 100vmin;
  border: 4px rgb(0, 0, 0, 0.55) inset;
}

/*End of photos styling*/

/*Start of video styling*/
#videosshelf {
  position: absolute; 
  width: 250vw; 
  top: -70vw; 
  left: -72vw;
}

#tvbg {
  position: absolute; 
  background-image: url('/images/bg18.gif'); 
  width: 63vw; 
  height: 46vw; 
  top: 2vw; 
  left: 18vw;
}

#tvframe {
  position: absolute; 
  width: 78vw; 
  top: -8vw; 
  left: 10.5vw;
}

#videogallery h2 {
  font-size: 5vw;
}

#videogallery {
  position: absolute; 
  left: 19vw; 
  top: 2.6vw; 
  width: 61vw; 
  height: 42.3vw; 
  overflow-y: scroll; 
  text-align: center; 
  margin-top: 1vw;
}
/*End of video styling*/

/*Start of desk styling*/
#desk-bg {
  position: absolute; 
  left: 11vw; 
  width: 75vw;
  top: 18vw;
}

#frag-left {
  position: absolute; 
  width: 6vw; 
  left: 26.4vw; 
  top: 20vw;
}

#frag-mid {
  position: absolute; 
  width: 6vw; 
  left: 23vw; 
  top: 21.3vw
}

#frag-right {
  position: absolute; 
  width: 6vw; 
  left: 28vw; 
  top: 20vw
}

#fragrances span {
  top: 25vw; 
  left: 29vw;
}

#deskmusic {
  width: 9vw; 
  left: 45.3vw; 
  top: 41.7vw;
}

#todo-pic {
  position: absolute; 
  width: 12vw; 
  top: 27vw; 
  left: 63vw;
}

#todo {
  position: absolute; 
  top: 31vw; 
  left: 64.5vw; 
  text-align: center;
  width: 10vw;
}

#journal {
  position: absolute; 
  top: 42vw; 
  left: 24vw;
}

#journal-pic {
  width: 13vw;
}

#wall-art {
  position: absolute;
}

#ghostcat {
  position: absolute;
  width: 10vw;
  left: 44vw;
}

#mushroom-girl {
  position: absolute;
  top: 1vw;
  width: 15vw;
  left: 12vw;
}

#bat {
  width: 8vw;
  position: absolute;
  left: 13vw;
  top: 20vw;
}

#skull-couple {
  position: absolute;
  width: 15vw;
  left: 27.8vw;
}

#bat-fly {
  position: absolute;
  left: 54.2vw;
  width: 15vw;
  top:12vw;
}

#ghost-witch {
  position: absolute;
  width: 10vw;
  top: 8vw;
  left: 1vw;
}

#ghost-circle {
  position: absolute;
  width: 12vw;
  left: 81vw;
  top: 1vw;
}

#witches {
  position: absolute;
  width: 14vw;
  top: 12.3vw;
  left: 40vw;
}

#dried-roses {
  position: absolute;
  width: 15vw;
  top: 19vw;
  left: 1vw;
}

#moonlight {
  position: absolute;
  width: 15vw;
  left: 82vw;
  top: 15vw;
}

#lock {
  position: absolute;
  left: 25vw;
  width: 7vw;
}

#key {
  position: absolute;
  left: 91.3vw;
  width: 10vw;
  top: 7.5vw;
  rotate: 93deg;
}

#the-moon-tarot {
  position: absolute;
  width: 5vw;
  top: 15vw;
  left: 34vw;
}

#the-sun-tarot {
  position: absolute;
  width: 5vw;
  top: 26vw;
  left: 79vw;
}

#dagger {
  position: absolute;
  width: 9vw;
  left: 83vw;
  top: 26vw;
}

#scissors {
  position: absolute;
  width: 10vw;
  top: 19vw;
  left: -2vw;
}

#eye {
  position: absolute;
  left: 50vw;
  top: -4vw;
  width: 16vw;
}

#writing {
  position: absolute;
  left: 67vw;
  width: 15.98vw;
}

#star-map {
  position: absolute;
  width: 9vw;
  left: 71.3vw;
  top: 15vw;
}

#dangle {
  position: absolute;
  width: 6.8vw;
  left: 61.8vw;
}

#wall-candle {
  position: absolute;
  top: 23vw;
  width: 16vw;
  left: 86.5vw;
}
/*End of desk styling*/

/*Start of journal styling*/

#journal-bg {
  position: absolute; 
  width: 100vw; 
  top: -6vw;
}

#entries {
  position: absolute; 
  top:5vw; 
  left: 52vw; 
  width: 37vw; 
  height: 40vw; 
  overflow-y: scroll;
}

.entry h3 {
  color: black;
}

#currently-pic {
  position: absolute; 
  width: 32vw; 
  left: 13vw; 
  top: -2vw;
}
#currently {
  position: absolute; 
  left: 21.7vw; 
  width: 18vw; 
  top: 4vw;
}

#journal-nav {
  position: absolute;
  left: 15vw;
  top: 28vw;
  overflow-y: scroll;
}

#journal-nav h3 {
  color: black;
}

#journal-nav a {
  color: deeppink;
}
/*End of journal styling*/

/*Start of fragrances styling*/
#fragsShelf {
  position: absolute; 
  max-width: 98vw; 
  overflow: hidden;
}

#frags-shelf-pic {
  width: 100vw;
}

#cherry-ambition-link {
  position: absolute; 
  width: 9vw; 
  left: 18vw; 
  top: 2vw;
}

#sugarful-spice-link {
  position: absolute; 
  width: 5vw; 
  left: 26.4vw; 
  top: 0.5vw;
}

#fragsMusic {
  left: 85vw; 
  top: 1vw;
}
/*End of fragrances styling*/

/*Start of wall 2 styling*/

#wallmusic {
  width: 9vw; 
  top: 2vw; 
  left: 51vw;
}

#wallbackbtn {
  position: absolute; 
  width: 6vw; 
  left: 0.1vw; 
  top: 14vw;
}

#sitemappic {
  position: absolute; 
  width: 20vw; 
  top: 3vw; 
  left: 9vw;
}

#coolsites {
  position: absolute; 
  top: 20vw; 
  left: 5.8vw; 
  rotate: -2deg;
}

#piclogpic {
  position: absolute; 
  width: 15vw; 
  left: 31vw; 
  top: 5vw; 
  rotate: 2deg;
}

#blinkies {
  position: absolute; 
  left: 30vw; 
  top: 28vw;
}

#chattable-container {
  position: absolute; 
  top: 2vw; 
  left: 62vw; 
  rotate: -3deg; 
  height: 19vw;
}

#chattable {
  height: 19vw;
}

#buttons {
  position: absolute; 
  left: 50vw; 
  top: 10vw;
}

#fanlistings {
  position: absolute; 
  color: pink; 
  width: 15vw; 
  padding: 15px; 
  left: 61vw; 
  top: 25vw; 
  text-align: center;
}

#counter-note {
  position: absolute; 
  width: 15vw; 
  left: 81vw;
}

#counter {
  position: absolute; 
  text-align: center; 
  left: 84.5vw; 
  top: 3vw;
}

#updates {
  position: absolute; 
  width: 14vw; 
  left: 82vw; 
  top: 16vw; 
  rotate: 4deg; 
  padding-top: 0.1px; 
  height: 13vw;
}

#guestbook {
  position: absolute; 
  width: 17vw; 
  top: 31vw; 
  left: 79vw;
}

/*End of wall 2 styling*/

/*Start of sitemap styling*/
#map {
  position: absolute; 
  width: 100vw; 
  top: -10vw; 
  left: -0.1vw;
}

#sitemap {
  position: absolute; 
  left: 40vw; 
  top: 15vw;
}
/*End of sitemap styling*/
.wip {
  position: absolute;
  left: 20vw;
  top: 20vw;
}


ul {
  list-style-type: none; /* Remove default bullets */
  list-style-image: url("/images/icons/bow.png");
}

.frame1 {
  background-color: #0f0800;
  border: 1vw solid transparent;
  border-image: url("/images/frame6-dither.png") 90 stretch;
  background-clip: padding-box;
  padding: 0.4vw;
}
.frame2 {
  background-color: #0f0800;
  border: 20px solid transparent;
  border-image: url("/images/frame8-dither.png") 50 round;
  background-clip: padding-box;
  padding: 15px;
}

.frame3 {
  background-color: #0f0800;
  border: 1.1vw solid transparent;
  border-image: url("/images/frame1-dither.png") 18 stretch;
  background-clip: padding-box;
  padding: 1vw;
}
.frame4 {
  background-color: #0f0800;
  border: 20px solid transparent;
  border-image: url("/images/frame9-dither.png") 50 stretch;
  padding: 2px;
}

.frame5 {
  background-color: antiquewhite;
  border: 20px solid transparent;
  border-image: url("/images/ivorylacelarge.png") 34 round;
  background-clip: padding-box;
}

#sitemap {
  background-color: antiquewhite;
  border: 20px solid transparent;
  border-image: url("/images/frame1-dither.png") 18 round;
  background-clip: padding-box;
  padding-bottom: 12px;
  padding-right: 12px;
  padding-top: 12px;
  position: absolute;
  overflow: hidden;
}

#coolsites {
  max-width: 20vw;
  max-height: 20vw;
  text-align: center;
  overflow: scroll;
  overflow-x: hidden;
}

.frametext {
  color: pink;
}

#blinkies {
  max-width: 25vw;
  max-height: 19vw;
  text-align: center;
  overflow: scroll;
  overflow-x: hidden;
}

#buttons {
  max-width: 7vw;
  text-align: center;
  max-height: 10vw;
  overflow: scroll;
  overflow-x: hidden;
}