/*DEFAULT STYLES FOR DISPLAY*/
*,*:before,*:after{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  font-size:100%;
  margin:0;
  padding:0;
}
html,body{
  height:100%;
}
.cover{
  width:100%;
  height:100%;
  background:#3DC0F1;
}
.icon{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  display:block;
}

/*The Artifakt ;)*/
.calculator{
  width:8.5em;
  height:9.5em;
  background:#fff;
  border-radius:0.4em;
}
.calculator:before{
  content:"";
  position:absolute;
  top:0.5em;
  left:0.5em;
  width:7.5em;
  height:2em;
  background:#3DC0F1;
  z-index:2;
  border-radius:0.2em;
}
.calculator:after{
  content:"";
  position:absolute;
  top:3.5em;
  left:0.5em;
  width:1.5em;
  height:1.5em;
  background:#3DC0F1;
  border-radius:0.2em;
  box-shadow:
    2em 0 #3DC0F1,
    4em 0 #3DC0F1,
    6em 0 #3DC0F1,
    0 2em #3DC0F1,
    2em 2em #3DC0F1,
    4em 2em #3DC0F1,
    6em 2em #3DC0F1,
    0em 4em #3DC0F1,
    2em 4em #3DC0F1,
    4em 4em #3DC0F1,
    6em 3em #3DC0F1,
    6em 4em #3DC0F1;

}

//CSS ARTIFAKTS (in other words...icons!)