/* VARIABLES */
/* NAV */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* FOOTER */
.footer {
  width: 100%;
  height: 60px;
  background: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
/* BOX MIXIN */
/* BOXES */
.red-box {
  background: red;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 8px;
}
.blue-box {
  background: blue;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  border-radius: 8px;
}
.green-box {
  background: green;
  width: 250px;
  height: 250px;
  border: 2px solid black;
  border-radius: 8px;
}
.purple-box {
  background: purple;
  width: 50px;
  height: 50px;
  border: 2px solid black;
  border-radius: 8px;
}
/* MAIN */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #bfbfbf;
}
.content {
  padding-top: 70px;
  padding-bottom: 40px;
}
.box-area {
  height: 420px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}