:root {
  --turquoise: #39abc8;
  --purple: #671f54;
  --pink: #f9cbed;
}

html, body {
  margin: 0;
  height: 100%;
}

.mainContainer {
  background-image: url(/images/tile.jpg);
  background-repeat: repeat;
  width: 100%;
  min-height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0px;
  padding: 0px;

  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;

  display: grid;
  grid-template-areas: "navbar content";
  grid-template-columns: 200px;
}

#pageContentContainer {
    justify-items: center;
    padding: 20px; 
    grid-area: "content";
    width: 97%;
}

.divBackground, #titleContainer, #content {
    background-color: var(--purple);
    color: var(--pink);
    border: 3px double var(--pink);
    border-radius: 10px;
    padding: 5px;
    margin: 10px auto;
}

#titleContainer {
    justify-self: center;
    width: 350px;
    font-family: "Geostar", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}


#fillBackground {
  background-image: url(/images/background.png);
  background-repeat: repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0px;
  padding: 0px;
}