body {
  margin: 0;
  background: #dcdcdc;
  font-family: Arial;
}

.contenedor {
  width: 700px;
  margin: auto;
  padding-top: 20px;
}

h1 {
  text-align: center;
  color: #a00000;
  text-decoration: underline;
}

.formulario {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

input {
  width: 200px;
  height: 30px;
  border: 2px solid #4c8de8;
  margin-right: 10px;
}

button {
  padding: 8px 15px;
  background: #4c8de8;
  color: white;
  border: 3px solid orange;
  cursor: pointer;
}

.panel {
  border: 3px solid orange;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.avatar {
  width: 150px;
}

.circulo {
  width: 110px;
  height: 110px;
  background: #a5d6d6;
  border-radius: 50%;
  position: relative;
}

.cabello {
  width: 60px;
  height: 35px;
  background: black;
  position: absolute;
  top: 20px;
  left: 25px;
}

.cara {
  width: 55px;
  height: 60px;
  background: #d9a066;
  position: absolute;
  top: 40px;
  left: 28px;
  border-radius: 0 0 50% 50%;
}

.cuello {
  width: 15px;
  height: 20px;
  background: #d9a066;
  position: absolute;
  top: 85px;
  left: 45px;
}

.ropa {
  width: 70px;
  height: 50px;
  background: #5b9bd5;
  position: absolute;
  top: 100px;
  left: 20px;
}

.colores {
  width: 250px;
}

.fila {
  margin: 15px 0;
}

.c {
  width: 40px;
  height: 30px;
  border: none;
  margin-left: 5px;
  cursor: pointer;
}

.negro { background: black; }
.cafe { background: #a0522d; }
.amarillo { background: #f4b000; }

.piel1 { background: #f5e27c; }
.piel2 { background: #d9a066; }
.piel3 { background: #8b5a2b; }

.verde { background: #00ff00; }
.azul { background: #5b9bd5; }
.rojo { background: #ff0000; }

.guardados {
  border: 3px solid orange;
  height: 200px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-json {
  display: block;
  text-align: right;
  margin-top: 10px;
  color: #2f6da8;
  font-size: 13px;
}