body{
    background:rgba(0,0,0,0.9);
    margin:0;
    color:red;
    font-family:'Dosis', sans-serif;
}
/* ::after :: before psuedocode code */
.showcase::after{
    content:"";
    height:100vh;
    width:100%;
    background-image:url(pic.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    display:block;
}
/* hover effect */
.showcase:hover::after{
filter:blur(0px);
-webkit-filter:blur(0px);
}

.showcase:hover .content{
    filter:blur(2px);
    -webkit-filter:blur(2px);
    }
    .content{
        position:absolute;
        z-index:1;
        top:10%;
        left:50%;
        margin-top: 105px;
        margin-left: -145px;
        width:300px;
        height:350px;
        text-align:center;
        transition:all 1000ms;
    }
    .content .logo{
        height:180px;
        width:180px;

    }
    .content .title{
        font-size:2.5rem;
        margin-top:1rem;

    }
    .content .text{
        line-height:1.50;
        margin-top:1rem;
        font-size:1.25rem;
    }
    .container{
        max-width: 960px;
        margin:auto;
        overflow: hidden;
        padding:4rem 1rem;
    }
    .grid-3{
        display:grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap:20px;
    }
    .grid-2{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        grid-gap:20px;
    }
    .center{
        text-align:center;
        margin:auto;
    }
    .bg-light{
        background:#f4f4f4;
        color:#333;
    }
    .bg-dark{
        background:#333;
        color:#f4f4f4;
    }
    footer p{
        margin:0;
        
    }