@import "duck_1.css";
*{
    box-sizing: border-box;
}
body{
    margin: 0 0 0 0;
}
.grid-container {
    margin-top: 0px;
    display: grid;
    height: 100vh;
    grid-template-columns: 100% ;
    /*grid-template-rows: 7% 83% 10%;*/
    grid-template-rows: 50px 50px auto 60px;
     grid-gap: 0px;
   background-image: url(../images/space.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   margin: 0%;
   background-attachment: fixed;

    padding: 0px;
  }

  .grid-container > div {
    text-align: center;

    padding: 0px 0;
    /*font-size: 20px;*/
  }
  
  .item1 {
    /*font-size: 4vh;*/
    font-size: 24px;
    text-align: center;
    color: rgba(245, 242, 142, 0.7); 
   /* position: sticky;
    
    box-sizing: border-box;*/
    background-color: rgba(17, 3, 71, 0.3); 
   
  }
  .item2{
   /*font-size: 4vh;*/
   /*font-size: 24px;
   text-align: center;
   color: rgba(248, 247, 239, 0.7); 
   position: sticky;
   
   box-sizing: border-box;*/
   background-color: rgba(255, 255, 255, 0.0); 
  }

  .cross:hover{
    opacity: 0.999;
  }
  /**/
  .cross{
    
     margin: 0px calc(50% - 15px);
     opacity: 0.07;
   }
   
  .item3{


    perspective: 100rem;
    position: relative;
   /*height: 40rem;*/
   height: 200px;
    max-width: 300px;
 
   margin: 15px calc(50% - 150px);

    box-shadow: none;
  background: none;

    opacity: 0.7;

    animation-name: example;
    animation-delay: 0.7s;
   animation-duration: 2s;
   animation-iteration-count: 1;

 }
 
  .item4 {
    /*
    color: rgba(250, 246, 250, 0.3); 
    font-size: 17px;
      letter-spacing: 1px;
      text-align: left;
     padding-top: 5px;
     */
    background-color:  rgba(17, 3, 71, 0.3); 
  }
 
/*--------------------------------*/
@media screen and (min-width:400px) { 
  .item1{
   
    font-size: 30px;
      letter-spacing: 1px;
       }
       .grid-container{
       background-image: url(../images/space_2.jpg);
  }
}

@media screen and (min-width: 992px) { 
  .item1{
   
    font-size: 30px;
      letter-spacing: 10px;
       }
       .grid-container{
        background-image: url(../images/space_1.jpg);
   }
}