body {
    background-color: black; 
    margin: auto;
    overflow-x: hidden;
    font-family: Verdana;
  }

@media only screen and (max-width: 960px) {
body {
    width: 960px;  
    margin: auto;
    }
}

/* FORTUNE STATUS */

.fortune {
  width:960px;
  height:auto; 
  position: absolute;
  top:220px;
  left:530px;
  z-index:3;
  margin: 0;
  rotate:13deg;
  }
  
  .fortune img {
  width:320px;
  height:auto; 
  margin:0;
  }
  
  .status {
  width:960px;
  height:auto; 
  position: absolute;
  top:215px;
  left:530px;
  z-index:5;
  margin: 0;
  rotate:6deg;
  }

/* CBOX */

      .phone {
  width:960px;
  height:auto;
  position: absolute;
  top:0px;
  left:35px; 
  rotate:2deg;
  z-index:2;
  }
  
  .phone > img {
  width:24%;
  height:auto;
  }
  
    .phone2 {
  width:960px;
  height:auto;  
  position: absolute;
  top:175px;
  left:80px;  
  rotate:2deg;
  z-index:6;
  
  }

 /* FRIENDSHIP ZONE */

.palnote {
  position: absolute;
  top:420px;
  left:-320px;
  width:960px;
  height:auto;  
  rotate:-2deg;
  z-index:2;
  }

 .palnote img {
  width:200px;
  height:auto; 
  margin: auto;
  display: block;
    }
    
   .friendlist {
  position: absolute;
  width:960px;
  top:390px;
  left:105px;
  height:auto;   
  margin-left: auto;
  margin-right: auto;
  z-index:3;
  rotate:-8deg;
  }
  
    .friendlist img {
  width:88px;
  height:auto;
  margin-top: 4px;
  display: block;
    }

 /* INFORMATION */
 
  .about {
  position: absolute;
  top:572px;
  left:270px;
  width:960px;
  height:auto;  
  rotate:-5deg;
  z-index:4;
  }

 .about img {
  width:200px;
  height:auto; 
  margin: auto;
  display: block;
    }
    
   .blinkies {
  position: absolute;
  width:960px;
  top:612px;
  left:711px;
  height:auto;   
  margin-left: auto;
  margin-right: auto;
  z-index:5;
  rotate:-2deg;
  }
  
    .blinkies img {
  width:100px;
  height:auto;
  margin-top: 4px;
  display: block;
    }
    
 /* BG RELATED THINGS */
 
  .bg {
  width:960px;
  height:auto; 
  position: absolute;
  top:20px;
  z-index:4;
  margin: 0;
  }
  
  .bg img {
  width:300px;
  height:auto; 
  margin: 5px auto;
  display: block;
    }
    
   .bg2 {
  width:960px;
  height:auto; 
  position: absolute;
  top:160px;
  z-index:0;
  margin: 0;
  filter:  blur(1px) brightness(80%);
  }
  
  .bg2 img {
  width:700px;
  height:auto; 
  margin: 5px auto;
  display: block;
  }
  
  /* ZEE BIG EVENT */
  
  
  .book {
  width:100%;
  height:auto; 
  position: absolute;
  top:300px;
  left:250px;
  z-index:4;
  transition: transform .2s; /* Animation */
  margin: 0;
  rotate:-5deg;
  }
  
  .book img {
  width:350px;
  height:auto; 
  margin:auto;
  }
  
   .book:hover {
  transform: rotate(3deg); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }
  
  /* PROPS */
  
  .lollipop {
  width:960px;
  height:auto; 
  position: absolute;
  top:480px;
  left:-160px;
  z-index:2;
  margin: 0;
  rotate:100deg;
  }
  
  .lollipop img {
  width:120px;
  height:auto; 
  margin:0;
  }
  
 .ilovebuds {
  width:960px;
  height:auto; 
  position: absolute;
  top:295px;
  left:65px;
  z-index:3;
  margin: 0;
  rotate:-4deg;
  }
  
  .ilovebuds img {
  width:140px;
  height:auto; 
  margin:0;
  }
  
 .cd {
  width:960px;
  height:auto; 
  position: absolute;
  top:840px;
  z-index:4;
  transition: transform .2s; /* Animation */
  margin: 0 auto;
  }
  
  .cd:hover {
  transform: rotate(2deg); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }
  
  .cd img {
  width:250px;
  height:auto; 
  margin: 1px auto;
  display: block;
  }
  
  .polaroid {
  width:100%;
  height:auto; 
  position: absolute;
  top:360px;
  left:650px;
  z-index:5;
  transition: transform .2s; /* Animation */
  margin: 0;
  rotate:4deg;
  }
  
  .polaroid img {
  width:150px;
  height:auto; 
  margin:0;
  }
  
   .polaroid:hover {
  transform: rotate(3deg); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }
  
  
  /* NOTE + BLOG */
  

aside {
    flex:180px;
    max-width: 170px;
}

aside, .aside-left {
    display: flex;
    align-items: center;
    align-content: center;
    text-align: justify;
    position:absolute;
    z-index:4;
    left:55px;
    top:670px;
}

aside {
    flex-flow: column nowrap;
    border: solid 2px;
    border-color: transparent;
    border-radius: 5px;
    padding: 15px;
    max-height: 140px;
}

.updates {
    border: solid 2px;
    border-color: transparent;
    border-radius: 3px;
    overflow-y: scroll;
    padding: 2px 8px;
    max-height: 30%;
    font-size: 15px;
    transform: rotate(3deg);
}

.updates h1 {
    display: inline;
    font-family: "Azeret Italic", monospace;
    font-size: 1.4em;
    color: white;
    text-align: right;
    padding-right: none;
}

.updates h3 {
    display: inline;
    font-family: "Azeret Italic", monospace;
    font-size: 1.1em;
    color: yellow;
    text-align: left;
    padding-right: 3px;
}

.postitnot {
  position:absolute;
  width:960px;
  height:auto;
  top:650px;
  left:-40px;
  z-index:1;
  transform: rotate(3deg);
}

.postitnot > img {
  width:41%;
  height:auto;
  }