/* CSS Document */
/* Universal Selector Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* End Reset */
body {
  background-color: #d5d7ff;
  min-height: 100vh;
  text-align: left;
  font: 12px/1em "Lucida Grande", Lucida, Verdana, sans-serif;
}

#wrapper {
  margin: 0 auto;
  width: 960px;
}

h1 {
  font-size: 1.5em;
  color: #639;
  margin-bottom: 1.5em;
}

h2 {
  font-size: 1.3em;
  line-height: .5em;
  margin-bottom: 1em;
}

h3 {
  font-size: 1.1em;
}

header {
  width: 900px;
  padding: 20px;
}

main {
  width: 900px;
  padding: 20px;
}

nav {
  background-color: #000;
  padding: 15px;
  width: 900px;
  height: 40px;
}

.headernav {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.1em;
  white-space: nowrap;
  display: inline;
  list-style-type: none;
  padding-right: 1.5em;
}

.headernav a {
  color: #FFFFFF;
}

#painting {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  height: 400px;
  background-color: #fff4db;
  box-shadow: 10px 10px 0px #8d8d8d;
}

#toprow {
  height: 290px;
}

:root {
  --red: #ff6f69;
  --blue: #3e42ec;
  --yellow: #eee352;
  --black: #535054;
}

#bigbox {
  height: 290px;
  width: 290px;
  background-color: var(--red);
}

.right {
  float: right;
}

#divider1 {
  height: 290px;
  width: 10px;
  background-color: var(--black);
}

.mediumbox {
  height: 140px;
  width: 100px;
}

#divider2 {
  height: 10px;
  width: 100px;
  background-color: var(--black);
}

#middlerow {
  height: 10px;
  width: 400px;
  background-color: var(--black);
}

#bottomrow {
  height: 100px;
  width: 400px;
}

.smallbox {
  width: 20px;
  height: 45px;
}

.yellow {
  background-color: var(--yellow);
}

#divider3 {
  width: 20px;
  height: 10px;
  background-color: var(--black);
}

#lowerright {
  width: 20px;
  height: 100px;
}

.divider4 {
  width: 10px;
  height: 100px;
  background-color: var(--black);
}

#widebox {
  width: 260px;
  height: 100px;
}

#smallbluebox {
  width: 100px;
  height: 100px;
  background-color: var(--blue);
}