@font-face {
    font-family: RPCP;
    src: url(/assets/fonts/retro-pixel-cute-prop.woff2);
}
@font-face {
    font-family: RPCH;
    src: url(/assets/fonts/retro-pixel-petty-5h.woff2);
}
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #9f7450; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #dea974; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #f3ceb4; 
}
* {
    margin: 0;
    font-family: RPCP;
    color: #493333
}
body {
    background-color: #998b8b;
}
header > h1 {
    font-family: RPCH;
    font-weight: 800;
}
header {
    text-align: center;
}
nav {
    text-align: center;
    margin: 15px;
}
nav > a {
    display: block;
    border-width: 12px;
    border-style: solid;
    border-image: url(/assets/png/button.png);
    border-image-slice: 6 fill;
    border-image-repeat: round;
    image-rendering: pixelated;
    color: #493333;
    text-decoration: none;
    width: calc((100% / 3) - 34px);
    float: left;
    margin: auto;
    margin-left: 5px;
    margin-right: 5px;
}
nav > a:hover {
    border-width: 12px;
    border-style: solid;
    border-image: url(/assets/png/button_hover.png);
    border-image-slice: 6 fill;
    border-image-repeat: round;
    image-rendering: pixelated;
}
main {
    width: calc(75% - 10px);
    float: right;
    margin: 5px;
    clear: both;
    height: 150px;
}
aside {
    width: calc(25% - 10px);
    float: left;
    margin: 5px;
}
aside > div {
    overflow-y: auto;
}
.panel {
  /*margin: 10px;*/
  display: block;
  width: auto;
  border-width: 12px;
  border-style: solid;
  border-image: url(/assets/png/frame.png);
  border-image-slice: 6 fill;
  border-image-repeat: round;
  image-rendering: pixelated;
  height: 550px;

}
footer {
    clear: both;
    text-align: center;
}