.griffin-text-1 {
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   }

   .under-construction {
      display: flex; 
      justify-content: center; 
      align-items: center;
   }

   .play-link p{
      font-size: 18px;
      font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
   }

   .play-link:hover {
      color:aqua;
   }
   
   .title {
      font-size: 40px;
      margin-bottom: 30px;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   }

   .sub-title {
      font-size: 25px;
      color: grey;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      margin-bottom:40px;
   }

   h1 {
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   }

   h2 {
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   }
   
   h3 {
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   }



   .project-flex {
      display:grid;
      grid-template-columns: repeat(3,1fr);
      gap:20px;
   }

   .project-section h1 {
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   }

   .project-card {
      overflow: hidden;
      position: relative;
      max-width: 250px;
      transition: transform 0.3s ease;
   }

   .project-card:hover {
      transform: scale(1.05);
      z-index:10;
   }

   .project-card:hover .project-title {
      opacity: 1;
      font-style: italic;
   }

   .project-link {
      display: block;
      position: relative;
   }

   .project-link img {
      width: 100%;
      height:100%;
      display: block;
   }

   .project-title {
      display: flex;
      align-items: center;
      justify-content: center;

      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      color: rgb(255, 255, 255);
      text-align: center;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
   }

   .imageDescription {
      display:flex;
      justify-content: flex-start;
      column-gap:40px;
      margin-bottom:50px;
   }

   .imageDescription p {
      text-indent: 0px; 
      line-height:2;
   }

   .images {
      display: flex;
      flex:1;
      flex-direction: column;
      gap: 10px;
   }

   .images img {
      width: 100%;
      height: auto;
      max-width: 400px;
      border: 3px solid white;
   }
   .description {
      flex:1;
   }

   .video-container {
      position:relative;
      width:100%;
      max-width: 800px;
      margin: auto;
   }
   .video-container iframe {
      width:100%;
      height:auto;
      aspect-ratio: 16 / 9;
   }

   .three-canvas {
      width: 16vw;
      aspect-ratio: 1 / 1;
      max-width: 200px;
   }

   @media (max-width: 600px) {
      .imageDescription {
         flex-direction: column;
      }

      .title {
         font-size: 32px;
      }

      .sub-title {
         font-size: 20px;
      }

      .play-link p{
         font-size: 14px;
      }
   }
   



   .navbar {
   display: flex;
   align-items: stretch;
   position: fixed;
   top: 0;
   width: 100%;
   background-color: rgb(41, 41, 41);
   z-index: 12;
   }

   .navbar a, .dropdown {
   flex: 1;
   text-align: center;
   color: white;
   text-decoration: none;
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   padding: 14px;
   cursor: pointer;
   }

   .navbar a:hover, .dropdown:hover {
   background-color: #686868;
   }

   .dropdown {
   position: relative;
   display:flex;
   align-items: stretch;
   padding:0;
   }

   .dropdown > a {
      display:flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
      width:100%;
   }

   .dropdown-content {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   background-color: rgb(41, 41, 41);
   }

   .dropdown-content a {
   display: block;
   padding: 10px;
   }

   .dropdown:hover .dropdown-content {
   display: block;
   }