* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
  }
  
  body {
    padding: 10px 20px;
    background-color: rgb(255, 250, 244);
  }
  
  .nav-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2vw;
  }
  
  .nav-box li {
    list-style: none;
    padding: 5px 10px;
    color: rgb(249, 197, 165);
    font-family: monospace;
    font-weight: 600;
    font-size: 1.2rem;
    border: 1px solid black;
    border-radius: 0 0.5rem;
    background-color: rgb(14, 55, 55);
    transition: 0.2s all ease-in-out;
    cursor: pointer;
  }
  
  .nav-box li:hover,
  .nav-box li:active {
    background-color: aquamarine;
    color: rgb(247, 127, 42);
  }
  
  .nav-box li a {
    text-decoration: none;
    color: inherit;
  }
  
  
  /* For my phone */
  @media only screen and (max-width: 600px) {
    .nav-box {
      justify-content: space-evenly;
      gap: 2vw;
    }
  
    .nav-box li {
      gap: 1vw;
      font-size: 0.9rem;
      font-weight: 700;
    }
  }