body{
    margin: 0;
    padding: 0;
    background: #5aa96b
}

@media (min-width: 451px) {
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #FFFFFF;
        padding: 15px;
        position: sticky;
        top: 0;
        z-index: 1000;
        height: 50px;
      }
      
      .nav-menu {
          list-style: none;
          display: flex;
          place-items: center;
          font-size: 14pt;
      }
      
      .logo img {
        width: 200px;
        height: auto;
        position: relative;
        right: 550%;
        margin-top: 30%;
      }
      
      .nav-item {
          margin: 0 20px;
          position: relative; 
          left: 170%;
      }
      
      .nav-item a {
          text-decoration: none;
          color: black;
          padding: 10px;
      }
      
      /* Gaya dropdown */
      .dropdown {
          display: none;
          position: absolute;
          background-color: #FFFFFF; 
          list-style: none;
          padding: 10px;
          width: auto ; 
      }
      
      .nav-item:hover .dropdown {
          display: block; /* Dropdown menu akan terlihat saat mengarahkan kursor ke menu utama */
          width: auto; 
      }
      
      .dropdown li {
          padding: 10px;
          white-space: nowrap; 
      }
      
      .dropdown a {
          color: black;
          text-decoration: none;
      }
      
      .nav-item:hover a {
          background-color: wheat; /* Warna latar belakang saat hover */
      }

    .image {
        position: relative;
        width: 700px;
        float: right;
        top: -40em;
    }
    .h1 {
        position: relative;
        float: left;
        width: 40%;
        font-size: 700%;
        color: #FFFFFF;
        margin: 1em 0em 0em 5%;
    }
    .p1 /*deskripsi projek*/{
        width: 30%;
        position: relative;
        font-size: 20pt;
        color: #FFFFFF;
        text-align: justify;
        text-indent: 45px;
        margin: 5em 0 0 5%;
        top: 2em;
    }
    .p2 /*nama creator*/{
        position: relative;
        float: right;
        font-size: 150%;
        color: wheat;
        left: 21em;
        margin-top: -5em;
    }
    .p3 /*pesan creator*/{
        position: relative;
        float: right;
        font-size: 100%;
        color: #FFFFFF;
        width: 35%;
        left: 38em;
        margin-top: -5em;
        text-align: justify;
        text-indent: 45px;
    }
    
}
@media (max-width: 450px) {
    .navbar {
        display: flex;
        align-items: center;
        background-color: #f7f7f7;
        padding: 1 em;
        position: sticky;
        top: 0;
        z-index: 1000;
        height: 5em;
        width: 100%;
      }
      
      .nav-menu {
          position: absolute;
          list-style: none;
          font-size: 80%;
          font-weight: bold;
          margin: 0 0em 0 0em;
          display: grid;
          grid-gap: 2em;
          grid-template-columns: repeat(2, 1fr);
    
      }
      
      .logo img {
        width: 37%;
        height: auto;
        position: relative;
        right: 0;
        margin-top: 3em;
      }
      
      .nav-item {
          position: relative; 
          margin-right: 1em;
          left: 9em;
          padding: 0em;
      }
      
      .nav-item a {
          text-decoration: none;
          color: black;
      }
      
      /* Gaya dropdown */
      .dropdown {
          display: none;
          position: absolute;
          background-color: #f7f7f7; 
          list-style: none;
          padding: 10px;
          width: auto ;
          right: 3em; 
          margin-top: 2em;
      }
      
      .nav-item:hover .dropdown {
          display: block; /* Dropdown menu akan terlihat saat mengarahkan kursor ke menu utama */
          width: auto; 
      }
      
      .dropdown li {
          padding: 10px;
          white-space: nowrap; 
      }
      
      .dropdown a {
          color: black;
          text-decoration: none;
      }
      
      .nav-item:hover a {
          background-color: wheat; /* Warna latar belakang saat hover */
      }
      .image {
        position: relative;
        width: 130%;
        margin: 0 -6em;
    }
      .h1 {
        position: relative;
        width: 40%;
        font-size: 400%;
        color: #FFFFFF;
        margin: 0em 5%;
        }
        .p1 /*deskripsi projek*/{
            width: 90%;
            position: relative;
            font-size: 120%pt;
            color: #FFFFFF;
            text-align: justify;
            text-indent: 45px;
            margin: 0 .8em;
        }
        .p2 /*nama creator*/{
            position: relative;
            font-size: 130%;
            color: wheat;
            margin: 0em 2em;
        }
        .p3 /*pesan creator*/{
            position: relative;
            font-size: 100%;
            color: #FFFFFF;
            width: 80%;
            text-align: justify;
            text-indent: 45px;
            margin: 1em 2em;
        }
    
}