body {
         background-image:url('https://www.thisiscolossal.com/wp-content/uploads/2017/11/sack-1.jpg');
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-position: center;
         background-size:100%;
         background-blend-mode: overlay;
         background-color: #d9d1d3;}
        
        .text {
        color: #FCF6F5;
        font-size: 50px;
        font-family: 'Playfair Display', serif;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit- transform: translate(-50%, -50%);
        -ms- transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        background-color:#84a6c4;}
        
        .container {
        position: relative;
        width: 50%;
        margin:auto;}

        .image {
        display: block;
        width: 100%;
        height: auto;}

        .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 101%;
        opacity: 0;
        transition: .5s ease;
        background-color: #84a6c4;}

        .container:hover .overlay {
        opacity: 1;}   
        
        h1 {
        font-family: 'Playfair Display', serif; 
        font-size: 50px;
        color: black;
        text-decoration: underline;
        text-decoration-color: #84a6c4}
        
        hr {
        border: 3px dotted #84a6c4;
        border-style: dotted none dotted; 
        color: #fff; 
        background-color: #e9ecf1;}    
            
        p {
        font-family: 'Playfair Display', serif; 
        font-size: 20px;
        color: black;
        text-align: center;}
            
        img {
        border-color: #84a6c4;
        border-width: 10px;
        border-style: solid;
        box-shadow: 10px 10px #9bbcd0, 20px 20px  #d9d1d3, 30px 30px #e9ecf1;
        img:hover {opacity: 0.5;
        filter: alpha(opacity=50);}