@font-face {
  font-family: 'Luxurious Roman';
    font-style: normal;
    font-display: swap; 
      src:
        url('/static/LuxuriousRoman-Regular.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Old Standard';
    font-style: normal;
    font-display: swap; 
      src:
        url('/static/OldStandardTT-Regular.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Old Standard';
    font-style: italic;
    font-display: swap; 
      src:
        url('/static/OldStandardTT-Italic.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Old Standard';
    font-weight: 700;
    font-display: swap; 
      src:
        url('/static/OldStandardTT-Bold.ttf') format('truetype');
  }

.header {
    background-color: #190B28;
    display: flex;
    padding: 10px 20px;
    color: white;
    font-weight: 200;
    font-family: 'Luxurious Roman';
    font-size:larger;
}
h1,h2 {
    font-family: 'Luxurious Roman';
}
.header img {
    height: 50px;
    margin-bottom: -5px;
    margin-right: 10px;
}
.headeritem {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 20px;
    margin-top: -10px;
}
.active .headeritem {
    background-color: #3a1b5b
}
.headeritem:hover {
    background-color: #4c3169
}
a.nav-link:link
{
   color: inherit;
   text-decoration: none;
}
a.nav-link:visited
{
    color: inherit;
    text-decoration: none;
}
a.nav-link:hover
{
    color: inherit;
    text-decoration: none;
}
a.nav-link:active
{
    color: inherit;
    text-decoration: none;
}


body {
    margin: 0;
    display: flex;
    flex-direction: column;
}
html, body {
    height: 100%;
}
  
.main {
    margin: 0 35px 50px;
    flex-grow: 1;
    font-family: "Old Standard", serif;
    font-weight: 400;
    font-style: normal;   
    font-size: large; 
    line-height: 1.4;
    display: flex;
    flex-direction: column;
}
.main strong {
    font-weight: bold;
}
div.topmatter {
    margin-top: 0px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top: none;
}
.topmatter, .item {
    border-radius: 10pt;
    padding: 10px 25px 25px;
    margin: 10px;
    border: 1pt black solid;
    background: #75382F;
    color: white;

}

.main img {
	max-width: 100%;
}

.itemcontainer {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex-grow: 1;
    width: 500px;
}
body {
    /* background: #9B9987; */
  --s: 60px; /* control the size*/
  --c1: #333f1a;
  --c2: #47442f;
  
  --c:#0000 79%,var(--c1) 81% 99%,var(--c2) 101% 150%,#0000 0;
  background:
    radial-gradient(var(--s) at 100% 100%,var(--c)),
    radial-gradient(var(--s) at 100% 0   ,var(--c)) calc(3*var(--s)/2) 0,
    radial-gradient(var(--s) at 0    100%,var(--c)) calc(  var(--s)/2) 0,
    radial-gradient(var(--s) at 0    0   ,var(--c)) calc(2*var(--s)) 0,
    repeating-linear-gradient(90deg,
      var(--c1) 0 calc(20%/3),#0000 0 calc(70%/3),
      var(--c1) 0 30%,#0000 0 50%) calc(var(--s)/-5) 0 var(--c2);
  background-size: calc(3*var(--s)) calc(5*var(--s)/2);
}
a {
    color: #60B2E5
}
/* a:visited {
    color: #3a1b5b
} */