/* CURSOR */
/* Start https://www.cursors-4u.com */ * {cursor: url(https://ikaroll.neocities.org/assets/cursors/curbrown.cur), auto !important;} /* End https://www.cursors-4u.com */
 
body{
background-color: #ffffff;
background-image: url(https://ikaroll.neocities.org/assets/backgrounds/bg_town.jpg);
background-repeat: no-repeat;
filter: saturate(77%);
font-family: 'jojoba', sans-serif;
}

@font-face {
  font-family:Jojoba;
  src: url(https://ikaroll.neocities.org/assets/fonts/Jojoba.otf);
}
 
#container{
display: flex;
justify-content: center;
align-items: center;
width: 800px;
margin: 0 auto;
border: 2px solid #dbc1ac;
padding: 12px;
background-image: url(https://ikaroll.neocities.org/assets/backgrounds/page_background_animated_04.gif);
}
 
#box{
width: 1000px;
background-color: #F5F3F1;
color: #000;
border: 1px solid #dbc1ac;
}
 
#header{
margin-bottom: 10px;
padding: 10px;
border-bottom: 1px solid #dbc1ac;
background-image: url(https://ikaroll.neocities.org/assets/backgrounds/coffee_break_tile.png);
filter: saturate(30%);
color: #fff;
letter-spacing: 3px;
text-align: center;
}
 
#header h1{
margin: 0px;
}

.subheader{
background-image: url(https://ikaroll.neocities.org/assets/backgrounds/coffee_break_tile.png);
border-bottom: 1px solid #dbc1ac;
padding: 3px;
color: #fff;
letter-spacing: 3px;
text-align: right;
}
 
.subheader h3{
margin: 0px;
}

/* LINKS */
a{
text-decoration: none;
color: #dbc1ac;
}
 
a:visited{
color: #967259;
}
 
a:hover{
text-shadow: 0px 0px 2px #726455;
}

#side{
float: left;
width: 270px;
padding: 0px 0px 5px 10px;
overflow: hidden;
}

#side2{
float: right;
width: 240px;
padding: 2px 5px 5px 10px;
overflow: hidden;
}
 
.sidebox{
border: 1px solid #dbc1ac;
margin: 0px 0px 5px 0px;
}

.sidebox2{
border: 1px solid #dbc1ac;
margin: 0px 0px 5px 0px;
}
 
.sidecontent{
display: flex;
padding: 0px 0px 0px 5px;
color: #6e5057;
font-size: 17px;
letter-spacing: 1px;
}
 
.sidecontent ul, li{
margin: 0px;
list-style-type: none;
padding-left: 0px;
}

#main{
float:clear:center;
width:533px;
overflow: hidden;
padding: 0px 0px 5px 10px;
}

#main2{
float:right;
width:504px;
overflow: hidden;
padding: 0px 2px 5px 10px;
}
 
.mainbox{
border: 1px solid #dbc1ac;
padding: 0px;
margin: 0px 0px 5px 0px;
}
 
.mainboxcontent{
display: flex;
padding: 0px 15px 0px 15px;
color: #6e5057;
font-size: 17px;
}
 
#scrollcontainer{
padding: 5px;
}
 
#scrolly{
display: flex;
overflow: scroll;
overflow-x: hidden;
width:260px;
height:190px;
margin: 0 auto;
text-align: center;
}

#scrolly4{
display: flex;
overflow: scroll;
overflow-x: hidden;
width:350px;
height:220px;
margin: 0 auto;
text-align: center;
justify-content: right;
align-items: right;
}
 
#scrollyheader{
margin: 0px;
border-bottom: 1px dotted #ff668a;
}
 
#footer{
clear: both;
padding: 3px;
border-top: 1px solid #dbc1ac;
background-image: url(https://ikaroll.neocities.org/assets/backgrounds/coffee_break_tile.png);
filter: saturate(30%);
a { color: #FFffff; }
color: #fff;
font-size: 14px;
text-align: center;
}
 
#footer p{
margin: 0px;
}

/* STATUSCAFE */
#statuscafe {
    padding: .5em;
    background-color: #F5F3F1;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

/* TEXT TILT */
ul {
  
  list-style-type:none; /* this removes the bulletpoints */
  /* there is an annoying left padding in the ul element by default */
  padding-left:0; /* this removes it */
}

li a {
  display:inline-block; /* this allows us to add margin to each item 
                           so there's space for it to rotate */
  margin:0px;
}

/* this makes stuff happen when you hover! */
li a:hover {
  transform:rotate(-15deg); /* play with this 15deg value, works w/ negatives too! */
  /* more CSS transform options: https://developer.mozilla.org/en-US/docs/Web/CSS/transform */
}
 
#footer p{
margin: 0px;
}

/* CUSTOM SCROLLBAR/SELECT */
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #dbc1ac #ffffff;
  }
 
::-webkit-scrollbar{
width: 8px; 
}
 
::-webkit-scrollbar-track{
background-color: #fff7fb;
}
 
::-webkit-scrollbar-thumb{
background-color: #dbc1ac;  
}

::-moz-selection { /* Code for Firefox */
  color: #726455;
  background-color: #dbc1ac;
}

::selection {
  color: #726455;
  background-color: #dbc1ac;
}