body, html {
   background-image: url("pictures/window.jpg");
   background-size:cover;
   overflow-y:scroll;
   overflow-x:hidden;
   background-color:black;
   
}

.container {
    width:100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

#bagu {
    position:absolute;
    left: 7vw;
    top: 5vw;
    width:16.5vw;
}

#bagubg {
    position:absolute;
    top:8vw;
    left:5vw;
    width:20vw;
    height:15vw;
}

#bg {
    width:100%;
    position: absolute;
    left:0%;
    right:0%;
    top:0%;
   
    
}

::-webkit-scrollbar {
    display: none;
}

@font-face {
   font-family: 'Connectionserif';
   src: url('ConnectionSerif-d20X.otf');

}

#yellow {
   color:#E5B054;
}

* {font-family: Connectionserif;
   color:white;
   font-size: 1vw;
   padding-left: 3px;
}

#welcomehome {
    position:absolute;
    width:11.5vw;   
    top:8.5vw;
    left:13vw;
    border-width:2px;
    border-color:#E5B054;
    border-style:dashed;
    overflow-y:scroll;
    background-image: url('backgrounds/2b9538fa4317ad6f421ec65bc5374576.jpg');
    background-size: cover;
    aspect-ratio: 1/1.15;
    height:13.7vw;
}

#bagu:hover,
#bagu:focus{
  width: 17.5vw;
  top:4.5vw;
  left:6.5vw;
}

#bgif {
    position:absolute;
    top:14vw;
    left:4vw;
    width:7vw;
}

#discoball {
    position:absolute;
    width:14vw;
    left:8vw;
    top:10vw;
}

#sparkle {
    position:absolute;
    top:20vw;
    left:7vw;
    width:15vw;
}

#b {
    position:absolute;
    top:3vw;
    left:33vw;
    width:5vw;
}

#a {
    position:absolute;
    top:2.5vw;
    left:36.5vw;
    width:7vw;
}

#g {
    position:absolute;
    top:3vw;
    left:41.5vw;
    width:5vw;
}

#t {
    position:absolute;
    top:3.5vw;
    left:47vw;
    width:4vw;
}

#h {
    position:absolute;
    top:3.6vw;
    left:50.5vw;
    width:4vw;
}

#urt {
    position:absolute;
    top:2vw;
    left:61vw;
    width:6vw;
}

#miniurt {
    position:absolute;
    top:6vw;
    left:30vw;
    width:3vw;
}

#uurt {
    position:absolute;
    top:2vw;
    left:26vw;
    width:5vw;
}

#intro {
    position:absolute;
    top:12vw;
    left:34.2vw;
    height:10.7vw; 
    overflow-y: scroll;
    width:27.4vw;
    background-image: url('backgrounds/67d19a469894797b847ec7718781d3cf.jpg');
}

#lamp {
    position:absolute;
    top:-6vw;
    width:15vw;
    right:61vw;
    image-rendering:crisp-edges;
    image-rendering: pixelated;
}

#mar1 {
    position:absolute;
    top:10vw;
    left:34.5vw;
    width:26.4vw;
    
}

#abt {
    position:absolute;
    top:-1vw;
    right:10vw;
    width:20vw;
}



#passport {
    position: absolute;
    top:11vw;
    right:8.5vw;
    width:11vw;
    height:14vw;
    rotate: 9deg;
}

#passport:hover,
#passport:focus {
    rotate:15deg;
    filter:brightness(1.5)
}

.letter:hover,
.letter:focus {
    rotate:17deg;
    filter:brightness(1.5)
}


#abt:hover,
#abt:focus {
    rotate:5deg;
    filter:brightness(1.5)
}

#abtdiv {
    position: absolute;
    top:8.2vw;
    right:7.8vw;
    width:21.7vw;
    height:14.7vw;
    background-image: url('backgrounds/5c1a4c8bc5a16e720fdaf7cc85a6cc2e.png');
    filter:brightness(0.6)
}

#face {
    position:absolute;
    top:10vw;
    right:16vw;
    width:8vw;
    rotate:355deg;
}

#face1 {
    position:absolute;
    top:12vw;
    right:14vw;
    width:20vw;
    
}

#face:hover,
#face:focus {
    rotate:0deg;
    filter:brightness(1.5)
}

#face1:hover,
#face1:focus {
    rotate:5deg;
    filter:brightness(1.5)
}

#sparkl {
    position:absolute;
    width:4vw;
    top:10vw;
    right:26vw;
}

#sparkl1 {
    position:absolute;
    width:2vw;
    top:9vw;
    right:9vw;
}

#blogdiv {
    position: absolute;
    top:26.6vw;
    right:8.2vw;
    width:21vw;
    height:10.8vw;
    background-image:url('backgrounds/f4b43b61b459edb5670f6ee67467b610\ \(1\).png');
    background-size: cover;
    filter:brightness(0.6)
}

#blogtitle {
    position: absolute;
    animation-name: Animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    top:31vw; 
    right:17vw;
    width:12.5vw;
}

#blogtitle:hover,
#blogtitle:focus {
    rotate:5deg;
    filter:brightness(1.5)
}

#diary {
    width:16vw;
    position:absolute;
    top:30vw;
    right:2vw;
}

#diary:hover,
#diary:focus {
    rotate:5deg;
    filter:brightness(1.5)
}

#blablabla {
    position:absolute;
    top:27.5vw;
    right:9.2vw;
    width:10vw;
    overflow-x: hidden;
    height:9.5vw;
}

#blablabla:hover,
#blablabla:focus {
    rotate:5deg;
    filter:brightness(1.5)
}

#writer {
    position:absolute;
    width:17vw;
    right:11.7vw;
    top:28.5vw;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    opacity: 0.5;
}

#writer:hover,
#writer:focus {
    rotate:5deg;
    filter:brightness(1.5)
}

#blo {
    position:absolute;
    top:26vw;
    width:25vw;
    right:7vw;
}

#blo:hover,
#blor:focus {
    rotate:5deg;
    filter:brightness(1.5)
}

#artdiv {
    
    position: absolute;
    top:26.2vw;
    width:20.1vw;
    height:14.4vw;
    left:5.3vw;
    background-image: url(backgrounds/190a753fe32055b5b2604aa5d6f02570.png);
    background-size: cover;
    filter: brightness(0.6);
}

#arttxt {
    position:absolute;
    top:26.5vw;
    left:6vw;
    width:19vw;
    filter:brightness(3);
}

#arttxt:hover, 
#arttxt:focus {
    filter: brightness(4);
    rotate:5deg;
}

#txt {
    position: absolute;
    top:30vw;
    left:6vw;
}

#curtain {
    top:25.7vw;
    left:0.3vw;
    height:16vw;
    position:absolute;
    filter:brightness(1.5);
}

#like {
    top:38.5vw;
    position:absolute;
    width:10vw;
    left:14.7vw;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

#tv {
    position:absolute;
    top:30vw;
    height:10vw;
    left:13vw;
}

#idea {
    position: absolute;
    top:33vw;
    left:7.5vw;
    width:7vw;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

#thought {
    position:absolute;
    top:37.5vw;
    left:6vw;
    width:6.5vw;
}

.img:hover,
.img:focus {
    filter:brightness(2);
    rotate:5deg;
}

#gb {
    position:absolute;
    width:7vw;
    top:28vw;
    left:34vw;
}

#sign {
    position:absolute;
    top: 28vw;
    width:10vw;
    left:37vw;
}

#gb:hover,
#gb:focus {
    filter:brightness(2);
    rotate:5deg;
}

#sign:hover,
#sign:focus {
    filter:brightness(2);
    rotate:5deg;
}

#books {
    position:absolute;
    top:45vw;
    right:-2vw;
    width:12vw;
}

#kalientjee {
    position:absolute;
    width:30vw;
    top:-0.5vw;
    left:33.5vw;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    
}

#kalientjee2 {
    position:absolute;
    width:30vw;
    top:3vw;
    left:33.5vw;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    filter:brightness(0.6);
    
}

#kalientjee:hover,
#kalientjee:focus {
    filter:brightness(1.6);
}

#kalientjee2:hover,
#kalientjee2:focus {
    filter:brightness(1.4);
}

#blob {
    position:absolute;
    top:28.7vw;
    width:20vw;
    left:41vw;
}

.stamp {
    width:8vw;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    position:absolute;
}

#weird {
    rotate:5deg;
    top:21vw;
    left:55vw;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
  background-color:#E5B054;
  color:#E5B054;
}

#wtff {
   width: 10vw;
   position:absolute;
   top:58.5vw;
   right:39vw;
   height:2vw;
}

#musict {
    position: absolute;
    top:56.5vw;
    font-size: 0.8vw;
    left:46.5vw;
}