#nav-wrapper {
  display: grid;
  z-index: 998;
}

#navbar {
    background: var(--artBlue);
    color: var(--accentLight);
    justify-self: center;
    width: 100%;
    position: fixed;
    top: 0px;
    display: grid;
    grid-template-columns:  1fr;
    grid-gap: 30px;
    align-items: center;
    height: 120px;
}



.nav-item {
  padding: 4px;
  border: 4px solid white;
  font-size: 1.2rem;
  font-family: 'Atma', cursive;
  font-weight: bold;
  }

  /* display all menu items on phones */

  @media screen and (max-width: 650px) {
    .nav-item {
      font-size: 1rem;
    }

    #navbar {
      grid-gap: 10px;
    }
}

/* display all menu items on narrow phones */

@media screen and (max-width: 400px) {
  .nav-item {
    font-size: .8rem;
  }
}

  .nav-item:nth-of-type(1) {
    background: var(--artRed);
  }

  .nav-item:nth-of-type(2) {
    background: var(--artOrange);
  }

  .nav-item:nth-of-type(3) {
    background: var(--artGreen);
  }

  .nav-item:nth-of-type(4) {
    background: var(--artBlue);
  }

 .active-nav-item {
    border: 10px double white;}

.nav-item a {
  color: white;
}

.nav-item a:hover {
  color: var(--accentLight);
}



/* DISPLAY BUTTONS SIDE BY SIDE ON MOBILE */
  /* *** change the repeat to number of items in nav bar ***  */

.nav-list {
  display: grid;
  margin: 0;
  position: fixed;
  grid-template-columns: repeat(4,auto);
  grid-gap: 0px;
  list-style: none;
  justify-self: left;
  padding: 0;
  width: 100vw;
  justify-items: center;
  align-items: center;
  background: var(--artBlue);
  grid-auto-rows: 50px;
  top: 100px;
}



/* LAYOUT  */



.nav-toggler {
    position: fixed;
    right: 20px;
    top:20px;
    cursor: pointer;
    justify-self: center;
    
}

.nav-toggler-lines, .nav-toggler-cross {
  width: 40px;
}


ul {
  padding-inline-start: 0px;
}


.bubble-banner {
  display: grid;
grid-template-columns:  1fr ;
justify-items: center;
width: 100%;

}

.bubble-img  {
  width: 100%;
}

.bubble-img img {
  width: 100%;
}



.nav-toggler {
  display: none;
}



/* computers */

@media screen and (min-width: 650px) {






    #navbar {
      width: 850px;
      grid-gap: 0;
      left: 50%;
      transform: translate(-50%);
      padding: 0;
      height: 160px;
    }


    .nav-list {
        display: grid;
        /* change the repeat to number of items in nav bar ***  */
        margin: 0;
        width: auto;
        position: static;
        background: white;
        grid-template-columns: repeat(4,auto);
        grid-gap: 0px;
        list-style: none;
        justify-self: left;
        padding: 0;
        margin-left: 90px;
  
            
    }


}