body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
  background: #fff;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0; /* put canvas in the background */
}

a:link {
  color: #e7b207;
}

/* visited link */
a:visited {
  color: #e7b207;
}

/* mouse over link */
a:hover {
  color: #da6b10;
}

/* selected link */
a:active {
  color: #FFC300;
}

#rcorners1 {
  align-content: center;
  text-align: center;
  border-radius: 25px;
  background: #FBFAF9;
  padding: 20px 20px;
  height: 90%;
  width: 90%;
  box-shadow: 0px 2px 2px #888888;
}

.center {
  max-width: fit-content;
  margin-inline: auto;
}

.justify {
  text-justify: auto;
}

.zig-zag-box {
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  */
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-content: center;
}

.zig-zag-box {
  --s: 60px;  /* control the size of the spikes */
  --w: 500px; /* preferred image width */
  
  width: round(var(--w),var(--s)); 
  aspect-ratio: 1;
  object-fit: cover;
  padding: calc(.75*var(--s));
  box-sizing: border-box;
  background: #FFCC33;
  mask:
    conic-gradient(#000 0 0) 50%/calc(100% - var(--s)) calc(100% - var(--s)) no-repeat,
    repeating-conic-gradient(from 45deg,#0000 0,#000 1deg 89deg,#0000 25% 50%) 
     calc(var(--s)/2) 0/var(--s) var(--s);
}


.grid-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, #ccc 1px, transparent 1px),
    linear-gradient(to bottom, #ccc 1px, transparent 1px);
  background-size: 40px 40px; /* Grid spacing */
  z-index: 0;
}

#shapesCanvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.content {
  position: relative;
  z-index: 2;
  color: #333;
  padding: 40px;
}