/**************
|  style.css  |
**************/

*,
html,
body {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  text-align: center;
  margin: 20px auto;
  padding: 0;
}

html {
  background-color: lightskyblue;
  /* the font-size of the root is 16px by default */
  /* i.e. -- font-size: 16px;  */
}

.container {
  box-shadow: 2px 2px 5px #333;
  border: 3px solid black;
  background-color: snow;
  border-radius: 13px;
  padding: 10px;
  position: relative;
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.message {
  color: crimson;
  position: absolute;
  top: 0;
  right: 30px;
}

.em-parent {
  font-size: 1em; /* using em */
}

.em-child {
  font-size: 2em; /* using em */
}

.rem-parent {
  font-size: 1rem; /* using rem */
}

.rem-child {
  font-size: 2rem; /* using rem */
}