:root {
                --body-bg-image: url('cloudddds.png');
                --image1:url("skullmelody.png");
                --image2:url("spiderkuma.png");
                --image3:url("angelicparrotMOVE.gif");
                --art:url("ads.png");
                --w3lcom3:url("w3lcom3.gif");
                /* colors */
                --content: #f6638f;

}
  body {
  margin: 0;
  background-color: #FFEAF1;
  background-size: 100%;
  background-attachment: fixed;
  background-image: var(--body-bg-image);
  margin-left: auto;
  margin-right: auto;
  
}

.container {
  display: block;
  width: 1450px;
  height: 1016px; 
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: 5px;
  border-radius: 0 0 5px 5px;
  background-attachment: scroll;
  background-size: auto;
  background-image: url("containerr.png");
  background-origin: padding-box;
  background-clip: border-box;
  justify-content: center;
  z-index: 1;
}

.scrollable-box {
  margin-top: -39px;
  margin-right:-20px;
  position: relative;
  width: 465px;
  height: 250px;
  overflow: scroll;
  overflow-x: hidden;
  white-space: pre-wrap;
  z-index: 2;
}

#navigation {
  margin-top: -315px;
  margin-left: 900px;
  position: relative;
  width: 200px;
  height: 250px;
  overflow: hidden;
  line-height: 1;
  z-index: 3;
}

#site-stats {
  margin-top: -359px;
  margin-left: -877px;
  position: relative;
  width: 217px;
  height: 141px;
  overflow: hidden;
  line-height: .6;
  z-index: 4;
}

#journal {
  margin-top: 38px;
  margin-left: -876px;
  position: relative;
  width: 207px;
  height: 145px;
  overflow: scroll;
  overflow-x: hidden;
  line-height: 1;
  z-index: 5;
}

.image1 {
    content:var(--image1);
    margin-top: 10px;
    margin-left: -880px;
    position: relative;
    height: 240px;
    width: 261px;
    z-index: 6;
}

.image2 {
    content:var(--image2);
    margin-top: -190px;
    margin-left: 915px;
    position: relative;
    height: 246px;
    width: 183px;
    z-index: 7;
}

.image3 {
    content:var(--image3);
    margin-top: -540px;
    margin-left: -1260px;
    position: relative;
    height: 200px;
    width: 260px;
    z-index: 8;
}

.w3lcom3 {
    content:var(--w3lcom3.gif);
    margin-top: -400px;
    margin-left: -87px;
    position: relative;
    height: 240px;
    width: 249px;
    z-index: 9;
}

.t00t {
  content:var(--toot.gif);
    margin-top: 111px;
    margin-left: 25px;
  position: absolute;
}

.lonely {
  overflow: hidden;
  margin-top: 515px;
  margin-left: 10px;
  position: relative;
  width: 460px;
  height: 80px;
	font-family: Lovely Script;
	color: #988cbc;
  padding: 1px;
}

.backbox {
  display: block;
  margin-left: 122px;
  margin-right: auto;
  margin-top: 210px;
  position: absolute;
  width: 1200px;
  height: 696px;
  background-image: url('bg4.jpg');
  justify-content: center;
  overflow-x: hidden;
  white-space: pre-wrap;
  z-index: -9;
}

.stamps {
  overflow: hidden;
  margin-top: 377px;
  margin-left: 10px;
  position: relative;
  width: 459px;
  height: 80px;
  padding: 1px;
  z-index: -2;
}

.blinkies {
  overflow: hidden;
  margin-top: -20px;
  margin-left: 10px;
  position: relative;
  width: 435px;
  height: 80px;
  padding: 1px;
  z-index: -3;
}

#cbox {
    left: 222px;
    bottom: -415px;
    width: 250px;
    z-index: 9999;
    background: #ffffff;
    background-image: url('gingham.gif');
    position: fixed;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    border: 5px solid #FFEAF1;
    box-shadow: 0px 0px 0px 1px #9791cd;
}

#cbox:hover {
    bottom: 0px;
}

#flex {
	display: flex;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border: 2px solid #B8A1C3;
  background: #988cbc;
  background-image: url('scroll.jpg');
  background-size: cover;
  border-radius: 10px
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-image: url('background.png');
  border: 2px solid #B8A1C3;
 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #F9D7DE;
  border: 2px solid #CA8295;
  
}

h1,
h2,
h3 {

}

h1 {
	font-size: 40px;
	font-family: romancea;
	color: #EB8DBB;
}

h2 {
  font-size: 20px;
	font-family: romancea;
	color: #988cbc;
}

#topBar {
	width: 100%;
	height: 30px;
	padding: 10px;
	font-size: smaller;
	background-color: #13092D;
}

.clearfix {
    clear:both;
}

.logo {
    width: 186px;
    height: 157px;
    content: url(hoi.png);
}

.floaties {
   width: 100px;
    height: 100px;
    content: url(eyeheartu.png);
}
.floaties2 {
   width: 100px;
    height: 100px;
    clear: right;
    content: url(loveeye.png);
}

.intro {
    height: 120px;
    vertical-align: middle;
    text-align: center; 
    clear: both;
    overflow: hidden;
}

.floatLeft { float: left; }

.floatRight { float: right; }

.text {
    font-size: 20px;
    position:relative;
    padding-left: 20px;
    padding-top: 20%;
    float: left;
  }

a:link {
  color: #988cbc;
  font-weight: bold;
  background-color: transparent;
  text-decoration: none;
  background: #FFFFFF;
  border-color: #988cbc;
  border: 1px;
}

a:hover {
  color: #ffcbda;
  background-color: transparent;
  text-decoration: underline;
  background: #FFFFFF;
  border-color: #988cbc;
  border: 1px;
}

a:visited {
  color: #988cbc;
  background-color: transparent;
  text-decoration: none;
  background: #FFFFFF;
  border-color: #988cbc;
  border: 1px;
}

a:active {
  color: #ffcbda;
  background-color: transparent;
  text-decoration: underline;
  background: #FFFFFF;
  border-color: #988cbc;
  border: 1px;
} 

            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

            @media only screen and (max-width:900px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }