@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=Hepta+Slab:wght@1..900&family=Space+Mono:wght@700&display=swap');

          /*add separation in between passages*/
          /*center text bodies*/
          /*add subheadings to text passages for easier navigation*/
          /*reformat titles to switch allcaps and noncaps variations*/

            body{
                margin: 0;
            }
          header{
            display: flex;
            flex-direction: column;
            height: 252px;
            align-items: center;
            justify-content: center;
            background: #0E0D1D;
          } 
          h1{
            color: #A678FF;
            text-align: center;
            font-family: "Boldonse", system-ui;
            font-weight: 400;
            font-style: normal;
          }
          h2{
            color: #A678FF;
            text-align: center;
            font-family: "Boldonse", system-ui;
            font-weight: 400;
            font-style: normal;
          }
          h3{
            color: #352F53;
            text-align: center;
            font-family: "Space Mono", monospace;
            font-weight: 700;
            font-style: normal;
            font-size: 35px;
          }
          h4{
            color: #A678FF;
            text-align: center;
            font-family: "Space Mono", monospace;
            font-weight: 700;
            font-style: normal;
            font-size: 30px;
          }
          figcaption{
            color: #D9D9D9;
            font-family: "Hepta Slab";
            font-weight: 400;
            font-style: normal;
          }
          nav{
            display: flex;
            height: 56px;
            padding: 0 70px;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            border: 3px solid #A678FF;
            background: #0E0D1D;
            width: 93%;
          }
          nav a{
            color: #A678FF;
            text-align: center;
            /*font-family: keep Space Mono for Headers;*/
            font-size: 30px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-decoration: none;
            display: flex;
            height: 35px;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            font-family: "Space Mono", monospace;
            font-weight: 700;
            font-style: normal;
          }
          nav a:hover{
            color: #0E0D1D;
            background-color: #A678FF;
          }
          .visnav{
            display: flex;
            width: 629px;
            height: 1654px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 35px;
            background-color:#352F53;
          }
          body {
            margin: auto;
            background: #352F53;
           justify-content: center;
           align-items: center;
          }
          .flex-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 100%;
          box-sizing: border-box;
        }
        .page-image{
          width: 100%;
          text-align: center;
        }
        .page-image img{
          width: 100%;
          max-width: 802px;
          margin: 20px;
        }
        .sideby{
          display: flex;
          gap: 20px;
          max-width: 1220px;
          margin: auto;
          background-color:#A678FF;
          padding: 10px;
          flex: 1;
          color: black;
          font-family: "Hepta Slab", serif;
          font-size: 25px;
          font-weight: 400;
          font-style: normal;
          align-items: center;
}
        .sideby div {
          flex: 1;
}
        .sideimage {
          width: 100%;
          height: auto;
          display: block;
          flex-shrink: 0;
          max-width: 500px;
}
          .sideimage img {
            width: 100%;
            height: auto;
}
          figcaption{
            color: #A678FF;
            font-weight: 525;
            font-size: 20px;
            text-align: center;
}