* { box-sizing: border-box; }

#wrapper{
    display:grid;
    grid-auto-rows:minmax(0px,auto);
    grid-template-columns:minmax(0px,1fr) repeat(6, minmax(0,175px)) minmax(0px,1fr);
}
body{
    margin:0px;
    padding:0px;
    background-attachment: fixed;
    background:linear-gradient(#F7ADAF 0%,#fff 12%,#fff 85%,#F7ADAF 100%); 
}
header {
    grid-column:2/-2;
    grid-row:1/2;
}
header div{
    display:flex;
    margin:auto;
}

 nav{
    font-size:2rem;
    grid-column:3/7;
    grid-row: 2/3;
 }
 nav ul {
    padding:0;
    margin:0;
    display:flex;
    flex-flow:row nowrap;
 }
 nav ul li{
    width: 100%;
    list-style-type:none;
 }
 nav a {
    text-decoration:none;
    padding: 1rem;
    color:#8D5439;
    display:block;
 }
 nav a:hover{
    color:#6f2a9f;
 }
main {
    grid-column:2/8;
    grid-row:3/4;
    padding-left:1rem;
    padding-right:1rem;
}
main a {
    text-decoration:none;
    color:#000;
}
main a:hover{
    color: #6f2a9f;
}
footer {
    grid-column:2/8;
    grid-row:4/5;
}
footer p {
    text-align:right;
}

#logo {
    background-image: url("images/logosmol.png");
    width:450px;
    height:300px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#content {
    display:inline-flex;
    flex-flow:row wrap;
    row-gap:1rem;
    width:60%;
}
#contact {
    display:inline-flex;
    font-family: 'Dancing Script', cursive;
    font-size:3rem;
    margin:auto;
    padding-top:1rem;
}

.cats{
    display:inline-flex;
    flex-flow:row wrap;
    float:right;
    width:40%;
    row-gap:1rem;
    text-align:center;
}
#gengar {
    background-color:#dabaed;
    height:300px;
    width:250px;
    padding-left:1rem;
}
#stocking {
    background-color:#E4A3A6;
    height:300px;
    width:250px;
    padding-left:1rem;
}
#squares {
    background-color:#9ca8e6;
    height:300px;
    width:250px;
    padding-left:1rem;
}
.pictures {
    height:100%;
    width:auto;
    margin:0;
    border:none;
    padding:0;
}


@media only screen and (max-width: 992px){

   nav{
        grid-column:2/-2;
    }

    nav a {
        text-align:center;
    } 

    #wrapper {
        grid-template-columns:minmax(0px,1fr) repeat(6, minmax(0,768px)) minmax(0px,1fr);
    }
    main{
        grid-column:2/-2;
        grid-row:3/4;
        
    }
    #content {
        display:inline-flex;
        flex-flow:row wrap;
        row-gap:0;
        width:100%;
        padding-top:1rem;
    }
   .pictures{
    margin-left:auto;
   }
   #gengar,#stocking,#squares{
    margin-right:auto;
   }
   .break {
    flex-basis: 100%;
    height: 0;
  }
   

    .cats{
        display:flex;
        flex-flow:column wrap;
        float:none;
        padding-top:1rem;
        row-gap:0;
        width:100%;
    }
    .cats img, .cats a{
        margin:auto;
    }
    footer{
        padding-right:1rem;
    }

}

@media only screen and (max-width: 768px){
    #wrapper {
        grid-template-columns:minmax(0px,1fr) repeat(6, minmax(0,100%)) minmax(0px,1fr);
    }
    nav {
       position:static;
       grid-row:2/3; 
       grid-column:2/-2;
    }
    nav ul{
        position:static;
        flex-flow: column wrap; 
    }
    #content {
        display:inline-flex;
        flex-flow:row wrap;
        row-gap:0px;
        width:100%;
    }

    #gengar, #stocking, #squares {
        height:300px;
        width:300px;
        
    }

}
@media only screen and (max-width: 650px){
    .pictures,#gengar,#stocking,#squares{
        margin:0 auto;
    }
}