*{
    margin: 0;
    padding: 0;
}
.container{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.07),rgba(0,0,0,0.07)), url(images/new.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}
.context{
    display: flex;
    top: 30%;
    left: 50%;
    color: #fff;
    transform: translate(-50%,-50%);
    text-align: center;
    text-shadow: 3px 3px rgba(51, 51, 51, 0.574);
    position: absolute;
    letter-spacing: 5px;
    font-size: 12.5px;
}
.social-media{
    display: flex;
    padding: 3.5% 6%;
    align-items: center;
    justify-content: right;
}
.social-media ul li{
    display: inline-block;
    list-style: none;
    padding: 9px 14px;
    position: relative;
}
.social-media ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 21px;
    transition: 0.5s;
}
.social-media ul li:nth-child(1) a:hover{
    color: #08a0e9;
}
.social-media ul li:nth-child(2) a:hover{
    color: #E1306C;
}
.social-media ul li:nth-child(3) a:hover{
    color: #171515;
}
.date{
    display: flex;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    position: absolute;
}
.date div{
    position: relative;
    width: 130px;
    height: 130px;
    line-height: 140px;
    text-align: center;
    background: #333;
    border-radius: 0 0 11px 11px;
    margin: 0 17px;
    font-size: 3em;
    font-weight: 700;
    transition: transform 0.5s;
}
.date div:before{
    content: "";
    position: absolute;
    bottom: 110px;
    left: 0%;
    width: 100%;
    height: 35px;
    background: #fcbb18;
    border-radius: 11px 11px 0 0;
    font-size: 20px;
    line-height: 35px;
    font-weight: 300; 
}
.date #days:before{
    content: "Days";
}
.date #hours:before{
    content: "Hours";
}
.date #minutes:before{
    content: "Minutes";
}
.date #seconds:before{
    content: "Seconds";
}
.date div:hover{
    transform: translateY(-13px);
}