body{
background-color: #FFF9ED;
margin: 0px;
}
 
 
.raleway-<uniquifier> {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

#all{
width: 650px;
}
 
#side{
text-align: center;
  font-family: "Story Script", sans-serif;
width: 135px;
height: 100vh;
position: fixed;
left: 675px;
background-color: #fff;
padding: 10px;
border-width: 0px 2px 0px 4px;
border-style: solid;
border-color: #0060F0;
overflow: scroll;
overflow-x: hidden;
}

#sideicon{
border: 3px solid #0060F0;
}

 
.sideheader{
font-weight: normal;
margin: 5px 0px 0px 5px;
font-size: 12px;
font-weight:bold;
font-family: "Raleway", sans-serif;
color: #0060F0;
}
 
#aboutheader{
margin: 0px 0px -5px 0px;
  font-family: "Story Script", sans-serif;
  font-size: 32px;
  color: #FF3939;
}
 
#about{
text-align: center;
margin: 10px 0px 10px 0px;
letter-spacing: 1px;
 font-family: "Raleway", sans-serif;
 font-size: 9pt;
}
 
.divider{
border-bottom: 1px dashed #0060F0;
}
 
ul{
padding: 0px;
margin: 0px;
}
 
li{
list-style-type: none;
margin: 5px 0;
}
 
#main{
width: 475px;
height: 100vh;
position:fixed;
left: 170px;
background-color: #fff;
overflow: scroll;
overflow-x: hidden;
border-width: 0px 3px 0px 5px;
border-style: solid;
border-color: #0060F0;
}
 
#header{
background-color: #FF3939;
height: 85px;
border-bottom: 1px solid #FFF9ED;
}
 
#header h1{
margin: 0px;
font-weight: bold;
color: #fff;
font-size: 80px;
line-height: 110px;
text-transform: lowercase;
font-family: "Story Script", sans-serif;
}

 #header h2{
margin: 0px;
font-weight: bold;
color: #fff;
font-size: 50px;
text-transform: lowercase;
text-align: right;
font-family: "Story Script", sans-serif;
}
 
.subheader{
font-weight: normal;
font-size: 30px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 0px 10px;
font-family: 'Raleway,' sans-serif;
}
 
.postcontainer{
padding: 10px;
position: relative;
}
 
 
.centerbits{
padding: 0px 20px 10px 20px;
letter-spacing: 1px;
text-align: justify;
margin-top: 10px;
 font-family: "Raleway", sans-serif;
font-size: 10pt;
}
 
.icon{
position: absolute;
}
 
.date{
position: absolute;
right: 10px;
}
 
a{
text-decoration: none;
color: #D74329;
 font-family: "Raleway", sans-serif;
font-size: 10pt;
}

b{
text-decoration: underline dotted #0060F0 2px;
color: #FF3939;
font-weight: bold;
 font-family: "Raleway", sans-serif;

}
 
a:visited{
color: #0060F0;
}
 
a:hover{
font-weight: bold;
}
 
a:active{
font-weight: bold;
}
 
::-webkit-scrollbar{
width: 3px; 
}
 
::-webkit-scrollbar-track{
background-color: transparent;
}
 
::-webkit-scrollbar-thumb{
background-color: #0060F0;
}


img{
  border-radius: 10px;
}

#jorologo{
position:fixed;
bottom: 10px;
right: 220px;
}
 
#bg{
position:fixed;
bottom: -5px;
right: -10px;
}

#bgleft{
position:fixed;
bottom: -5px;
left: -10px;
}

#palette{
position:fixed;
bottom: 0px;
left: 795px;
}

#player{
position:fixed;
bottom: 100px;
left: 995px;
transform: rotate(3deg);

}

#tv{
position:fixed;
bottom: -50px;
left: 890px;
}

#egg{
position:fixed;
bottom: -13px;
left: 90px;
transform: rotate(352deg);
}

#flag{
position:fixed;
bottom: 260px;
left: 1260px;
transform: rotate(14deg);
}

#keychain{
position:fixed;
top: -75px;
left: 724px;
transform: rotate(352deg);
}

#potato{
position:fixed;
bottom: 415px;
left: 1010px;
}

#ichigo{
position:fixed;
top: -88px;
left: 553px;
transform: rotate(10deg);
}

#burd{
position:fixed;
bottom: 255px;
left: 997px;
}

#lion{
position:fixed;
bottom: 535px;
left: 1225px;
}

#panda{
position:fixed;
top: 135px;
left: 910px;
}

#fatburd{
position:fixed;
bottom: -10px;
left: 1235px;
}


#bubble{
position:fixed;
bottom: 325px;
left: 880px;
}



h1{
margin: 0px;
color: #0060F0;
font-size: 50px;
text-transform: lowercase;
text-align:right;
font-family: "Story Script", sans-serif;
}

h3{
margin: 0px;
color: #0060F0;
font-size: 30px;
text-transform: lowercase;
text-align:center;
font-family: "Story Script", sans-serif;
}

img.burd:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.75s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(0px, 1px) ); }
  10% { transform: translate(0px, -2px) ); }
  20% { transform: translate(0px, 0px)); }
  30% { transform: translate(0px, 2px) }
  40% { transform: translate(0px, -1px)}
  50% { transform: translate(0px, 2px)  }
  60% { transform: translate(0px, 1px) }
  70% { transform: translate(0px, 0px) }
  80% { transform: translate(0px, -1px) }
  90% { transform: translate(0px, 2px) }
  100% { transform: translate(0px, -2px) }
}


.profile {
    background-color: white;
     text-indent: 6px;
    border: 2px dashed #0060F0;
    display: block;
    width: 400px;
        font-size: 9pt;

}
.profile li {
    list-style-type: none;
}

.profile ul {
    margin: 0 0 3px 0;
    padding: 3px;
    text-indent: 6px;
}
.profile li:nth-child(even) {
    background-color: #DBE9FF;
        }