app-nav 
{
  display: block;
  background-color: hsl(225, 13%, 18%);
  box-shadow: 0 0 25px hsl(0, 0%, 0%,0.75);
 
}

app-nav a
{
	opacity: 0.5;
  transition: opacity 200ms, text-shadow-color 200ms ease;
  text-decoration: none;
  margin: 0em 0.5em;
  color: hsl(0,0%,100%);
  font-weight: 700;
  font-size: 85%;
  text-shadow: 0 2px 8px hsl(0,0%,0%);
  font-style:italic;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  vertical-align: middle;
}

app-nav .app-nav-icon
{
  width: 1.1em;
  height: 1.1em;
  flex: none;
  filter: drop-shadow( 0 2px 4px hsl( 0, 0%, 0%, 0.6 ) );
}

app-nav .app-nav-icon-roject
{
  width: 1.4em;
  height: 1.4em;
  border-radius: 3px;
}

app-nav a:hover
{  
  text-shadow: 0 0px 8px hsl(202.7, 95%, 68.4%);
  opacity: 1;  
}


@media ( orientation:portrait )
{
  app-nav
  {
		text-align: center;  
    padding: 1em 0em 1.5em 0em;
    font-size: 80%;
  }
}

@media ( orientation:landscape )
{
  app-nav
  {
		text-align: center;
    padding: 1em 2em 1em 0em;
    font-size: 90%;
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 1;
    background: linear-gradient(180deg, hsla(228, 6.7%, 14.7%, 0.75) 0%, hsla(224.3, 36.8%, 22.4%, 0.75) 100%);
    box-shadow: 0 0 25px hsl(0, 0%, 0%,0.75);
    backdrop-filter: blur(8px);

  }
  
  app-nav left-side
  {
    display: block;
    float: left;
    padding-left: 2em;
  }
  
  app-nav right-side
  {
    display: block;
    float: right;
    padding-right: 2em;
  }
}