* {
  box-sizing: border-box; 
  font-family: monospace;
}

body {
  background-color: white;
  color: black;
  font-family: monospace;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
}

header a {
  color: white;
}

header {
  background-color: #ae6220;
  padding: 5px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

main {
    padding: 20px;
}

.container {
    max-width: 800px;
}


#background {
  
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: -1;
  margin-bottom: -100vh;
}

.transparent-container {
    background: #b39c82d1;
    margin: 20px;
    padding: 1px 10px 1px 10px;
}

.parchment-background {
    background-image: url("./weave.jpg");
}

.pattern-background {
  --s: 21px;
  --c1: #4b956b;
  --c2: #d1803d;
  --c3: #b39c82;
  --c4: #dcd1b4;
  
  background:
    conic-gradient(at 50% calc(100%/6),var(--c1) 60deg,#0000 0),
    conic-gradient(at calc(100%/6) 50%,#0000 240deg,var(--c1) 0),
    conic-gradient(from 180deg at calc(100%/6) calc(500%/6),var(--c1) 60deg,#0000 0),
    conic-gradient(from 180deg at calc(500%/6),#0000 240deg,var(--c1) 0) calc(4*.866*var(--s)) 0,
    repeating-linear-gradient(-150deg,var(--c2) 0 calc(100%/6),#0000   0 50%),
    repeating-linear-gradient(-30deg, var(--c3) 0 calc(100%/6),var(--c4) 0 50%);
  background-size: calc(6*.866*var(--s)) calc(3*var(--s));
}

.content-image {
    width: 500px;
    max-width: 85vw;
}

html {
    overflow-x: hidden;
}

a {
    word-wrap: break-word;
}

@media only screen and (min-width: 900px) {
  .container {
    margin-left: 5vw;
  }
}