@import url(http://fonts.googleapis.com/css?family=Amatic+SC); $size: 15em; $border: 2em; $ear: 4.5em; $mug-color: #C73B0B; $mug-inside-color: #1F0505; $spot-size: random(); html, body { margin: 0; padding: 0; background-color: #E7A136 } #title { font: 7em Amatic SC; position: absolute; top: 5%; left: 50%; margin-left: -.8em; } #mug { position: absolute; left: 50%; margin-left: -$size / 2; top: 50%; margin-top: -$size / 2; width: $size; height: $size; background-color: $mug-color; border-radius: 100%; box-shadow: 8px 9px #222; #coffee-border { position: absolute; left: 50%; margin-left: -$size / 2; top: 50%; margin-top: -$size / 2; height: $size - $border; width: $size - $border; border: $border / 2 $mug-color solid; border-radius: 100%; } &::before { position: absolute; top: ($size / 2) - (($ear / 4) / 2); left: -$ear + .1; content: ""; width: $ear; height: $ear / 3; background-color: $mug-color; border-radius: 8px 0 0 8px; box-shadow: 5px 10px 0 0 #222; z-index: 0; } #mug-inside { position: absolute; left: $border / 2; top: $border / 2; height: $size - $border; width: $size - $border; background-color: $mug-inside-color; border-radius: 100%; box-shadow: 15px 10px 0 #161616 inset; } } .spot { height: $size - $border; width: $size - $border; box-shadow: 10px 20px 0 3px $mug-inside-color; border-radius: 100%; position: absolute; top: 50%; left: 50%; margin-top: -$size / 2 + 5; margin-left: -$size / 2 + 4; z-index: -1; /* This is a part of the spot, but if you uncomment it, it's gonna be ugly. .spot-part { position: relative; top: -1.3em; right: 0em; height: $size - $border; width: $size - $border; box-shadow: 5px 10px 0 3px $mug-inside-color; border-radius: 100%; }*/ }