/* Mobile Layout: 480px and below. */
/*mobile device rules display under 767 pixels*/
* {
  box-sizing: border-box;
}
html {
  background-color: #ffffff;
  font-family: trebuchet, geneva, sans-serif;
}
img,
video,
embed {
  max-width: 99%;
  float: right}
img,video,embed {display:block;margin:auto}
aside{text-align: center;}
img,video,embed,iframe{border-style:solid;color:#545422ff}
p{margin:20px;}
main,
section,
article,
aside,
footer,
header {
    padding: 0.5rem;
}
figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2px 1px;
}
figcaption {
  margin-top: 50px;
  font-size: 15px;
  color: #3d2020;
  text-align: center;
  text-decoration: underline;
}


header,
footer {
  background-color:#eda3cb ;
  color: #3d2020;
  text-align: center;
flex-wrap: wrap;
     width: 100%;
  box-sizing: border-box;
  padding: 20px; /* optional, for inner spacing */
    
   
}
article {
  border-bottom: 1px #000000 solid;
}
aside {
  background-color:#f7f7f7;
}
h1,
h2,
aside {
  text-align:center;
}
image {float: right;display: flex}
/* default navigation values */

nav ul {
  display: flex;
  flex-direction: column;
  background-color: #ffc5e5;
  margin: 1px;
  border: solid 1px #000;
  padding-left: 1px;
}
nav ul li {
  flex: auto;
  list-style-type: none;
}
nav ul li:nth-child(5) {
  border-right: none;
}
nav ul li a {
  display: block;
  background-color: #eda3cb;
  color: black;
  text-decoration: none;
  text-align: center;
  padding: 8px;
}
nav ul li a:hover {
  color: #31001e;
  background-color: #f9ff37;
}
body,
p,
a,
h4 {
  font-size: 15px;
}
/* the rules below adjust and override the properties of the rules above to change the page's appearance when displayed on a wider screen. These rules are designed for a two-column tablet display*/
@media screen and (min-width: 768px) {
  body {
    display: flex;
    flex-direction: column;
    max-width: 97%;
    margin: auto;
       width: 100%;
  box-sizing: border-box;
  padding: 20px; 
  }
  main {
    display: flex;
    border-right: solid #000000 1px;
    border-left: solid black 1px;
    flex-wrap: wrap;
  }
  nav,
  header {
    order: -1;
  }
  nav ul {
    flex-direction: row;
  }
  nav ul li {
    border-right: solid 1px #ffffff;
  }
  article {
    flex: 50%;
    border-right: solid #000000 1px;
    border-bottom: solid black 1px;
  }
  article:nth-child(2) {
    border-right: none;
  }
  article:nth-child(3) {
    border: none;}
}

@media (min-width: 1025px) {
	header {
		flex-direction: row;
		justify-content: space-between;
	}
  #section_one{
    flex-basis:34%;
  }
    #section_two{
    flex-basis:34%;
  }
  aside{
    flex-basis:26%;
  }
  #fixed_size{
    width:1800px;
    height:500px;
    overflow:auto;
    margin-left:auto;
    margin-right:auto;
  }
}table,td,th{
  padding:15px;
  border-spacing:15px;
  border:solid 1px;
  border-collapse:collapse;
 width: 100%;
  box-sizing: border-box;
}
td
{
  border:solid 1px;
}
th
{
  border-bottom:double 4px;
}

tr:nth-child(2n) {
   background-color:#ffcfe5;
 width: 100%;
  box-sizing: border-box;
}
tr:hover  {
    background-color: #feffd6;
    color:#3d2020;
     width: 100%;
  box-sizing: border-box;
}
tbody {background-color: #ffb1ef;
}
th{color:#210000
; background-color: #7685ff
}