.mobile-control,
.mobile-control * {
    box-sizing: content-box;
    letter-spacing: 0;
}
.mobile-control {
    border: 11px solid rgba(255, 255, 255, 0.76);
    border-radius: 50%;
    margin: 20px;
    padding: 28px;
    width: 112px;
    height: 112px;
    font-size: 0;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}
.mobile-control,
.mobile-control .left,
.mobile-control .right,
.mobile-control:before {
    display: inline-block;
    vertical-align: middle;
    transition: border 0.2s, width 0.2s, height 0.2s, margin 0.2s;
}
.mobile-control:before {
    content: "";
    height: 112px;
}
.mobile-control.pause .left,
.mobile-control.pause .right {
    margin: 0;
    border-left: 37px solid rgba(255, 255, 255, 0.76);
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    height: 97px;
}
.mobile-control.pause .left {
    border-right: 22px solid transparent;
}
.mobile-control.play .left {
    margin-left: 18px;
    border-left: 48px solid rgba(255, 255, 255, 0.76);
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 0 solid transparent;
    height: 56px;
}
.mobile-control.play .right {
    margin: 0;
    border-left: 48px solid rgba(255, 255, 255, 0.76);
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    height: 0;
}
.mobile-control:hover {
    border-color: rgba(255, 255, 255, 0.96);
}
.mobile-control:hover .left,
.mobile-control:hover .right {
    border-left-color: rgba(255, 255, 255, 0.96);
}

.pretty-shadow-red {
    box-shadow: 0 0 1px hsl(0, 36%, 87%),
    0 0 16px hsla(0, 100%, 52%, 0.6),
    0 0 30px hsl(312, 62%, 46%),
    0 0 60px #5e0202;
}

.pretty-shadow-orange {
    box-shadow: 0 0 1px hsl(0, 36%, 87%),
    0 0 16px hsl(29, 100%, 49%),
    0 0 30px hsl(31, 100%, 63%),
    0 0 60px #772602;
}