* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background-color: #11DDFF;
}

#root {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.eyes {
  display: flex;
  width: 210px;
  height: 100px;
}

.eye {
  float: left;
  display: inline-block;
  background-color: white;
  height: 100px;
  width: 100px;
  margin: 5px;
  border-radius: 50%;
  position: relative;
  z-index: 3;
}

.left-brow, .right-brow {
  position: absolute;
  top: 0;
  border-radius: 5px;
  width: 100px;
  height: 25px;
  background-color: #111111;
  z-index: 5;
}

.left-brow {
  left: -15px;
  transform: rotate(-15deg);
}

.right-brow {
  right: -15px;
  transform: rotate(15deg);
}

.pupil {
  position: absolute;
  top: 35px;
  left: 35px;
  width: 30px;
  height: 30px;
  background-color: black;
  border-radius: 50%;
  border: 4px solid #11CCEE;
}
.pupil:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  background-color: white;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

#mouth {
  display: block;
  height: 50px;
  width: 30px;
  background-color: black;
  border-radius: 100%;
}