body{
  background: black;
  color:white;
}
.grid-container > div{
    /*
    font-size: 32px;
    color: red;
    border: 4px black double;*/
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.grid-container{
    display: grid;
    /*grid-template-columns: repeat(3, 300px);*/
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-template-rows: auto-fit;
    /*grid-gap: 20px;*/
    

    /*grid-auto-rows: 300px;
    grid-auto-flow: column;
    grid-auto-columns: 300px;*/
}

.grid-box-1{
  text-align: center;
  background: darkred;
  padding-top: 10px;
  
}

.grid-box-1 img{
  float: left;
  padding-left: 10px;
  padding-right: 0px;
  margin-right: 0px;
}

@media screen and (min-width:600px){
    .grid-box-7{
    /*put it in a specific spot*/
    grid-column: 2;
    grid-row: 2;
    background-color: yellow;}

    .grid-box-2{
    /*make it span a couple slots
    grid-column: 2/span 2;*/
    grid-column: 2 / -1;}

    .grid-box-3{
    /*negative means it counts from the last value. -1 will be the end*/
    grid-row: 2 / -1;}
    
    .grid-container{
      grid-template-rows: 75px repeat(4,250px);
    }
}

h1{
  padding: 0px;
  margin:0px;
}

p{
  padding: 0px;
  margin: 0px;
}

/*nav spice*/ 
nav{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: darkred;
}
nav a{
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration: none;
    font-weight: bold;
    font-size: xx-large;
    padding: 20px;
    border-bottom: 1px black dashed;
    text-align: center;
}

nav a:hover{    background-color: maroon;   }
nav a:active{    background-color: black;   }
body{   margin:0px; }

@media screen and (min-width: 600px){
    nav{
        justify-content: right;
        flex-direction: row;
    }
    nav a{
        border:none;
        
        border-right: 1px black dashed;
    }
   
}