body {
  font-family: "pixel operator", sans-serif;
  background-image: url('/media/bg/bunbunbg.png');
  background-color: #fff;
  background-repeat: repeat;
  background-attachment:fixed;
  color: black;
  overflow-x:hidden;
  cursor:crosshair;
  text-align:center;
  font-size:20px;
  line-height:22px;
  scrollbar-color: #cba1ff transparent;
}

* {
box-sizing: border-box;
}



#container {
max-width: 1080px;
margin: 0 auto;
}

h1 {
color: black;
margin:0;
font-size:26px;
padding-top:10px;
font-family: "pixel-love", sans-serif;
}

h2 {
color: black;
font-size:22px;
padding-top:10px;
margin:auto;
font-family: "pixel-love", sans-serif;
}

h3 {
color: black;
text-align:left;
font-size:20px;
padding-top:10px;
margin:auto;
font-family: "pixel-love", sans-serif;
}

a {
font-weight: bold;
color: black;
text-shadow: 1px 1px 5px #ff94f8, -1px -1px 5px #ff94f8;
transition-duration: 0.3s;
}

a:hover {
color: black;
font-weight:bold;
text-shadow: 1px 1px 5px #05B8CC, -1px -1px 5px #05B8CC;
}

b {
  text-shadow: 1px 1px 3px #d093ff, -1px -1px 3px #d093ff;
  text-decoration:dotted underline 1px black;
}

i {
  color: black;
  text-shadow: -.5px -.5px 1px #61556c, -.5px -.5px 1px #61556c;
}



#navbar {
height: 40px;
background-color: transparent;
width: 100%;
margin-top:30px;
margin-bottom:10px;
}

#flex {
display: flex;
}

#leftSidebar{
border-radius: 25px 0px 0px 25px;
border: 2px solid black;
overflow: hidden;
padding:10px;
background-color: #e3f4ff;
width: 250px;
}
            
#rightSidebar{
border-radius: 0px 25px 25px 0px;
border: 2px solid black;
overflow: hidden;
padding:10px;
background-color: #e3f4ff;
width: 250px;
}

main {
background-color: #ffe8ff;
border: 2px solid black;
flex: 1;
padding: 10px;
order: 2;
}

#leftSidebar {
order: 1;
}

#rightSidebar {
order: 3;
}

footer {
background-color: transparent;
width: 100%;
height: 40px;
padding: 10px;
text-align: center;
}


.header {
font-family:"pixel-love", sans-serif;
font-size: 40px;
letter-spacing:2px;
margin-top:10px;
padding:20px;
color:black;
}


.box {
background-color: transparent;
border: 1px dashed black;
text-align:left;
padding: 10px;
width:auto;
height:270px; 
overflow:scroll;
overflow-x:hidden;
word-wrap: break-word;
margin-bottom:10px;
scrollbar-width: thin;
}

.sidebox1 {
width:auto;
height:160px;
background-color: transparent;
border: 1px dashed black;
padding: 7px;
text-align:right;
margin-bottom:10px;
overflow:scroll;
overflow-x:hidden;
word-wrap: break-word;
scrollbar-width: thin;
}

.sidebox2 {
width:auto;
height:160px;
background-color: transparent;
border: 1px dashed black;
padding: 7px;
text-align:right; 
margin-bottom:10px;
overflow:scroll;
overflow-x:hidden;         
word-wrap: break-word;
scrollbar-width: thin;
}

.sidebox3 {
width:auto;
height:80px;
background-color: transparent;
border: 1px dashed black;
padding: 7px;
margin-bottom:10px;
text-align:left; 
overflow:scroll;
overflow-x:hidden;         
word-wrap: break-word;
scrollbar-width: thin;
}

.sidebox4 {
width:auto;
height:140px;
background-color: transparent;
border: 1px dashed black;
padding: 7px;
text-align:left; 
margin-bottom:10px;
overflow:scroll;
overflow-x:hidden;
word-wrap: break-word;
scrollbar-width: thin;
}

.sidebox5 {
width:auto;
height:180px;
background-color: transparent;
border: 1px dashed black;
padding: 7px;
text-align:left; 
margin-bottom:10px;
overflow:scroll;
overflow-x:hidden;         
word-wrap: break-word;
scrollbar-width: thin;
}

.sidebox6 {
width:auto;
height:150px;
background-color: transparent;
border: 1px dashed black;
padding: 7px;
margin-bottom:10px;
text-align:left;
overflow:scroll;
overflow-x:hidden;         
word-wrap: break-word;
scrollbar-width: thin;
}

.longbox1 {
height:120px;
width:560px;
background-color: transparent;
border: 1px dashed black;
padding: 7px;
text-align:center;
margin:auto;
margin-bottom:10px;
display:block;
overflow:scroll;
overflow-x:hidden;
word-wrap: break-word;
scrollbar-width: thin;
}

.longbox2 {
height:45px;
width:560px;
background-color: transparent;
border: 1px dashed black;
padding: 7px;
margin:auto;
display:block;
overflow:hidden;
word-wrap: break-word;
scrollbar-width: thin;
}

#statuscafe {
    padding: 10px;
    background-color: #ffe8ff;
    border: 1px solid transparent;
    border-radius:5px;
}
#statuscafe-username {
    margin-bottom: 10px;
    text-align:right;
}
#statuscafe-content {
    text-align:left;
}

.button {
background-color: #cfecff;
border: outset;
border-width:3px;
border-color:lightgrey;
display:inline-block;
margin-bottom:10px;
padding:3px;
}

.button:hover {
color:#000;
font-weight:bold;
text-decoration:overline;
}

.button:active {
border-width:3px;
border-color:lightgrey;
border:inset;
}

@media only screen and (max-width: 800px) {
#flex {
flex-wrap: wrap;
flex-direction: column;
font-size:20px;}

aside {
width: 100%;
}

main {
order: 1;
}

#leftSidebar {
order: 2;
}

#rightSidebar {
order: 3;
}
}