/* General CSS */

.robotframe {
    position: relative;
    display: inline-block;
    border-radius: 30px;
    margin: .5rem;
}

/* Elena CSS */

.elena.robotframe {
    background-color: blueviolet;
    border: solid #c485ff 5px;
    top: -12px;
}

.elena.robotframe #face {
  margin-left: 10px;
  margin-right: 10px;
  width: 400px;
}

.elena.robotframe #eyes3 {
  position: absolute;
  margin-left: 30px;
  left: 105px;
  top: 180px;
  width: 150px;
}
.elena.robotframe #mouth3 {
  position: absolute;
    left: 135px;
  top: 310px;
  width: 150px;
filter: invert(100%);
 }
 .elena.robotframe #nose1 {
  position: absolute;
  left: 181px;
  top: 220px;
  width: 50px;
 }

 /* Janne Css */

.janne.robotframe {
    background-color: blueviolet;
    border: solid #c485ff 5px;
    top: -12px;
}

 .janne.robotframe img {
  width: 50px;
}
 .janne.robotframe #face {
  width: 400px;
}
 .janne.robotframe #eyes2{
  position: absolute;
  top: 170px;
  left: 139px;
  width: 143px;
}
 .janne.robotframe #hair3{
  position: absolute;
  left: 68px;
  top: 0px;
  width: 280px;
}
 .janne.robotframe #bird{
  position: absolute;
  left: 133px;
  top: 0px;
}
 .janne.robotframe #moustache{
  position: absolute;
  margin-top: -250px;
  margin-left: 90px;
  width: 114px;
  display: none;
}
 .janne.robotframe #mouth3{
  position: absolute;
  top: 296px;
  left: 215px;
}
 .janne.robotframe #necklace{
  position: absolute;
  left: 140px;
  top: 0px;
  width: 10px;
}

/* Jelte CSS */

 .jelte.robotframe {
    background-color: blueviolet;
    border: solid #c485ff 5px;
    top: -12px;
}

 .jelte.robotframe img {
  width: 50px;
}
 .jelte.robotframe #face {
  width: 400px;
}

 .jelte.robotframe #eyes3 {
  position: absolute;
  width: 150px;
  left: calc(235px - 109px);
  top: 155px;
}

  .jelte.robotframe #mouth1 {
  position: absolute;
  width: 150px;
  left: calc(230px - 109px);
  top: 310px;
}

  .jelte.robotframe #nose2 {
  position: absolute;
  width: 110px;
  left: calc(250px - 109px);
  top: 210px;
}

  .jelte.robotframe #ears1 {
  position: absolute;
  width: 408px;
  right: 3px;
  top: 70px;
}

  .jelte.robotframe #hair3 {
  position: absolute;
  width: 300px;
  left: calc(158px - 109px);
  top: 0px;
}


/* Jan CSS */

 .jan.robotframe {
    background-color: blueviolet;
    border: solid #c485ff 5px;
}

.jan.robotframe img {
  display: none;
  position: absolute;
  width: 200px;
}

.jan.robotframe #face {
  display: block;
  position: static;
  width: 400px;
}

.jan.robotframe #eyes2 {
  display: block;
  top: 220px;
  left: 100px;
}

.jan.robotframe #nose1 {
  display: block;
  width: 50px;
  top: 150px;
  left: 270px;
}

.jan.robotframe #moustache {
  display: block;
  left: 100px;
  top: 270px;
}

.jan.robotframe #sunglasses {
  display: block;
  top: 380px;
  left: 100px;
}