/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
.delius-swash-caps-regular {
  font-family: "Delius Swash Caps", cursive;
  font-weight: 400;
  font-style: normal;
}

body {
  background-image: url('pics/wall.jpg');
  color: black;
  font-family: Verdana;
}

body, html {
  overflow: hidden;
}

.main{
  position: absolute;
  top: 10%;
  left: 10%;
  width: 60%;
  height: 80%;
  border-style: outset;
  border-color: #2b616b;
  border-width: 7px;
  border-radius: 5px;

}
#table {
    width: 30vw;
    position: absolute;
    top: 85%;
    left: 0%;

}
#window {
    width: 16vw;
    position: absolute;
    top: 7%;
    left: 75%;

}
#curtain {
    width: 24vw;
    position: absolute;
    top: 4%;
    left: 71%;

}
#randomImage{
    width: 14vw;
    height:24vw;
    position: absolute;
    top: 8%;
    left: 76%;
}

#plant {
    width: 17vw;
    position: absolute;
    bottom: 7%;
    left: -2%;
    overflow: visible;
    filter: drop-shadow(0.4vw 0.4vw 0 #895129);
    cursor: pointer;
}

#plant:hover {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(10deg);
}

#planttext {
    display: none;
    position: absolute;
    top: 40%;
    left: 13%;
    background-color: #895129;
    color: white;
    font-family: "Delius Swash Caps", cursive;
    font-size: 1.2vw;
    opacity: 85%;
    padding: 1.2vw;
    width: 11vw;
    border-image-slice: 100 100 100 100;
    border-image-width: 1.5vw 1.5vw 1.5vw 1.5vw;
    border-image-outset: 1.0vw 1.0vw 1.0vw 1.0vw;
    border-image-repeat: repeat repeat;
    border-image-source: url(pics/lace.png);
    z-index: 99999;
}

#plant:hover+#planttext {
    display: block;
    position: absolute;
}

#planttext:hover {
    display: block;
    position: absolute;
}

#candle {
    width: 10vw;
    position: absolute;
    bottom: 6%;
    left: 8%;
    overflow: visible;
    filter: drop-shadow(0.4vw 0.4vw 0 #895129);
    cursor: pointer;
}

#candle:hover {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(10deg);
}

#candletext {
    display: none;
    position: absolute;
    top: 50%;
    left: 16%;
    background-color: #895129;
    color: white;
    font-family: "Delius Swash Caps", cursive;
    font-size: 1.2vw;
    opacity: 85%;
    padding: 1.2vw;
    width: 11vw;
    border-image-slice: 100 100 100 100;
    border-image-width: 1.5vw 1.5vw 1.5vw 1.5vw;
    border-image-outset: 1.0vw 1.0vw 1.0vw 1.0vw;
    border-image-repeat: repeat repeat;
    border-image-source: url(pics/lace.png);
    z-index: 99999;
}

#candle:hover+#candletext {
    display: block;
    position: absolute;
}

#candletext:hover {
    display: block;
    position: absolute;
}

#blog {
    width: 8vw;
    position: absolute;
    bottom: 2%;
    left: 20%;
    overflow: visible;
    filter: drop-shadow(0.4vw 0.4vw 0 #895129);
    cursor: pointer;
}

#blog:hover {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(10deg);
}

#blogtext {
    display: none;
    position: absolute;
    top: 60%;
    left: 20%;
    background-color: #895129;
    color: white;
    font-family: "Delius Swash Caps", cursive;
    font-size: 1.2vw;
    opacity: 85%;
    padding: 1.2vw;
    width: 11vw;
    border-image-slice: 100 100 100 100;
    border-image-width: 1.5vw 1.5vw 1.5vw 1.5vw;
    border-image-outset: 1.0vw 1.0vw 1.0vw 1.0vw;
    border-image-repeat: repeat repeat;
    border-image-source: url(pics/lace.png);
    z-index: 99999;
}

#blog:hover+#blogtext {
    display: block;
    position: absolute;
}

#blogtext:hover {
    display: block;
    position: absolute;
}

#clothes {
    width: 20vw;
    position: absolute;
    bottom: -4%;
    right: -2%;
    overflow: visible;
    filter: drop-shadow(0.4vw 0.4vw 0 #895129);
    cursor: pointer;
}

#clothes:hover {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(10deg);
}

#clothestext {
    display: none;
    position: absolute;
    top: 40%;
    right: 19%;
    background-color: #895129;
    color: white;
    font-family: "Delius Swash Caps", cursive;
    font-size: 1.2vw;
    opacity: 85%;
    padding: 1.2vw;
    width: 11vw;
    border-image-slice: 100 100 100 100;
    border-image-width: 1.5vw 1.5vw 1.5vw 1.5vw;
    border-image-outset: 1.0vw 1.0vw 1.0vw 1.0vw;
    border-image-repeat: repeat repeat;
    border-image-source: url(pics/lace.png);
    z-index: 99999;
}

#clothes:hover+#clothestext {
    display: block;
    position: absolute;
}

#clothestext:hover {
    display: block;
    position: absolute;
}