body {
      font-family:'Red Hat Mono', monospace;
      margin: 0 auto;
      padding: 0;
      background-color: #ffffff;
      line-height: 1.6;
      font-size: 16px;
      max-width: 1280px;
      width: 100%;
    }

    header {
      font-family:'Red Hat Mono', monospace;
      background-color: #ffffff;
      padding: 20px;
      text-align: left;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    header img {
      height: 50px; /* Adjust the height of your logo */
      margin: 0 0 20px 0;
    }

    main {
      font-family:'Red Hat Mono', monospace;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around; /* Adjust the spacing between projects */
      padding: 20px 20px 60px 20px;
    }

    .mainVisual {
      width: 100%;
      height: auto;
    }

    .mainVisual img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    .otherVisual {
      width: 49%;
      height: auto;
    }
    
    .otherVisual img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .topnav {
      overflow: auto;
      text-align: left;
      font-size: 22px;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .topnav a {
      text-decoration: none;      
      color: black;
      border-bottom: 2px solid black;
      transition: border-bottom 0.3s ease;
    }

    .topnav a:active,
    .topnav a:hover {
      border-bottom: 2px solid transparent;

    }

    .project {
      width: 30%; /* Adjust the width of each project box */
      margin: 10px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.3s ease-in-out;
    }

    .project img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .project:hover {
      transform: scale(1.05);
    }

    .project a {
      text-decoration: none;
      color: black;
      text-align: left;
    }

    /* Text in About Page */

    .text {
      width: 100%;
      text-align: left;
    }

    .text a {
      text-decoration: none;
      color: black;
      border-bottom: 2px solid black;
    }

    .text a:active,
    .text a:hover {
      border-bottom: 2px solid transparent;
    }

    /* Text in WWF Thermometer, Sticker, and Proximity because they only have two visuals and below */

    .textTwoVisuals {
      width: 70%;
      text-align: left;
    }

    .textTwoVisuals a {
      text-decoration: none;
      color: black;
      border-bottom: 2px solid black;
    }

    .textTwoVisuals a:active,
    .textTwoVisuals a:hover {
      border-bottom: 2px solid transparent;
    }


    /* Text near mainVisual on all projects */

    .aboutText {
      width: 100%;
      text-align: left;
    }

    .aboutText a {
      text-decoration: none;
      color: black;
      border-bottom: 2px solid black;
    }

    .aboutText a:active,
    .aboutText a:hover {
      border-bottom: 2px solid transparent;
    }


    footer {
      font-family:'Red Hat Mono', monospace;
      background-color: #ffffff;
      padding: 10px 20px 10px 20px;
      text-align: left;
      position: fixed;
      bottom: 0;
      width: 100%;
      font-size: 16px;
    }
    
    /* Media query for tablet and desktop */
    @media (min-width: 769px) {

      .mainVisual {
      width: 70%;
      text-align: left;
      margin-bottom: 5px;
      }

      .aboutText {
      width: 28%;
      text-align: left;
      }

      }

    /* Media query for mobile devices */
    @media (max-width: 768px) {
 
      header {
        padding: 16px 10px 10px 10px;
      }

      header img {
        height: 36px; /* Adjust the height of your logo */
        margin: 0 0 5px 0;
      }

      .topnav a {
      display: table;
      margin: 10px 0 10px 0;
      line-height: 1;
      font-size: 20px;
      text-decoration: none;
      border-bottom: 2px solid black;
      }

      .topnav a:active,
      .topnav a:hover {
       border-bottom: 2px solid transparent;
       transition: border-bottom 0.3s ease
      }

      body {
      font-size: 16px;
      }

      main {
      line-height: 1.4;
      padding: 0px 10px 40px 10px;
      }

      .project {
      width: 100%; /* Set the width to 100% for one column on mobile */
      margin: 0px;
      overflow: hidden;
      cursor: pointer;
      }

      .project img {
      width: 100%;
      height: auto;
      object-fit: contain;
      }
 
      .project:hover {
      transform: none;
      }
      
      .mainVisual, {
        width: 100%;
      }

      .otherVisual {
        width: 100%;
        margin-bottom: 12px;
      }
      
      .textTwoVisuals {
      width: 100%;
      text-align: left;
      }
     
      footer {
      padding: 5px 10px 5px 10px;
      }

      }