html {
  box-sizing: border-box;
  font-size: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
section, aside, div {
  padding: 20px;
  border-radius: 12px;
}
body {
	background: #E7D4AB;
	font-family: 'Century Gothic', sans-serif;
}
header {
	background-color: #F4F4DB;
  	text-align: center;
  	padding: 20px;
}
.topnav {
  overflow: hidden;
  background-color: #AF6E4D;
  size: 40px;
}
.topnav a {
  float: left;
  display: block;
  color: #F4F4DB;
  text-align: center;
  padding: 4px 6px;
  text-decoration: none;
}
.topnav a:hover {
  background-color: #BD8B65;
  color: white;
}
.flex-container {
  @media (min-width: 56.25em){
    display: flex;  
  }
}
.main-content {
  flex: 1; 
}
.sidebar {
  flex: 0 0 300px;
  background-color: #CBA271;
}
.links {
	color: #F4F4DB;
}
input {
  width: 300px;
}
button {
  width: 300px;
  height: 50px;
}
#total-width, #total-length {
  font-weight: bold;
}
.calclist a {
  display: block;
  color: #af6e4d;
}
.calclist a:hover {
  background-color: #BD8B65;
  color: white;
}