@font-face{
 src: url(font/SyneMono-Regular.ttf);
 font-family: myFont; 
}
#myPage{


 background-color: #102037 !important;
  width: 100% !important;
  font-family: myFont !important; 

}
header{
 
 
  background-color: #102037 !important;
  background-size: cover !important;
  box-shadow: none !important;
  
}
.navbar-item > a{
 color:  rgb(189, 182, 182) !important;
}


footer {
  color: #102037 !important;
  background-color: #dfe3ff !important;

}

#moon { 
  width: 100%; 
  height:700px;
  background: url(images/moon.jpg) center center no-repeat;
  background-size:cover; 
  margin:0 auto;
  }

h2{
  font-family: myFont !important; 

}

.myGrid { 
 
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);

}

.box1{
   background-color: #dfe3ff;
   border-style:solid;
   padding-left: 5%;
   padding-right: 5%; 
   text-align: center;
  
}
.box2{
  background-color:#fbd52c;
  border-style:solid;
  padding-left: 5%;
  padding-right: 5%;
  text-align: center; 
  
}


.box3{
  background-color:#dfe3ff;
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  border-style:solid;
  padding-left: 5%;
padding-right: 5%; 


}

.box4{
  background-color: #fbd52c;
  grid-column-start: 1;
  grid-column-end: 3;
 border-style:solid;
 padding-left: 5%;
 padding-right: 5%; 

  
}



a{
  color: #102037 !important;


}



li > a:hover{
  text-shadow:0.05em 0.05em 0.2em #fcfafacc !important;
  border: 0;
  
}



    
    
    #myFace {
        padding-top:80px;
        

         transform:scale(.1) translate(-1000px, -1900px);

        height:800px;
        width: 450px;
        background:url(images/alien.png) no-repeat center center;
        animation-name: squarePath;
        animation-duration: 6s;
   
        
        }
        
        @keyframes squarePath {
        
        100% {
          
        transform: translate(50px, 0);
        
        }
        
        75% {
        
        transform: translate(100px);
        
        }
        
        50% {
        
        transform: translate(500px);
        
        }
        
        100% {
        
        transform: translate(2000px);
        
        }
        
        }

    @media (min-width:200px) and (max-width:1000px)  { 

      .box3{
        grid-row-start: 2;
        grid-column-start: 2;
        grid-column-end: 2;
        
      }
    }
    @media (min-width:200px) and (max-width:1000px)  { 

      .box4{
        grid-column-start: 1;
       grid-column-end: 1;
      
        
      }
    }
    @media (min-width:200px) and (max-width:1000px)  { 

      .myGrid{
        padding-right: 2%;
      
      gap:0
      
     
        
      }
    }