body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: white;
    margin: 0px;
}

header {
    background-color: rgb(20, 20, 155);
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align:center;
    grid-row: 0/1;
    grid-column: 1/-1
}

#wrap {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
  }

nav ul {
    list-style-type: none;
    display:flex;
    flex-flow: row nowrap;
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
}

nav {
    background-color: black;
    grid-row:3/4;
    grid-column: 1/-1;
    
}

nav a {
	color: white;
    display:block;
    text-align:center;
    text-decoration: none;
    transition-duration: .4s;
    padding: 1.5rem 0rem;
}

nav a:hover {
    background-color: white;
    color:black;
    padding: none;
}

nav ul li {
    width: 100%;
}

header a {
    text-decoration: none;
    color:white;
}

* {
    box-sizing:border-box;
}

main {
    padding-left: 2em;
    padding-right: 2em;
    display: grid;
    background-color: rgb(20, 20, 155);
    padding-top: 20px;
    padding-bottom: 20px;
    grid-row: 4/5;
    grid-column: 1/-1;
    color: white;
}

footer {
    font-size: 1em;
    font-style: italic;
    padding: 2em;
    background-color: black;
    grid-row: 5/6;
    grid-column: 1/-1;
    color: white;
}

footer ul{
    list-style-type: none;
    margin: auto;
    padding: auto;
    display:flex;
    flex-flow: row nowrap;
}

footer ul li {
    width: 100%;
    text-align:center;
}

div {
    display: grid;
}

.flex-container {
    display: flex;
    flex-wrap:nowrap;
    justify-content: center;
}

h2 {
    text-align:center;
}

#nemo {
    height: 300px;
    background-image: url('/nemo.jpg');
    background-size: cover;
    background-position: center;
    grid-row: 2/3;
    grid-column: 1/-1;
}

#aquarium {
    height: 500px;
    width: 300px;
    background-image: url('/aquarium.jpg');
    background-size: cover;
    background-position:center;
    grid-row: 1/4;
    grid-column: 3/3;
}

#twitter{
    background-image: url('/twitter-logo-final.png');
    background-size: cover;
    background-position:center;
    height: 35px;
    width: 35px;
    grid-row: -1/1;
    grid-column: 2/-2;
}

#instagram{
    background-image: url(./instagram.png);
    background-size: cover;
    background-position:center;
    height: 35px;
    width: 35px;
    grid-row: -1/1;
    grid-column: 3/4;
}

#facebook{
    background-image: url(/facebook.png);
    background-size: cover;
    background-position:center;
    height: 35px;
    width: 35px;
}


#slaterock {
    height: 200px;
    width: 200px;
    background-image: url('/slaterock.jpg');
    background-size: cover;
    background-position: center;
    grid-row: 1/-1;
}

#coral {
    height: 200px;
    width: 200px;
    background-image: url('/coral.jpg');
    background-size: cover;
    background-position: center;
    grid-row: 1/1;
}

#castle {
    height: 200px;
    width: 200px;
    background-image: url('/Castle.jpg');
    background-size: cover;
    background-position: center;
    grid-row: 1/1;
}

#bridge {
    height: 200px;
    width: 200px;
    background-image: url('/bridge.jpg');
    background-size: cover;
    background-position: center;
    grid-row: 1/1;
}

#shipwreck {
    height: 200px;
    width: 200px;
    background-image: url('/shipwreck.jpg');
    background-size: cover;
    background-position: center;
    grid-row: 1/1;
}

#plant {
    height: 200px;
    width: 200px;
    background-image: url('/plantdecor.jpg');
    background-size: cover;
    grid-row: 3/3;
    margin-top: 50px;
}

#glo {
    height: 200px;
    width: 200px;
    background-image: url('/gloplant.jpg');
    background-size: cover;
    grid-row: 3/3;
    margin-top: 50px;
}

#rock {
    height: 200px;
    width: 200px;
    background-image: url('/rock.jpg');
    background-size: cover;
    grid-row: 3/3;
    margin-top: 50px;
}

#white {
    height: 200px;
    width: 200px;
    background-image: url('/whitecoral.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3/3;
    margin-top: 50px;
}

#barrel {
    height: 200px;
    width: 200px;
    background-image: url('/barrel.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3/3;
    margin-top: 50px;
}

#guppy {
    height: 200px;
    width: 200px;
    background-image: url('/fancy.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 2/1;
    margin-top: 50px;
}

#glofish {
    height: 200px;
    width: 200px;
    background-image: url('/glo.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#goldfish {
    height: 200px;
    width: 200px;
    background-image: url('/goldfish.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#gourami {
    height: 200px;
    width: 200px;
    background-image: url('/gourami.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#molly {
    height: 200px;
    width: 200px;
    background-image: url('/Molly.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#platty {
    height: 200px;
    width: 200px;
    background-image: url('/platy.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#killifish {
    height: 200px;
    width: 200px;
    background-image: url('/killifish.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#rainbow {
    height: 200px;
    width: 200px;
    background-image: url('/rainbow.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#plec {
    height: 200px;
    width: 200px;
    background-image: url('/plec.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#tetra {
    height: 200px;
    width: 200px;
    background-image: url('/tetra.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#angel {
    height: 150px;
    width: 200px;
    background-image: url('/angel.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#blue {
    height: 200px;
    width: 200px;
    background-image: url('/blue.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#butterfly {
    height: 200px;
    width: 200px;
    background-image: url('/butterfly.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#gamma {
    height: 150px;
    width: 200px;
    background-image: url('/gamma.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#clown {
    height: 175px;
    width: 200px;
    background-image: url('/clownfish.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#puffer {
    height: 200px;
    width: 200px;
    background-image: url('/puffer.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#sea {
    height: 200px;
    width: 200px;
    background-image: url('/seahorse.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#gobby {
    height: 200px;
    width: 200px;
    background-image: url('/gobby.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#cardinal {
    height: 200px;
    width: 200px;
    background-image: url('/cardinal.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#dart {
    height: 175px;
    width: 200px;
    background-image: url('/dartfish.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#anubis {
    height: 200px;
    width: 200px;
    background-image: url('/anubis.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#java {
    height: 200px;
    width: 200px;
    background-image: url('/java.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#moss {
    height: 200px;
    width: 200px;
    background-image: url('/moss.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#wendy {
    height: 200px;
    width: 200px;
    background-image: url('/wendtii.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#lud {
    height: 200px;
    width: 200px;
    background-image: url('/ludwig.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#rot {
    height: 200px;
    width: 200px;
    background-image: url('/Rotala.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#hygro {
    height: 200px;
    width: 200px;
    background-image: url('/hygro.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#vall {
    height: 200px;
    width: 200px;
    background-image: url('/vall.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#dwarf {
    height: 200px;
    width: 200px;
    background-image: url('/dwarf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#azolla {
    height: 200px;
    width: 200px;
    background-image: url('/azolla.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#goldfishp {
    height: 200px;
    width: 200px;
    background-image: url('/goldfishfood.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#tetraf {
    height: 200px;
    width: 200px;
    background-image: url('/tetrafood.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#stress {
    height: 200px;
    width: 200px;
    background-image: url('/stress.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#test {
    height: 200px;
    width: 200px;
    background-image: url('/testkit.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#led {
    height: 200px;
    width: 200px;
    background-image: url('/led.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 1/1;
    margin-top: 50px;
}

#clip {
    height: 200px;
    width: 200px;
    background-image: url('/clip.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#salt {
    height: 200px;
    width: 200px;
    background-image: url('/salt.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#net {
    height: 200px;
    width: 200px;
    background-image: url('/net.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#pump {
    height: 200px;
    width: 200px;
    background-image: url('/pump.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

#filter {
    height: 200px;
    width: 200px;
    background-image: url('filter.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    grid-row: 3;
    margin-top: 50px;
}

a {
    text-decoration: none;
    color: white;
    transition-duration: .4s;
}

a:hover {
    color:black;
    background-color: white;
}

button {
    background-color: black;
    color: white;
    border:none;
    width: 200px;
    height: 50px;
    border-radius: 12px;
    transition-duration: 0.4s;
}

button:hover {
    background-color:white;
    color:black;
}

@media only screen and (max-width: 992px) {
    center-column{
        width:768px;
    }
}

@media only screen and (max-width: 768px) {
    center-column{
        width: 100%;
    }
    right-column{
        display: none;
    }
    left-column{
        display: none;
    }
    #aquarium {
        max-width: 100%;
        height: auto;
    }

}