.box-model {
  position: relative;
  display: inline-block;
}
.box-model.parent {
  display: block;
  width: 100%;
  min-width: 500px;
  min-height: 350px;
  height: 0;
  padding-bottom: 61.8%;
  background-color: ivory;
  box-sizing: border-box;
  /* Play with all these values, and especially the values below */
  font-size: 20px;
  border-style: inset;
}
.box-model.red {
  background-color: red;

  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 50px;

  border: 5px inset red;

  margin: 60px;
}
.box-model.green {
  width: 0;
  height: 0;

  background-color: green;

  padding: 6em 7em 4em 3em;

  border: 10px dotted palegreen;
  border-top-color: darkgreen;
  border-bottom-color: rgba(192, 255, 192, 0.5);
  border-radius: 100em;

  margin: 0.5em;
}
.box-model.blue {
  display: block;

  background-color: blue;
  padding: 1% 2% 3% 40%;

  border-style: solid;
  border-width: 15px 5px;
  border-color: lightblue;
  border-radius: 16px 0 2em;

  margin: 1% 5%;
}

.orange {
font-weight: bold;
color: #ff7f00;
}

.yellow {
font-weight: bold;
color: #dd0;
}

.cyan {
font-weight: bold;
color: #099;
}

.magenta {
font-weight: bold;
color: #909;
}

.rgb {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 0;
  margin: 1em 0;
  padding-bottom: 30.9%; 
  left: 14%;
}
.rgb ~ .rgb {
  left: -14%;
  top: 1em;
}
.rgb.red {
  background-color: #f00;
}
.rgb.blue {
  background-color: rgba(0,0,255,0.5);
}