@font-face {
  font-family: pillarfont;
  src: url("RomanSD.ttf");
}

h1, h2, h3, h4, h5, h6 {
  font-family: pillarfont;
  }


html, body {
  height: 100%;
   margin: 0;
   text-align: center;
   font-family: "Garamond" , serif;
}

body {
  background: url("p/atzecrec.jpg");
}

.content{
  display: flex;
  flex-direction:row;
  margin:auto;
   justify-content: center;
   gap: 10px;
    align-items: center;
  height: 100%;

}

.pillar {
  border: double white;
  background: url("p/ourple.jpg");
  color: white;
  width: 15%;
  height: 500px;
  padding: 5px;
  box-sizing: border-box;
  text-align: center;
}

.mural {
  border: double white;
  width: 45%;
  height: 500px;
  box-sizing: border-box;
  background-color: RGBA(0, 0, 0, 0.7);
}

.nav{
  padding:0;
  list-style: none;

}

li a {
  display: block;
  color: white;
  padding: 5px;
}


@media screen and (max-width: 800px) {
  .pillar, .mural {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  
  .mural { height: 500px; }

  .content{
      flex-direction:column;
      height: auto;
  }

}