html, body
{
   background-attachment: fixed;
   background-image:      url('img/back.png');
   background-size:       cover;
   width:       100%;
   height:      100vh;
   margin:      0px;
   padding:     0px;
   font-size:   16px;
   font-family: Helvetica;
}

*
{
   box-sizing: border-box;
}

*:active 
{
   outline:none;
}
 
#content
{
   display:               grid;
   grid-template-columns: 1fr;
   grid-template-rows:    auto;
   height:                100%;
}

#menu
{
   display:               flex;
   flex-direction:        row;
   grid-template-columns: max-content auto max-content;
   grid-template-rows:    auto;
   column-gap:            20px;
}
      
#menu a
{
   line-height:50px;
   text-decoration:none;
   font-variant: small-caps;
   font-size:    clamp( 1rem, 1vw, 1.5rem);
   display: block;
}

#menu a:hover 
{
   background-color: rgba(0,0,0,0.1)
}

main
{
  display:inline-block;
  margin:0px;
  height:100%;
}
    
.logo
{
  grid-column: -3;
}

.menu
{
  grid-column: 1;
}
  
.page
{
   display:      none;
   padding-left: 20px;
   padding-top:  20px;
   margin:       0px;
   height:       100%;
}
      
.page h1
{
   margin:0px;
}
      
.default
{
   display:block;
}
      
:target
{
   display:block;
}
      
:target ~ .default
{
   display:none;
}