* {
    margin: 0;
    padding: 0;
}

html {
    font-family: Verdana, sans-serif;
}

#global {
    max-width: 980px;
    margin: auto;
    margin-top: auto;
    margin-top: 40px;
}

h1,
h2 {
    margin-bottom: 20px;
    color: #333;
}

li {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 40px 40px 0;
}

li[class*="outside"] {
    background: #b3daf6;
}

li[class*="inside"] {
    background: #76cea0;
}

li[class*="random"] {
    background: #ffc5d9;
}

[class*="random"]:after,
[class*="random"]:before {
    content: " ";
    position: absolute;
    width: 50%;
    height: 90px;
    z-index: -10;
}

.outside-four-sides {
    -webkit-box-shadow: 0 0 5px 2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: 0 0 5px 2px rgba(255, 0, 102, 0.5);
    box-shadow: 0 0 5px 2px rgba(255, 0, 102, 0.5);
}

.outside-three-sides-up {
    -webkit-box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5),
    0 5px 5px -2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5),
    0 5px 5px -2px rgba(255, 0, 102, 0.5);
    box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5),
    0 5px 5px -2px rgba(255, 0, 102, 0.5);
}

.outside-three-sides-right {
    -webkit-box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5);
    box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5);
}

.outside-three-sides-bottom {
    -webkit-box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5);
    box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5);
}

.outside-three-sides-left {
    -webkit-box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5),
    5px 0 5px -2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5),
    5px 0 5px -2px rgba(255, 0, 102, 0.5);
    box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5),
    5px 0 5px -2px rgba(255, 0, 102, 0.5);
}

.outside-two-sides-vertical {
    -webkit-box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5);
    box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5),
    0 -5px 5px -2px rgba(255, 0, 102, 0.5);
}

.outside-two-sides-horizontal {
    -webkit-box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5);
    box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5),
    -5px 0 5px -2px rgba(255, 0, 102, 0.5);
}

.outside-one-side-up {
    -webkit-box-shadow: 0 -5px 5px -2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: 0 -5px 5px -2px rgba(255, 0, 102, 0.5);
    box-shadow: 0 -5px 5px -2px rgba(255, 0, 102, 0.5);
}

.outside-one-side-right {
    -webkit-box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5);
    box-shadow: 5px 0 5px -2px rgba(255, 0, 102, 0.5);
}

.outside-one-side-bottom {
    -webkit-box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5);
    box-shadow: 0 5px 5px -2px rgba(255, 0, 102, 0.5);
}

.outside-one-side-left {
    -webkit-box-shadow: -5px 0 5px -2px rgba(255, 0, 102, 0.5);
    -moz-box-shadow: -5px 0 5px -2px rgba(255, 0, 102, 0.5);
    box-shadow: -5px 0 5px -2px rgba(255, 0, 102, 0.5);
}

.inside-four-sides {
    -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5) inset;
}

.inside-three-sides-up {
    -webkit-box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset;
}

.inside-three-sides-right {
    -webkit-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
}

.inside-three-sides-bottom {
    -webkit-box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 5px 5px -2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 5px 5px -2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 5px 5px -2px rgba(0, 0, 0, 0.5) inset;
}

.inside-three-sides-left {
    -webkit-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
}

.inside-two-sides-vertical {
    -webkit-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset,
    0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset;
}

.inside-two-sides-horizontal {
    -webkit-box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset,
    -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
}

.inside-one-side-up {
    -webkit-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5) inset;
}

.inside-one-side-right {
    -webkit-box-shadow: -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: -5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
}

.inside-one-side-bottom {
    -webkit-box-shadow: 0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 -5px 5px -2px rgba(0, 0, 0, 0.5) inset;
}

.inside-one-side-left {
    -webkit-box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5) inset;
}

.random-one-side-left:before {
    -webkit-box-shadow: -7px 0 10px rgba(55, 55, 55, 0.8);
    -moz-box-shadow: -7px 0 10px rgba(55, 55, 55, 0.8);
    box-shadow: -7px 0 10px rgba(55, 55, 55, 0.8);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
    top: 5px;
    left: 5px;
}

.random-one-side-right:after {
    -webkit-box-shadow: 7px 0 10px rgba(55, 55, 55, 0.8);
    -moz-box-shadow: 7px 0 10px rgba(55, 55, 55, 0.8);
    box-shadow: 7px 0 10px rgba(55, 55, 55, 0.8);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
    top: 5px;
    right: 5px;
}

.random-double-side-horizontal:after {
    -webkit-box-shadow: 7px 0 10px rgba(55, 55, 55, 0.8);
    -moz-box-shadow: 7px 0 10px rgba(55, 55, 55, 0.8);
    box-shadow: 7px 0 10px rgba(55, 55, 55, 0.8);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
    top: 5px;
    right: 5px;
}

.random-double-side-horizontal:before {
    -webkit-box-shadow: -7px 0 10px rgba(55, 55, 55, 0.8);
    -moz-box-shadow: -7px 0 10px rgba(55, 55, 55, 0.8);
    box-shadow: -7px 0 10px rgba(55, 55, 55, 0.8);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
    top: 5px;
    left: 5px;
}

.random-one-curve-bottom:after {
    -webkit-box-shadow: 6px 3px 15px rgba(55, 55, 55, 0.8);
    -moz-box-shadow: 6px 3px 15px rgba(55, 55, 55, 0.8);
    box-shadow: 6px 3px 15px rgba(55, 55, 55, 0.8);
    -webkit-transform: rotate(-9deg);
    -moz-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    -o-transform: rotate(-9deg);
    transform: rotate(-9deg);
    width: 65%;
    top: 45px;
    left: 0;
    height: 50%;
}

.random-one-curve-bottom:before {
    -webkit-box-shadow: -6px 3px 15px rgba(55, 55, 55, 0.8);
    -moz-box-shadow: -6px 3px 15px rgba(55, 55, 55, 0.8);
    box-shadow: -6px 3px 15px rgba(55, 55, 55, 0.8);
    -webkit-transform: rotate(9deg);
    -moz-transform: rotate(9deg);
    -ms-transform: rotate(9deg);
    -o-transform: rotate(9deg);
    transform: rotate(9deg);
    width: 75%;
    top: 45px;
    right: 0;
    height: 50%;
}