/* sup */



  @import url('https://fonts.googleapis.com/css2?family=Short+Stack&display=swap');

body{
/* background-color: #D6D0C8; */
/* background-image: url(https://i.imgur.com/Wg5ki1C.png);*/
background-image: url(https://i.imgur.com/fU4OLHH.png);
margin-top: 6%;
  overflow:auto;
  padding-bottom:50px;
}

#header{
background-image: url('https://i.imgur.com/M7SZPDP.png');
background-size:cover;
font-family: 'vtks giz';
border-radius: 0px 0px 7px 7px;
width: 590px;
height: 90px;
 margin-left: auto;
 margin-right: auto;
margin-top:40px;
 margin-bottom:auto;
 padding-top:0px;
justify-content:space-evenly;
  display:flex;
/* box-shadow: 5px 5px 10px #302A27; */
}

#header h1{
font-weight: normal;
font-size: 38px;
color:white;
text-shadow: 3px 3px #302A27;
}

#pencil{
background-image: url('https://i.imgur.com/LtAldgW.png');
background-size: cover;
position: absolute;
/* top: 190px; */
top:27%;
/* left: 250px; */
left:17.3%;
/* width: 360px; */
 width: 26%;
/* height:280px; */
height:34.8%;
z-index:4;
transform: rotate(35deg);
  display:flex;
  order:6;
}

#img{
background-image: url('https://cdn.discordapp.com/attachments/1141957817914380349/1178454682553831454/dc00709c.png?ex=65763472&is=6563bf72&hm=012c4558149f5d9c53b51620cd9913395525614259ca1ce7f4d1790c8d41151a&');
position: absolute;
top: 100px;
right: 270px;
width: 100px;
height: 100px;
}

#callout{
background-image: url('https://i.imgur.com/v3PmVyP.png');
background-size: cover;
position: absolute;
top: 420px;
left: 270px;
width: 250px;
height:225px;
}

.callouttext {
  margin-left:337px;
  margin-top:-245px;
/* left: 320px; */
 transform: rotate(-10deg);
font-size: 26px;
text-align:center;
color:black;
width: 130px;
font-family: 'architext';
line-height: 9.5px;
}

#maincontainer{
width: 570px;
height: 490px;
background-image:url('https://cho.mayulog.net/wp-content/uploads/nt08.png');
background-size:cover;
background-repeat: no-repeat;
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
padding-top:45px;
margin-bottom: 10px;
margin-top:0px;
overflow:auto;
 z-index:4;
 display:flex;
 order:2;
}

 .postcontainer{
/* background-color:blue; */
width:460px;
height:450px;
position: relative;
top: 25px;
left:55px;
color: #302A27;
overflow:scroll;
}


.post{
background-image: url(https://i.imgur.com/uDtvDSY.png);
/* background-color: #faf7f5; */
width: 430px;
box-shadow: 3px 3px 3px #bebebe;
margin-top: 25px;
margin-left: 10px;
margin-bottom: 20px;
}

  .myButton {
                    display:flex;
                    margin:0 auto;
                    width:150px;
                }

.subheaders{
text-align: left;
padding: 5px 5px 0px 0px;
margin: 0px;
font-weight: normal;
font-family: 'Special Elite', serif;
font-size: 20px;
}

.date{
text-align: right;
padding: 0px 5px 0px 0px;
margin: 0px;
font-weight: normal;
font-family: 'Special Elite', serif;
font-size: 14px;
text-decoration: underline;
text-decoration-style: dashed;
}

.posttext{
padding: 15px;
text-align: justify;
letter-spacing: 1px;
}

.tabletext{
padding: 3px;
text-align: left;
letter-spacing: .8px;
line-height:1.2;
font-size:14px;
}


.center {
  display: block;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

 .center2 {
  display: block;
  margin-top: 4px;
  margin-bottom: 8px;
  margin-left: auto;
  margin-right: auto;
}

#microblogcontainer1{
background-image: url('https://i.imgur.com/1uwUstX.png');
background-size: cover;
position: absolute;
top: 340px;
left: 155px;
width: 300px;
height:250px;
transform: rotate(-5deg);
overflow:auto;
  display:flex;
  order:4;
 }

.microblogcontainer2{
/* background-color:blue; */
top: 30px;
left: 15px;
width:250px;
height:190px;
position: relative;
color: #302A27;
overflow:scroll;
}

.microblog{
top: 10px;
left:10px;
width:210px;
margin:20px;
color: #302A27;
  padding:5px;
border:dashed 1px;
 line-height:1em;
letter-spacing:.7px;
}

.microblog .microblogdate{
 visibility: hidden;
  width: 60px;
  font-size:11px;
  font-family: 'Short Stack';
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0px;
  position: absolute;
  z-index: 1;
}

.microblog:hover .microblogdate{
visibility: visible;
}


#cboxholder{
background-image: url('https://i.imgur.com/vMl2xoN.png');
background-size: cover;
position: absolute;
top: 440px;
right: 50px;
width: 900px;
height:1000px;
overflow:auto;
 }
 

::-webkit-scrollbar{
width: 6px; 
}
    
::-webkit-scrollbar-track{
background-color: #302a27;
}

::-webkit-scrollbar-thumb{
background-color: #615955;
}

#credit{
font-size: 13px;
font-family: 'Short Stack';
position: fixed;
bottom: 0;
right: 0;
color:white;
}


#nav{
position: absolute;
top: 140px;
right: 268px;
width: 215px;
height:215px;
background-image: url('https://i.imgur.com/Rx4525J.png');
background-size:cover;
transform: rotate(3deg);
/* background-color: #4E4B44; */
/* border-radius: 0px 7px 7px 0px; */
text-align: center;
font-family: 'Special Elite', serif;
    display:flex;
  order:2;
}

.teddybear{
position: absolute;
top: 240px;
left: 303px;
width: 130px;
height:150px;
background-image: url('https://i.imgur.com/dOnHiAG.png');
background-size:cover;
}

.ad-space1{
position:absolute;
width: 120px;
height: 142px;
background-image: url('https://i.imgur.com/jupbmhn.png');
background-color: #4E4B44;
margin: 0 auto;
padding: 10px;
right:314px;
top:435px;
font-size: 13px; font-family: 'Special Elite', serif; 
color: #d9d3c5; letter-spacing: .6px; text-align: center;
border-radius: 0px 7px 7px 0px;
box-shadow: 3px 3px 3px #373737;
}

 .orange{
background-image: url('https://i.imgur.com/NvnKCDm.png');
background-size: cover;
position: absolute;
top: 430px;
right: 330px;
width: 150px;
height:150px;
z-index:-2;
transform: rotate(20deg);
filter:saturate(80%);
 }

.music-space{
position:absolute;
width: 125px;
height: 30px;
background-image: url('https://i.imgur.com/jupbmhn.png');
background-color: #4E4B44;
margin: 0 auto;
margin-top: -253px;
padding: 10px;
right:309px;
top:615px;
border-radius: 0px 7px 7px 0px;
text-align: center;
font-family: 'Special Elite', serif;
box-shadow: 3px 3px 3px #373737;
  z-index:12;
}


   .tag1{
position:absolute;
width: 240px;
height: 240px;
background-image: url('https://i.imgur.com/4eCRsg3.png');
  background-size:cover;
right:295px;
top:435px;
 transform: rotate(8deg);
  z-index:-13;
 filter:saturate(90%);
}

 .illustration1{
   position:absolute;
width: 150px;
height: 220px;
background-image: url('https://i.imgur.com/1xvGPPN.png');
  background-size:cover;
left:320px;
top:390px;
z-index:-14;
}


#cafe{
position: absolute;
top: 215px;
left: 350px;
width: 200px;
height:30px;
background-image: url('https://i.imgur.com/2yzMHEz.png');
/* background-color: #4E4B44; */
/* border-radius: 0px 7px 7px 0px; */
text-align: center;
font-family: 'Special Elite', serif;
padding-top:9px;
transform: rotate(-4deg);
/* box-shadow: 2px 3px #302A27; */
}

#bow{
position: absolute;
top: 230px;
left: 350px;
width: 120px;
height:120px;
background-image: url('https://i.imgur.com/KjR8eqp.png');
background-size:cover;
}

#ticket{
position: absolute;
top: 220px;
left: 400px;
width: 90px;
height:130px;
background-image: url('https://i.imgur.com/PQiQq6O.png');
background-size:cover;
  transform: rotate(-10deg);
  z-index: -1;
}

 #stackedsheep{
   position:absolute;
width: 140px;
height: 300px;
background-image: url('https://i.imgur.com/SUipFS1.png');
  background-size:cover;
left:335px;
top:320px;
z-index: -1;
}

#buttons{
position: absolute;
top: 150px;
left: 330px;
width: 200px;
height:240px;
background-image: url('https://i.imgur.com/51sPEvr.png');
background-size:cover;
  z-index: -3;
}


    #floatinggirl{
position: absolute;
top: 455px;
right: 250px;
width: 175px;
height:187px;
background-image: url('https://i.imgur.com/1cupIqt.gif');
background-size:cover;
    z-index: 5;
}

    #jyn4ezra{
position: absolute;
top: 265px;
left: 250px;
width: 245px;
height:400px;
background-image: url('https://i.imgur.com/eRAWHNn.png');
background-size:cover;
    z-index: -5;
}

ul{
  margin-top: 134px;
  margin-left:70px;
/* padding: 0px;
margin: 0px; */
}

li{
list-style-type: none;
/* margin: 7px 0; */
/* text-shadow: 2px 2px #302A27; */
font-size:12.5px;
line-height: 17px;
letter-spacing: 1.7px;
}

a{
color: #302A27;
text-decoration: none;
}

a:hover{
color: #302A27;
font-style: italic;
}

a:active{
color: #d9d3c5;
font-style: italic;
font-weight: bold;
}

a.two{
font-family: 'Short Stack';
font-size:14px;
letter-spacing: -1px;
color: #35474b;
}


a.two:visited{
font-size:14px;
letter-spacing: -1px;
font-family: 'Short Stack';
color: #35474b;
}

a.two:hover{
font-size:14px;
letter-spacing: -1px;
font-family: 'Short Stack';
color: #35474b;
}


a.two:active{
font-family: 'Short Stack';
font-size:14px;
letter-spacing: -1px;
color: #35474b;
}

a.three{
font-size:14px;
letter-spacing: -1px;
font-family: 'Short Stack';
color: #51a7c6;
}


a.three:visited{
font-size:14px;
letter-spacing: -1px;
font-family: 'Short Stack';
color: #51a7c6;
}

a.three:hover{
font-size:14px;
letter-spacing: -1px;
font-family: 'Short Stack';
color: #51a7c6;
}


a.three:active{
font-family: 'Short Stack';
font-size:14px;
letter-spacing: -1px;
color: #51a7c6;
}

/* order */


#header{
    order:1;
}