body {
  background-color: rgb(148, 178, 202);
  font-family: Didot,Didot LT STD,Hoefler Text,Garamond,Times New Roman,serif; ;
}

.contents {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

h1 {
text-align: center;
font-size: 2em;   
}

p {
  font-size: 1em;
}

.credits {
  font-size: .7em;
}

.work_area {
  height: 60%;
  content: none;
  padding: 2%;
  border: 1px solid gray;
  background-color: rgb(240, 227, 211);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
}

.mondrian_box {
  width: 40vh;
  height: 40vh;
  margin: 5px;
  outline: 3px solid black;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto;
}

.box {
  background-color: white;
  border: 3px solid black;
}

.palette {
  width: 35vh;
  margin: 10px;
  display: flex;
  justify-content: space-between;
}

.color_box {
  height: 6vh;
  width: 6vh;
  border: 2px solid black;
}

.color_box:hover {
  border: 3px solid black;
  margin: -1px
}

#color1 {
  background-color: red;
}

#color2 {
  background-color: blue;
}

#color3 {
  background-color: yellow;
}

#color4 {
  background-color: white;
}

button {
  margin: 5px;
}