/* Reset tampilan default untuk elemen */
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 14pt;

}


/* style dari navbar */

@media (min-width: 451px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f7f7;
    padding: 15px;
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 50px;
  }
  
  .nav-menu {
      list-style: none;
      display: flex;
      place-items: center;
  }
  
  .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: #f7f7f7; 
      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 */
  }
  
  .h1 {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 500%;
    margin-right: 2em;
    margin-left: 1em;
    margin-top: 1em;
    line-height: .9em;
    width: 50%;
  }
  
  /* Animasi svg*/
  #TelescopeGirl{
    position: absolute;
    right: 0;
    top: -5em;
    width: 40em;
  }
  @keyframes MelayangY {
      0%{
        transform: translateY(-10px);     
      }
      100%{
        transform: translateY(10px);
      }}
  @keyframes Rambut {
      0% {
        transform: rotateZ(5deg);
      }
      100% {
        transform: rotateZ(-10deg);
      }}
    @keyframes IkatRambut {
      0% {
        transform: rotateZ(-10deg);
      }
      100% {
        transform: rotateZ(15deg);
      }}
  #rambut {
      animation: Rambut 2s linear infinite alternate;
      transform-origin: top;
      transform-box: fill-box;
    }
    #notes {
      animation: MelayangY 2s ease-in-out infinite alternate;
      transform-origin: center;
      transform-box: fill-box;
    }
    #calculator {
      animation: MelayangY 3s linear infinite alternate;
      transform-origin: center;
      transform-box: fill-box; ;
    }
    #ikat-rambut {
      animation: IkatRambut .5s ease-in-out infinite alternate;
      transform-origin: center;
      transform-box: fill-box;
    }
  
  .page2 {
    position: relative;
    margin-top: 19em;
    background: #5AA96B;
    height: 350px;
  }
  .Dave {
    position: relative;
    left: -130px;
    width: auto;
    height: 350px;
  }
  .h2 {
    position: relative;
    width: 60%;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: #FFFFFF;
    font-size:45px;
    margin-left: 40%;
    line-height: 50px;
    top: -330px;
    left: -100px;
  }

  .kotak1 , .kotak2 , .kotak3 , .kotak4 {
    position: relative;
    margin: 5em 3em;
    background: #FFFFFF;
    width: 40%;
    height: 300px;
    border-radius: 25px;
    box-shadow: 10px 10px 8px #C0C0C0 , -10px -10px 8px #f7f7f7;
  }
  .p1 , .p2 , .p3 , .p4 {
    font-size: 140%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: black;
  }
  
  .kotak1{
    float: left;
    .CompasBoy{
      position: inherit;
      width: 70%;
      margin: -2em 0em 0em -2em;
    }
    .p1 {
      position: inherit;
      width: 40%;
      margin: -9em 0em 0em 12.5em;
    }
  }

  .kotak2{
    float: right;
    .ChartGirl{
      position: inherit;
      width: 60%;
      margin: 1em 0em;
    }
    .p2 {
      position: inherit;
      width: 40%;
      margin: -9em 0em 0em 12.5em;

    }
  }
  
  .kotak3{
    float: left;
    .PohonKecil{
      position: inherit;
      width: 60%;
      margin: -1em;
    }
    .p3 {
      position: inherit;
      width: 40%;
      margin: -7em 0em 0em 11em;
    }
  }

  .kotak4{
    float: right;
    .PohonHasil{
      position: inherit;
      width: 70%;
      margin: -1em 0em 0em -1em;
    }
    .p4 {
      position: inherit;
      width: 40%;
      margin: -9em 0em 0em 12.5em;
    }
  }

}
@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 */
  }
  
  .h1 {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 300%;
    margin-top: 2em;
    text-align: center;
  }
  
  /* Animasi svg*/

  #TelescopeGirl{
    position: relative;
    width: 20em;
    margin: -3em -2em;
  }
  @keyframes MelayangY {
      0%{
        transform: translateY(-10px);     
      }
      100%{
        transform: translateY(10px);
      }}
  @keyframes Rambut {
      0% {
        transform: rotateZ(5deg);
      }
      100% {
        transform: rotateZ(-10deg);
      }}
    @keyframes IkatRambut {
      0% {
        transform: rotateZ(-10deg);
      }
      100% {
        transform: rotateZ(15deg);
      }}
  #rambut {
      animation: Rambut 2s linear infinite alternate;
      transform-origin: top;
      transform-box: fill-box;
    }
    #notes {
      animation: MelayangY 2s ease-in-out infinite alternate;
      transform-origin: center;
      transform-box: fill-box;
    }
    #calculator {
      animation: MelayangY 3s linear infinite alternate;
      transform-origin: center;
      transform-box: fill-box; ;
    }
    #ikat-rambut {
      animation: IkatRambut .5s ease-in-out infinite alternate;
      transform-origin: center;
      transform-box: fill-box;
    }
  
  .page2 {
    position: relative;
    margin: 8em 0 ;
    background: #5AA96B;
  }
  .Dave {
    position: inherit;
    height: 280px;
    margin: 2em 0 0 -12em;
  }
  .h2 {
    position: inherit;
    width: 40%;
    text-align: justify;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: #FFFFFF;
    font-size:120%;
    margin: -14em 0em 0em 9em;

  }
  
  .kotak1 , .kotak2 , .kotak3 , .kotak4 {
    position: relative;
    margin: 3em 1em;
    background: #FFFFFF;
    width: 90%;
    height: 180px;
    border-radius: 25px;
    box-shadow: 10px 10px 8px #C0C0C0 , -10px -10px 8px #f7f7f7;
  }
  .p1 , .p2 , .p3 , .p4 {
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: black;
    text-decoration: none;
  }
  
  .kotak1{
    .CompasBoy{
      position: inherit;
      width: 70%;
      margin: 0em 0em 0em -1em;
    }
    .p1 {
      position: inherit;
      width: 30%;
      margin: -10em 0em 0em 13em;
    }
  }

  .kotak2{
    .ChartGirl{
      position: inherit;
      width: 60%;
      margin: 1.5em 0em;
    }
    .p2 {
      position: inherit;
      width: 30%;
      margin: -8em 0em 0em 12em;

    }
  }
  
  .kotak3{
    .PohonKecil{
      position: inherit;
      width: 60%;
      margin: .5em 0em 0em -1em;
    }
    .p3 {
      position: inherit;
      width: 40%;
      margin: -7em 0em 0em 8em;
    }
  }

  .kotak4{
    .PohonHasil{
      position: inherit;
      width: 60%;
      margin: 1em 0em 0em -1.5em;
    }
    .p4 {
      position: inherit;
      width: 40%;
      margin: -8em 0em 0em 8em;
    }
  }
  
}