/*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: 16px;
    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;
    }
   
}*/

body{   
  margin:0px; 
  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;
    border-bottom: 3pt #FF9B42 solid;
    /*grid-gap: 20px;*/
    

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

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

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


/*nav spice*/ 
nav{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: black;
}
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 white dashed;
    text-align: center;
}

nav a:hover{    background-color: maroon;   }       nav a:active{    background-color: black;   }


.grid-box-1 h1,
.grid-box-1 p{
  padding: 0px;
  margin:0px;
}




.articles{
    display: flex;
    flex-wrap: wrap;
    /*flex-direction: column;*/  /*changes order of boxes*/
    padding: 5px;
    justify-content: center;
        /*can also use flex-start, flex-end, center, space-between, space around, and space-evenly*/
    
}






.number{
    flex: 1 1 100px;
    height:300px;
    
    /*grow value, shrink value, basis size*/
}

.article img{
    width:auto;
    height:100%;
}


@media screen and (min-width:600px)/*big screen stuff*/{
    
    .grid-box-2{  /*make it span a couple slots*/    grid-column: 2 / -1; }       
    .grid-container{  grid-template-rows: 75px;    }        
    .grid-box-1 img{  float: left; align-content: none; } 
    
    nav{  justify-content: right; flex-direction: row;
    }
    nav a{  border-bottom:none; border-right: 1px white dashed; }
    
}

article{
    width: 200px;
    height: auto;
}





gallery{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /*flex-direction: column;*/  /*changes order of boxes*/
    padding: 5px;
    justify-content: center;
        /*can also use flex-start, flex-end, center, space-between, space around, and space-evenly*/
    
}

box{
    height: 400px;
    width: auto;
    margin:5px;
    
    /*grow value, shrink value, basis size*/
}

box img{
    height: 100%;
    width:auto;
}