koala.css

gistfile1.txt

body{
  background: #25A9FC;
}
.box{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
  border: solid 3px white;
}
.head{
  position: absolute;
  top:16.5%;
  left: 25%;
  width: 50%;
  height: 67%;
  background: #A6BECF;
  border-radius: 50%;
  z-index: 3;
}
.outer-ear-left{
  position: absolute;
  width: 33%;
  height: 47%;
  left: 17%;
  top: 20%;
  background: #A6BECF;
  border-radius: 50%;
  z-index: 1;
}
.outer-ear-right{
  position: absolute;
  width: 33%;
  height: 47%;
  right: 17%;
  top: 20%;
  background: #A6BECF;
  border-radius: 50%;
  z-index: 1;
}
.inner-ear-left{
  position: absolute;
  border-radius: 50%;
  width: 28%;
  height: 40%;
  top: 23.5%;
  left: 19.5%;
  background: #819CAF;
  z-index: 2;
}
.inner-ear-right{
  position: absolute;
  border-radius: 50%;
  width: 28%;
  height: 40%;
  top: 23.5%;
  right: 19.5%;
  background: #819CAF;
  z-index: 2;
}
.outer-eye-left{
  position: absolute;
  background: white;
  width: 16%;
  height: 22%;
  top: 32%;
  left: 35%;
  border-radius: 50%;
  z-index: 4;
}
.outer-eye-right{
  position: absolute;
  background: white;
  width: 16%;
  height: 22%;
  top: 32%;
  right: 35%;
  border-radius: 50%;
  z-index: 4;
}
.pupil-left{
  position: absolute;
  width: 4.5%;
  height: 7%;
  top: 40%;
  left: 40.5%;
  border-radius: 50%;
  background: #27354A;
  z-index: 5;
}
.pupil-right{
  position: absolute;
  width: 4.5%;
  height: 7%;
  top: 40%;
  right: 40.5%;
  border-radius: 50%;
  background: #27354A;
  z-index: 5;
}
.nose{
  position: absolute;
  background: #BE845F;
  width: 13%;
  height: 30.5%;
  left: 43.5%;
  top: 45%;
  border-radius: 50px;
  z-index: 5;
}
.hair-left{
  position: absolute;
  top: 12%;
  left: 39%;
  width: 10%;
 height: 12%;
 background:  #A6BECF;
 -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.hair-right{
  position: absolute;
  top: 14%;
  left: 50%;
  width: 10%;
 height: 12%;
 background:  #A6BECF;
 -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
@media all and (max-width: 600px) {
  .box{
    position: relative;
    margin: auto;
    display: block;
    margin-top: 2%;
    width: 400px;
    height: 280px;
    background: none;
 }
}