@font-face {
    font-family: Bionic;
    src: url('/BionicTypeRegular.woff2');
    src: url('/BionicTypeRegular.woff2') format('woff2');
 }
 body {
  background-image: url('/BackLighting.png'), url('/Stars.png');
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  background-attachment: fixed, relative;
  color: white;
  text-align: center;
  font-family: Bionic;
 }
 
 .grid-container {
  display: grid;
  grid-auto-columns: 10em;
  grid-auto-rows: 10em;
  gap: 1em;
  justify-content: center;
  grid-template-areas:
  "box-1 box-1 box-2 box-2"
  "box-1 box-1 box-2 box-2"
  "box-4 box-3 box-3 box-5";


 }
  img.NavBackground{

    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0;
  }
  
 .flex-container {
    display: flex;
    gap: 1%;
    
    justify-content: center;
    align-items: flex-end;
   
 }

 .item{
   padding: 2em;
  background-color: blue;
  color: white;
  text-align: center;
  border-radius: 8px;
  font-size: 2rem;
 }
 
 footer {
   bottom: 0;
 }
 

 @media(max-width: 42em){
  body {
    background-image: url('/BackLightingMobile.png'), url('/Stars.png');
    background-repeat: repeat, repeat;
    background-size: cover, auto;

  }
  
  .grid-container{
   grid-template-areas:
  "box-1 box-2"
  "box-1 box-5"
  "box-4 box-3";
  }
 
}