#cube {
    background: linear-gradient(to top, #fce25b, #ecc92b);
    box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4);
}
.shadow-1 {
    box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}

.div_gradient {
    background: #466368;
    background: linear-gradient(#648880, #293f50);
}
.boxShadow5 {
    box-shadow: 0px 0px 5px #40310a inset;
}
    boxShadow1 {
    /*Снизу (под блоком div)*/
    width: 80%;
    max-width: 550px;
    margin: 1em auto;
    padding: 1em;
    box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);
}
.boxShadow2 {
    /*По бокам (справа и слева)*/
    /*width: 95%;
    max-width: 550px;
    margin: 10px auto;
    padding: 1em;*/
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}
.boxShadow7 {
    /*Многослойный блок*/
        width: 80%;
    max-width: 550px;
    margin: 12px auto;
    padding: 1em;
    box-shadow: 0 0 0 1px rgb(194, 192, 184) inset, 0 5px 0 -4px rgb(255, 255, 255), 0 5px 0 -3px rgb(194, 192, 184), 0 11px 0 -8px rgb(255, 255, 255), 0 11px 0 -7px rgb(194, 192, 184), 0 17px 0 -12px rgb(255, 255, 255), 0 17px 0 -11px rgb(194, 192, 184);
}
.boxShadow14 {
    width: 80%;
    max-width: 550px;
    margin: 1em auto;
    padding: 1em;
    border: 2px dashed #ccc;
    box-shadow: 0 0 0 1px #ccc, inset 0 0 0 1px #ccc;
}

.boxShadow3 {
    /*CSS внутренняя тень блока (внутри элемента)*/
    width: 80%;
    max-width: 550px;
    margin: 1em auto;
    padding: 1em;
    box-shadow: 0 0 40px rgba(0, 0, 0, .1) inset;
}
/*Как сделать вдавленный элемент*/
.boxShadow11 {
     /*   width: 80%;
    max-width: 550px;
    margin: 1em auto;
    padding: 1em;*/
    box-shadow: 0 3px 3px #575555 inset;
}
.boxShadow6 {
 
 /*   width: 80%;
    max-width: 550px;
    margin: 10px auto;
    padding: 1em;
 */   box-shadow: inset 0 0 100px hsla(0,0%,0%,.2), 
          inset 0px 1px 5px #999, 
          inset 0px 2px 0px #888, 
          inset 0px 3px 0px #777, 
          inset 0px 4px 0px #666, 
          inset 0px 5px 0px #555, 
          inset 0px 6px 0px #444, 
          inset 0px 7px 0px #333, 
          inset 0px 8px 7px #001135;
}

/*Как сделать выпуклый элемент с округлыми краями*/
.boxShadow21 {
    /*width: 80%;
    max-width: 550px;
    margin: 1em auto;
    padding: 1em;*/
    /*border: 1px solid rgb(100,100,100);*/
    box-shadow: 20px 0 20px -20px #000 inset, -20px 0 20px -20px #000 inset;
}
.boxShadow18 {
    /*width: 80%;*/
    max-width: 550px;
    margin: 1em auto;
    padding: 1em;
    border-radius: 10px;
    background: rgb(100,100,100) radial-gradient(circle at 50% 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
    box-shadow: inset rgba(0,0,0,.6) 0 -3px 8px, inset rgba(252,255,255,.7) 0 3px 8px, rgba(0,0,0,.8) 0 3px 8px -3px;
}
.boxShadow17 {
    /*width: 80%;
    max-width: 550px;
    margin: 1em auto;*/
    padding: 1em;
    border-radius: 10px;
    background: rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
    box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;
}
.boxShadowLogo {
    /*width: 80%;
    max-width: 550px;
    margin: 1em auto;*/
    padding: 3px;
    border-radius: 10px;
    background: MidnightBlue;
    box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;
}
.boxShadow171 {
    /*width: 80%;
    max-width: 550px;
    margin: 1em auto;*/
    padding: 1em;
    border-radius: 10px;
    background: rgb(22, 158, 228) radial-gradient(circle at 0 0, rgba(255,255,255,-0.85), rgba(255,255,255,.2));
    /*box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;*/  /* тінь */
}
.boxShadow172 {
    /*width: 80%;
    max-width: 550px;
    margin: 1em auto;*/
    padding: 1em;
    border-radius: 10px;
    /*background: rgb(22, 158, 228) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255,.35));*/
    background: WhiteSmoke;
    /*box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;  /* тінь */
}*/
.boxShadow19 {
    position: relative;
    width: 80%;
    max-width: 550px;
    margin: 2em auto 1em;
    padding: 1em;
    border-radius: 10px;
    background: rgb(100,160,210) radial-gradient(circle at 100% 100%, rgba(255,255,255,.60), rgba(255,255,255,.20));
    box-shadow: -1px -1px rgb(100, 150, 200), -2px -2px rgb(100, 140, 190), -3px -3px rgb(100, 130, 180), -4px -4px rgb(100, 120, 170), -5px -5px rgb(100, 120, 160), -6px -6px rgb(100, 120, 150),
    /* тень подложки */
    -7px -7px 4px 2px rgb(180, 180, 180), -8px -8px 6px 3px rgb(200, 200, 200);
}

.boxshadow-inner {
    /*Внутренняя тень*/

    /* margin: 50px;
    height: 100px;
    width: 200px;
    display: inline-block;*/
    box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}
.boxshadow-footer {
    /*Нижній футер*/
    box-shadow: -1px 8px 17px -5px #000000 inset;
}
    /*Эффекты для тени при наведении*/
    .span-shadow {
    text-align: center
}

    .span-shadow span {
        display: inline-block;
        margin: 15px;
        padding: 20px 30px;
        cursor: pointer;
        border-radius: 10px;
        color: white;
        transition: .2s linear;
    }

        .span-shadow span:nth-child(1) {
            background: #3A2F28
        }

            .span-shadow span:nth-child(1):hover {
                box-shadow: 0 0 0 2px white, 0 0 0 4px #3A2F28;
            }

        .span-shadow span:nth-child(2) {
            background: #C1F1E4
        }

            .span-shadow span:nth-child(2):hover {
                box-shadow: 200px 0 0 0 rgba(0,0,0,.3) inset;
            }

        .span-shadow span:nth-child(3) {
            background: #D2973D
        }

            .span-shadow span:nth-child(3):hover {
                box-shadow: 0 0 0 2px #D2973D inset, 0 0 0 4px white inset;
            }

        .span-shadow span:nth-child(4) {
            background: #C76637;
            position: relative;
            top: 0;
            left: 0;
        }

            .span-shadow span:nth-child(4):hover {
                box-shadow: 2px 2px white, 4px 4px #C76637;
                top: -4px;
                left: -4px;
            }