:root {

  --foam-white: #f8f5f2;
  --sand-beige: #e3d9c4;
  --sea-blue: #4a6c82;
  --shell-pink: #ddc6b6;
  --driftwood: #614623;

  --header-image: url(''); /* paste your header image */
  --body-bg-image: url(''); /* background image (paper?) */
  --box-texture: url('https://t4.ftcdn.net/jpg/00/94/93/01/360_F_94930136_2rJCn33glIkmMpXdHFb474gTCF7ET38M.jpg');   /* optional texture for the boxes */
}

@font-face {
  font-family: Nunito;
  src: url('https://sploiink.neocities.org/Medieval%20Scroll%20of%20Wisdom.ttf');
}

body {
  font-family: 'Nunito', sans-serif;
  margin: 0;
  background-color: var(--foam-white);
  background-image: var(--body-bg-image);
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
  background-attachment: fixed;
  color: var(--driftwood);
}

* {
  box-sizing: border-box;
}

#container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); 
  border-radius: 2px; 
}



/* HEADER */
#header {
  height: 150px;
  background-image: var(--header-image);
  background-size: cover;
  background-position: center;
  background-color: var(--sky-blue);
  border: 3px solid var(--driftwood);
  margin-bottom: 10px;
}

/* LINKS BAR */
#linksBar {
  background-color: var(--sand-beige);
  border: 3px solid var(--driftwood);
  padding: 10px;
  margin-bottom: 20px;
}

#linksBar ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#linksBar li a {
  color: var(--driftwood);
  font-weight: bold;
  text-decoration: none;
}

#linksBar li a:hover {
  color: var(--sea-blue);
}

/* CONTENT AREA */
#contentArea {
  display: flex;
  gap: 20px;
  position: relative;
  margin-bottom: 30px;
}

/* SIDE BOX */
#sideBox {
  width: 200px;
  background-color: var(--sand-beige);
  border: 3px solid var(--driftwood);
  padding: 15px;
  min-height: 300px;

}


/* MAIN BOX */
#mainBox {
  flex-grow: 1;
  background-color: var(--foam-white);
  border: 3px solid var(--driftwood);
  padding: 20px;
  min-height: 300px;
}




#statuscafe {
    padding: .5em;
    background-color: beige;
    border: 1px solid brown;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}