html {
    font-family: "Kranky", serif;
}

body {
    background-image: url(images/underground.png);
}

h1 {
    color: rgb(130, 220, 236);
    font-family: "Rye", serif;
}

h1:before {
    content: "🦴";
    padding-right: 5px;
}

h1:after {
    content: "🦴";
    padding-left: 5px;
}

h2 {
    color: rgb(93, 208, 187);
    font-family: "Rye", serif;
}

h2:before {
    content: "⋆🐾⋆";
    padding-right: 5px;
}

h3 {
    color: rgb(12, 144, 104);
    font-family: "Rye", serif;
}

p {
    color: rgb(47, 57, 243);
    font-family: "Kranky", serif;
    font-size: 20px;
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
 /* Optional: Adjust the width as needed */
}

.rye-regular {
  font-family: "Rye", serif;
  font-weight: 400;
  font-style: normal;
  src: url(rye-regular.ttf) format('.ttf');
}

.kranky-regular {
  font-family: "Kranky", serif;
  font-weight: 400;
  font-style: normal;
}

main {
    background-image: url(images/pretty.png);
    background-size: cover;
    flex: 1;
    order: 2;
    border: groove #5a21a8;
    border-width: 2px;
    height: 1030px;
}

aside {
  width: 30%;
  padding-left:15px;
  margin-left: 5px;
  float: right;
  font-style: italic;
}

.scroll-box {
  width: 500px;
  max-height: 300px;   /* Box grows with content up to 250px, then scrolls */
  overflow: auto;      /* Adds scrollbars when needed */
  background-color: azure; /* Soft background color */
  padding: 15px;       /* Spacing inside the box */
  border-radius: 3px;  /* Rounded corners */
  margin: auto;
  border: groove #0f9296;
  border-width: 3px;
}

ul li::marker {
  content: url(images/wooblr.gif);
  color: pink;
  font-size: 25px;
}

#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 2px dashed midnightblue;
    width: 350px;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}