@font-face {
    font-family: 'Apple Garamond';
    src: url('/fonts/AppleGaramond.ttf');
}
body {
    font-size: 1rem;
  background-color: white;
  font-family: 'Apple Garamond', serif;
  font-weight: 200;
  color: rgb(0, 0, 0);
}

h1, h2, h3, h4, h5, h6, nav {
  font-family: 'Arial Narrow', sans-serif;
}

b{
    color: black;
    weight: 800;
}

nav {
    font-size: 1.5rem;
    display: flex;
    margin: 4px;
  }
  
  nav ul {
    width: 100%;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap:1rem;
  }
  
  
  nav a {
    text-transform: uppercase;
    text-decoration: none;
    color: black;
  }

  nav a:hover{
    color:blue !important;
  }

  a {
    text-decoration: none;
  }
  
  .description{
    color: darkslategrey;
    display: inline;
  }

  span{
    color:rgb(161, 163, 164);
  }
html { overflow-y: scroll; }

*{
    box-sizing: border-box;
}
.grid {
    height:100%;
  }
  

  .grid:after {
    content: '';
    display: block;
    clear: both;
  }

  
  .grid-sizer,
  .grid-item {
    width: 20%;
  }

  .project-description{
    width:45%;
  }

  @media (max-width: 800px) {
    .grid-sizer,
    .grid-item {
      width: 33.33333%;
    }

    .wrapper{
        width:100%;
        display: flex;
        flex-direction: column;
        gap:2rem;
    }
    
    .one{
        width: 100% !important;
    }
    .info{
        width: 100% !important;
    }

    .project-description{
        width: 90%;
    }
  }

  @media (max-width: 500px) {
    .grid-sizer,
    .grid-item {
      width: 50%;
    }
    .project-description{
        width: 100%;
    }
  }
  
  
  .grid-item {
    float: left;
    padding: 4px;
  }
  
  .grid-item img {
    display: block;
    width:100%;
  }
  
  .content{
    width:100%;
    margin:4px;
    display: flex;
    flex-direction: column;
    gap:1rem;
  }

  .project-info{
    gap: 10rem;
    align-items:first baseline;
  }

  .project-title h2{
    text-transform: uppercase;
  }

.caption{
    width: 50%;
    text-align: left;
}

.caption2{
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
}
  .single-row{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
  }
  .single-row img{
    width: 100%;
  }

  .images-row-2{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
  }
  .images-row-2 img{
    width: 50%;
  }

  .images-row-4{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
  }
  .images-row-4 a{
    width: 25%;
  }
  .images-row-4 img{
    width: 100%;
  }

  .pages img{
    width: 33.333%;
  }

.wrapper{
    display: flex;
    gap:2rem;
}

.one{
    width: 40%;
}

.befores{
    gap:1rem;
}