:root {
  --bg-color: #f9f1de; /* or #69433A ? */
  --text-color: #2e0b1c;
  --theme-color: #513212;
}

#all {
  width: 100%;
	max-width: 600px;
}

body {
  background-color: var(--bg-color);
  background-image: url('/imgs/lace.png');
  background-repeat:repeat;
  background-attachment:fixed;
  color: var(--text-color);
  font-family: serif;
  font-size:15px;
  margin:0; padding:0;
  display:flex;
  justify-content:center;
  transform:translate(0%); /* i have no idea why but the lace overflows when i do not have this in. */
}
 
a {
  color: blue;
}

.lace {
  z-index:10;
  background-image: url('/imgs/lace-white6-2.png');
  width: 40px; height: 100%;
  background-repeat: repeat-y;
  overflow: hidden;
  position: fixed;
  transform:translate(-90%);
}

main {
  padding: 1rem; padding-top:0;
  text-align: justify;
  background-color: #fde7e9;
  border-right:1px dashed #2a0502; border-bottom:1px dashed #2a0502;
}

#header {
  margin: 0;
  padding: 0;
}

#header h1 {
  font-size:45px;
  color: #2a0502;
}

#navbar {
  height: 40px;
  background-color: #f9f1e3; /* or #fceaff, does this look ok? */
  border:1px solid var(--theme-color);
  border-bottom:0;
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#navbar li {
  padding-top: 10px;
}

#navbar li a {
  color: var(--text-color);
  font-weight: 800;
  text-decoration: none;
}


#navbar li a:hover {
  color: #a49cba;
  text-decoration: underline;
}