#box{
    width: 400px;
    height: 400px;
    margin: 50px auto;
    padding: 8px;
    background: crimson;
    /*box-shadow: 10px 10px 2px 20px black;
        THE THIRD VALUE THAT IN THE CASE THIS 2px DETERMINES A HALF-BLOWED OPACITY
        THE FOURTH VALUE THAT IN THE CASE THIS 20px DETERMINES A GREATER SHADOW SPREAD   
    */
    box-shadow: 10px 10px black, -10px -10px blueviolet;

}

#box h1{
    color: white;
    font-size: 60px;
    text-align: center;
    /*text-shadow: 10px 10px 5px black;*/
    text-shadow: 10px 10px rgba(0, 0, 0, 0.5);
    /* USING RGBA CAN MAKE A TRANSPARENT SHADOW WITHOUT BLURRING*/
}