/*mobile device rules display under 767 pixels*/
* {
  box-sizing: border-box;
}
html {
  background-color: #ffe4f1;
  font-family: trebuchet, geneva, sans-serif;
}
img,
video,
embed {

  float: right}
img,video,embed {max-width: 600px;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;
}
aside {
  background-color: #f8eded;
  color: #3d2020;}
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;
   
}
article {
  border-bottom: 1px #000000 solid;
}
aside {
  background-color: #f8eded;
  color: aliceblue;
}
h1,
h2,
aside {
  text-align:center;
}
image {float: right;display: flex}
/* default navigation values */
nav {background-color: aliceblue}
nav ul {
  display: flex;
  flex-direction: column;
  background-color: #ffc5e5;
  margin: 1px 1px;
  border: solid 1px #000;
  padding-left: 1px;
  list-style-type: none
}
nav ul li {
  flex: auto;
  position: relative
}
nav ul li:nth-child(5) {
  border-right: none;
}
nav ul li a {
  display: block;
  background-color: #eda3cb;
  color: black;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 8px;
}
nav ul li a:hover, nav a:active, nav a:focus {
  color: #31001e;
  background-color: #f9ff37;
}
nav a.thispage
{background-color: #f9ff37;
font-weight: 800;}

.dropdown > li > ul {
  display: none;
  position: absolute;
  margin-top: 1px;
  padding: 1px;
  z-index: 2;
  width: 40%;
}
.dropdown li ul li {
  border-right: solid 1px #000;
}
.dropdown > li:hover > ul {
  display: block;
}
@media screen and (min-width: 768px) {
  nav ul {
    flex-direction: row;
  }
  nav ul li {
    flex: auto;
  }
  .dropdown > li > ul {
    width: 100%;
  }
}
Resources
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;
  }
  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;
  }
  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 three-column desktop display*/
@media screen and (min-width: 1028px) {
  article {
    flex: 36%;
    border-bottom: none;
  }
  article:nth-child(2) {
    border-right: solid #000000 1px;
  }

  article:nth-child(3) {
    border-right: none;
  }
  body,
  p,
  a,
  h4 {
    font-size: 16px;
  } }