:root{
    --primary: #000;;
    --dark: #1472ac;
    --medium: #11a9c9;
    --pale: #9dd4f1;
    --light: #10d4e3;
    --white: #fff;
    --shadow: 0 1px 5px rgba(104,104,104, 0.8);
    
    }
    
    * {
    
    padding: 0px;
    margin: 0px;
    text-decoration: none;
    }
    


    html {
    
    box-sizing: border-box; /* padding won't affect element width */
    font-family: 'Raleway', sans-serif;
    color: var(--white);  
    }
    
    body{
    background: var(--primary);
    line-height: 1.4;
    }
     video{
        max-width: 100%; /* keep video inside container but allow to shrink for phone */
        
        }
    img{
        max-width: 100%; 
        }
    a {
      color: var(--light);
    }
    
            
    a:hover {
            background: var(--pale);
            color: var(--dark);
            }
   
     h1{
        font-size: 32px;
        }
 /* Navigation*/

 
        
        .main-nav{
        display: flex;
        justify-content: space-between;
        
        }
        
        .main-nav ul{
        
        display: grid;
        grid-gap: 10px;
        padding: 0;
        list-style: none;
        grid-template-columns: repeat(4, 1fr);
        }
        
        .main-nav li a{
        box-shadow: var(--shadow);
        }
        
        .main-nav a{
        background: var(--primary);
        display: block;
        padding: 0.8rem;
        text-align: center;
        color: var(--pale);
        text-transform: uppercase;
        
        }
        
        .main-nav a:hover{
        background: var(--gold);
        color: var(--dark);
        }
        
        .main-nav .icon{
        display: none;
        }

.wrapper{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  
    }
    
    /* Banners  */
.banner, .bannerW{
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 25px;
  }
  .banner h1, 
  .bannerW h1,
  .bannerW p,
  .banner p {
    
    text-align: center;
    max-width: 42rem;
    padding-bottom: 1rem;
  }
   /* Content  */
    .textBox{
    background: white;
    color: black;
     grid-column:span 2;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 10px;
    }
    
    .holdBox{
    grid-column:span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    
    }
    .holdBox li{
      list-style: none;
    }
    /* boxes */


    .launch{
      color:hotpink;

    }
     footer {  
    grid-column: span 4;
    color: var(--pale);
    font-weight: 300;
    text-align: center;
    padding: 2rem;
    }
    @media all and (max-width: 600px) { /* controls menu on phone */
    /* Header*/
.main-nav{
flex-direction: column;
}
.main-nav ul{
	width: 100%;
	grid-template-columns: 1fr; /*fill screen with one fraction*/

}
	.main-nav li {
    display: none;
  }
	
	.main-nav .icon{
	display: block;
	position: absolute;
    right: 0;
    top: 0;
	}


  .main-nav.responsive a.icon {
  	display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  .main-nav.responsive li {
    float: none;
    display: block;
    text-align: center;
  }

  .boxes{
    display: grid;
    grid-template-columns: repeat(2, 1fr);

  }
  
   .wrapper{
        grid-template-columns: repeat(2, 1fr);
        
        }
     .banner, .bannerW{  
          grid-column: span 2;
          
          }
    footer {  
    grid-column: span 2;
    
    }
  } /* closes media */