/* Mobile Layout: 480px and below. */
html, body{
  box-sizing: border-box;
  height: auto;
}

h2, h3, a {
	color: #34495e;
}
img, object, embed, video, iframe {
 max-width: 100%;
 margin-left: auto;
 margin-right: auto;
}


/*Container layout rules*/
#column_layout {
    display: flex;
    flex-wrap: wrap;
    height: 57%;
}
section, aside {
    padding:0.3em;
    margin: 0.6em;
    border: groove 2px rgba(0, 0, 0, .8);
}
#single_column{
    flex-basis:46%;
  }
#section_one{
  flex:1;
}
#section_one{
  flex:2;
}
aside{
  flex:3;
}

/*Table Rules*/
caption {

  caption-side: top;
  padding: 10px;
}

table {
    max-width: 970px;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    padding: 2%;
    border: 1px solid #660000;
    border-collapse: collapse;
}
thead {
    font-weight: bold;
}

th {
    color: rgb(255, 255, 255);
    background-color: rgba(150, 45, 62, 1);
    text-align: center;
}
td, th{
      display:inline-table;
      width:auto;
      height: auto;
      text-align: center;
}
td {
    border-bottom: 1px solid #660000;
}
td>a {
    color: rgba(150, 45, 62, 1);
}
.alternate tr {
    color: rgba(62, 136, 153, 1);
    background-color: rgba(255, 248, 210, 1);
}
.alternate tr:nth-child(2n) {
    background-color: rgba(62, 136, 153, 1);
    color: rgba(255, 248, 210, 1);
}
.alternate tr:nth-child(2n):hover  {
    background-color: white;
    color: black;
}
.alternate tr:hover {
    background-color: white;
    color: brown;
}
/* ================================= 
  Media Queries
==================================== */
@media (min-width: 344px) {
	.header,.main-nav{
		display: flex;
	}
  td, th{
    display:table-cell;
    flex-shrink: 1;
    flex-direction: row;
  }
  td {
    border: 1px solid #660000;
}
#column_layout {
    flex-direction:row;
    flex-wrap:wrap;
    height:100%;
    flex-basis:100%;
  }
  #section_one,#section_two{
    flex-basis:48%;
  }
  aside{
    flex-basis:98%;
  }
	.header {
		flex-direction: column;
		align-items: center;
		width: 80%;
		margin: 0 auto;
		max-width: 1150px;
	
	}
}

@media (min-width: 1025px) {
	.header {
		flex-direction: row;
		justify-content: space-between;
	}
  #section_one{
    flex-basis:34%;
  }
    #section_two{
    flex-basis:32%;
  }
  aside{
    flex-basis:26%;
  }
  #fixed_size{
    width:1800px;
    height:500px;
    overflow:auto;
    margin-left:auto;
    margin-right:auto;
  }
}


table,td,th{
  padding: 8px;
  border-spacing: 10px;
  border:solid 1px;
  border-collapse:collapse;
}
td {
  border:solid 1px;
}
th
{
  border-bottom:double 4px;
}
tr:nth-child(2n) {
   background-color:coral;
}
tr:hover  {
    background-color: grey;
    color: charcoal;
}

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}