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

 
  --accent1: #f280aa;
  --accent2: #f257a0;
  --accent3: #d9488b;

 
  --header: #4d0021;
  --headerli: #330016;

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

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

  
  --asidebg: #ffbddd;
  --titlebg: #f257a0;
  --subtitlebg: #ffdbeb;
  --mainbg: #ffbddd;
}

body {
  
  background-color: pink;
  background-image: url("https://i.pinimg.com/originals/b8/ad/49/b8ad492f14353a29d325eeae97d778f6.gif"); 
  background-size:180px;  
  background-position:center;
}

#container {
 
  width: 960px;
  max-width: 960px;
  margin: auto;
  box-sizing: border-box;

  
  font-family: ABeeZee, tahoma, arial, sans-serif;
}

header {

  width: 960px;
  max-width: 960px;
  box-sizing: border-box;
  display: flex;
  margin: 10px;
  position: relative;
  justify-content: flex-end;
}

.title {
  
  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 {
  
  box-sizing: border-box;
}

header li {
 
  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 {
 
  display: flex;
  max-width: 960px;
  box-sizing: border-box;
}

aside {
  
  width: 150px;
  max-width: 150px;
  position: fixed;
  padding: 5px;
  box-sizing: border-box;
}

.button {
  
  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: 800px;
  max-width: 800px;
  box-sizing: border-box;
  position: relative;
  left: 150px;
  padding: 5px;
  margin-left: 20px;
}

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

h1 {
  
  max-width: 500px;
  box-sizing: border-box;
  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);
}

h2 {
  
  margin: 20px 0px 6px;
  padding: 5px;
  display: inline-flex;
  max-width: 350px;
  box-sizing: border-box;

  
  background: var(--subtitlebg);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);

  
  font-size: 22px;
  font-style: italic;
  color: var(--subtitle);
}

h3 {
  
  margin: 15px 0px 6px;
  padding: 5px;
  display: inline-flex;
  max-width: 200px;
  box-sizing: border-box;

 
  background: var(--subtitlebg);
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);

  
  font-size: 18px;
  font-style: italic;
  color: var(--subtitle);
}

h4 {
  
  max-width: 300px;
  margin-bottom: 7px;
  padding: 7px;
  box-sizing: border-box;

  
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  background: var(--subtitlebg);

  font-size: 18px;
  color: var(--subtitle);
}

main p {
  
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;

  
  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;
}

footer {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
}

footer p {
  
  padding: 5px 15px;
  margin-bottom: 7px;
  box-sizing: border-box;

  
  border: var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  background: var(--accent1);

  
  font-size: 12px;
  color: var(--header);
}

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