*, *::before, *::after {
  box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active { 
  color: #804033;
}

#container {
  width:768px;
  height:600px;
}

iframe {
  border: none;
  width: 100%;
  min-width: 342px; 
  max-width: 1100px;
  height: 100%;
  resize: both;
  -webkit-box-shadow:0 8px 6px -6px rgba(0, 0, 0, 0.4),8px 0 6px -6px rgba(0, 0, 0, 0.4),-8px 0 6px -6px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0 8px 6px -6px rgba(0, 0, 0, 0.4),8px 0 6px -6px rgba(0, 0, 0, 0.4),-8px 0 6px -6px rgba(0, 0, 0, 0.4);
  box-shadow:0 8px 6px -6px rgba(0, 0, 0, 0.4),8px 0 6px -6px rgba(0, 0, 0, 0.4),-8px 0 6px -6px rgba(0, 0, 0, 0.4);
}

.wrapper {
  display: flex; 
  justify-content: center; 
}

.wrapper > * { 
  flex-grow: 1; 
  flex-shrink: 1;
}

.wrapper nav { 
  flex-basis: 15%;
}

.wrapper section { 
  flex-basis: 85%;
 }

nav ul { 
  list-style-type: none;
}

nav li { 
  margin-bottom: 7px;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}