body {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 50px;
}

.fig-content {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 150px;
}

.rombo,
.circulo,
.triangulo,
.cuadrado,
.rectangulo {
  margin: 30px 20px 0 0;
  cursor: crosshair;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
}

.color-picker {
  position: fixed;
  top: 150px;
  right: 5px;
  width: 50px;
  height: 250px;
  border: 2px solid black;
  cursor: crosshair;
  display: flex;
  flex-direction: column;
}

.color {
  height: 50px;
}

#rojo {
  background: red;
}
#verde {
  background: green;
}
#azul {
  background: blue;
}
#naranja {
  background: orange;
}
#amarillo {
  background: yellow;
}
#rosa {
  background: pink;
}

/*----------------------------------mobile-----------------------------------------------*/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .fig-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
  }

  .color-picker {
    top: 100px;
    right: 0px;
  }

  .triangulo {
    border-top: 0px solid transparent !important;
  }

  .rombo {
    margin-bottom: 25px;
  }
}

/*------------------------figuras---------------------------------*/
.rombo {
  width: 100px;
  height: 100px;

  -webkit-transform: rotate(45deg) skew(15deg, 15deg);
  -moz-transform: rotate(45deg) skew(15deg, 15deg);
  -ms-transform: rotate(45deg) skew(15deg, 15deg);
  -o-transform: rotate(45deg) skew(15deg, 15deg);
  transform: rotate(45deg) skew(15deg, 15deg);

  background: #428bca;
}

.circulo {
  width: 100px;
  height: 100px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;

  background: #428bca;
}

.triangulo {
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-top: 100px solid transparent;
  border-left: 100px solid transparent;

  border-bottom: 100px solid #428bca;
}

.cuadrado {
  width: 100px;
  height: 100px;

  background: #428bca;
}

.rectangulo {
  width: 100px;
  height: 250px;

  background: #428bca;
}