body  {
    background-color: #FFFFFF;
    color:#666666;
    font-family: Verdana;
    background-image: linear-gradient(to bottom, #eeeeee, #ffffff);
    background-attachment: fixed;
    margin: 0;
}

main    {
    padding: 0;
    display: block;
    background-color: #FFFFFF;
    grid-row: 3/8;
    grid-column: 2/8;
}

p   {
    padding: 10px;
}

table   {
    margin: 0 auto;
    border: none;
    width: 100%;
    border-collapse: collapse;
}

td,th   {
    padding: 10px 5px;
    border: none;
    color: black;
    font-family: "Open Sans";
}

td  {
    text-align: left;
}
td a {
    text-decoration: none;
    color: black;
}

.text:hover   {
    text-align: left;
    text-decoration: underline;
}

*{box-sizing: border-box;}
            
header  {
    background-color: #FFC4CD;
    color: black;
    font-family:"Title";
    font-size: 30px;
    grid-row: 1/2;
    grid-column: 2/8;
}

header h1 {
    vertical-align: middle;
    line-height: 200%;
    text-align: center;
    height: 100px;
    margin: 0;
}

header a {
    color: #191919;
    text-decoration: none;
}

@font-face {
  font-family: "Open Sans";
  src: url("Fonts/Metropolis-Regular.otf")
}

@font-face {
  font-family: "Title";
  src: url("Fonts/GiddyupStd.otf")
}

nav {
    position: sticky;
    top: 0;
    grid-area: 2/2/3/8;
    background-color: #BAE0BA;
}

nav a   {
    text-decoration: none;
    color: black;
    padding: 1rem 1rem;
    display: block;
    text-align: left;
    font-family: "Open Sans";
    font-size: 1.5rem;
}

nav a:hover {
    text-decoration: underline;
}

nav ul  {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-flow: row nowrap;
    vertical-align: middle;
}

nav ul li   {
    width: 100%;
}

.icon   {
    max-width: 20px;
    max-height: 50px;
}

h2  {
    color: #424242;
    font-family: "Open Sans";
    background-color: #FFC4CD;
    margin: 0;
    padding: 12px 10px;
    color: black;
    text-align: center;
}

footer {
    font-size: .9em;
    text-align: left;
    padding: 1em;
    background-color: #FFFFE5;
    grid-area: 8/2/9/8;
}

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

#pinkbar {
    background-color: #FFC4CD;
    grid-row: 1/2;
    grid-column: 1/9;
}

#optionsbar    {
    background-color: #BAE0BA;
    grid-area: 2/1/3/9;
    
}

#headerbar  {
    background-color: #FFC4CD;
    grid-area: 3/1/4/9;
}

#collection {
    background-color: #FFC4CD;
    grid-area: 5/1/6/9;
}

.flex-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content:center;
    padding: 10px;
    justify-content: space-around;
}
.flex-container2 {
    display: flex;
    flex-flow: row nowrap;
    justify-content:center;
    padding: 10px;
    justify-content: space-around;
}

@media only screen and (max-width: 992px)  {
    
#wrapper  {  grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 768px)) minmax(0px, 1fr);}
    
}

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

#wrapper  {  grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 768px)) minmax(0px, 1fr);}
}

.column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}