:root {
  /* border styling */
  --border: 1px solid #a62d65;
  --corner: 10px;
  --shadow: 3px 3px #a62d6599;

  /* accent colors */
  --accent1: #f280aa;
  --accent2: #f257a0;
  --accent3: #d9488b;

  /* text colors */
  --header: #4d0021;
  --headerli: #330016;

  --button: #4d0021;
  --aside: #4d0021;
  --asideli: #a62d65;

  --title: #3b0019;
  --subtitle: #d93d86;
  --body: #731f46;
  --link: #ba296d;

  /* background colors*/
  --asidebg: #ffbddd;
  --titlebg: #f257a0;
  --subtitlebg: #ffdbeb;
  --mainbg: #ffbddd;
}

body {
  /* background styling */
  background-color: pink;
  background-image: url("https://sadhost.neocities.org/images/tiles/pinkhrtsbg.gif");
  background-size: 118px;
  background-position: fixed;
}

#container {
  /* sizing and position */
  width: 960px;
  max-width: 960px;
  margin: 20px auto;
  box-sizing: border-box;

  /* general font styling */
  font-family: ABeeZee, tahoma, arial, sans-serif;

  /* Add a single box container styling */
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  background-color: #fff; /* Add a white background to the container */
  padding: 20px; /* Add some padding inside the box */
}

header {
  /* Align header and title in the box */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  position: relative;
  justify-content: space-between;
}

.title {
  /* title styling */
  padding: 5px;
  display: inline-flex;
  margin-right: 10px;
  background: var(--accent1);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  text-align: center;
  font-size: 18px;
  color: var(--header);
}

header nav {
  /* sizing */
  box-sizing: border-box;
}

header li {
  /* menu styling */
  display: inline-flex;
  padding: 5px;
  margin-left: 10px;
  background: var(--accent2);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  text-align: center;
  font-size: 18px;
  color: var(--headerli);
}

header a {
  color: inherit;
  text-decoration: none;
}

header li:hover {
  background: var(--accent3);
}

.flex {
  /* sizing and position */
  display: flex;
  max-width: 960px;
  box-sizing: border-box;
}

aside {
  /* aside styling */
  width: 150px;
  max-width: 150px;
  position: absolute;
  padding: 5px;
  box-sizing: border-box;
}

.button {
  /* button styling */
  margin: 15px 0px;
  padding: 5px 0px;
  background: var(--accent1);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  text-align: center;
  font-size: 20px;
  color: var(--button);
}

.button a {
  text-decoration: none;
  color: inherit;
}

.button:hover {
  background: var(--accent3);
}

aside nav {
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  background: var(--asidebg);
}

nav .toc {
  padding: 5px 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: var(--aside);
}

aside li {
  margin: 5px;
  padding: 5px;
  list-style-type: circle;
  list-style-position: inside;
  color: var(--asideli);
}

aside a {
  color: inherit;
  text-decoration: none;
}

aside a:hover {
  font-style: italic;
}

main {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  margin-left: 20px;
  position: relative;
}

.title-flex {
  display: flex;
  align-items: center;
}

h1 {
  /* article title styling */
  max-width: 500px;
  margin: 0px 10px 7px 0px;
  padding: 7px;
  background: var(--titlebg);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  font-size: 24px;
  font-weight: bold;
  color: var(--title);
}

h4 {
  /* date of post styling */
  margin: 0px;
  padding: 5px;
  background: var(--subtitlebg);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  font-size: 16px;
  font-style: italic;
  color: var(--subtitle);
}

h2, h3, h4 {
  /* styling for subtitles and sub-subtitles */
  margin: 10px 0;
  padding: 5px;
  display: inline-flex;
  background: var(--subtitlebg);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  font-style: italic;
  color: var(--subtitle);
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
}

main p {
  /* article body styling */
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
  line-height: 19px;
  color: var(--body);
  background: var(--mainbg);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
}

main a {
  color: var(--link);
  text-decoration: wavy underline;
}

/* New class for the article body container */
.article-body {
  background: var(--mainbg);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-top: 10px;
}

footer {
  display: flex;
  justify-content: flex-end;
}

footer p {
  padding: 5px 15px;
  margin-bottom: 7px;
  background: var(--accent1);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  font-size: 12px;
  color: var(--header);
}

@media screen and (max-width: 1000px) {
  main {
    width: 700px;
    max-width: 700px;
  }
}