@font-face {
  font-family: bubblegumSans;
  src: url('BubblegumSans-Regular.otf') format('opentype');
    font-weight: 400;
}

@font-face {
  font-family: espresso;
  src: url('EspressoDolce.ttf')format('truetype');
}

* {
  box-sizing: border-box;
  cursor: url('cursor_point1a.cur'), url('cursor_point1a.gif'), default;
  text-decoration: none;
}

body {
  background-color: #8967B3;
  font-size: 18px;
  font-family: espresso;
  margin: 0;
}


hr {
  border: solid #ccad78;
  border-width: 2px 0 0 0;
}

#container {
  margin: 3em auto;
  aspect-ratio: auto;
  height: auto;
  max-width: 800px;
	padding: 1em;
  background-image: url(paper.jpg);
  background-size: 100%;
	border: 16px solid transparent;
	border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
	              #58a 0, #58a 3em, transparent 0, transparent 4em);

}

#content {
  padding: 10px 5% 20px 5%;
}


/*HEADER STYLE*/
#header {
  padding: 0 5%;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: purple;
  text-decoration: none;
}
#header li a:hover {
  text-decoration: underline; 
}