/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
* {
  box-sizing: border-box;
}

div {
  border: double DarkRed;
}

body {
  background-color: Salmon;
  background-image: url("fabric-of-squares.png");
  color: black;
  font-family: American Typewriter, Courier Prime, Serif;
  text-align: center;
  margin-top: 10px;
  margin-left: 250px;
  margin-right: 150px;
  
  
}

viewport {
  padding-top: 62.5%; 
}  

/* creates the flex boxes */
section {
  display: flex;
  align-items: start
}
/* flex box for navigation */
nav {
  flex: 3;
  background: Crimson;
  border: 5px double DarkRed;
  padding: 2px;
  margin-right: 15px;
}
/* flex box for main contents, can be combined together to get 2 more space */
article {
  flex: 7;
  background-color: Ivory;
  border: 5px double DarkRed;
  padding: 8px;
}
/* far right small flex box */
photoholder {
  height: 70;
  width: 70;
  background: Crimson;
  border: 5px double DarkRed;
  margin-left: 15px;
  max-height:415px;
}
/* box for placing images */
photoholder_trans {
  flex: 3;
  border: 5px double DarkRed;
  margin: 15px;
  max-height:700px;
   position: absolute;
}

li {
  text-align: left;
}