@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400&display=swap');
body{
    background:#242424;
}
:root{
    --font: "Oswald", sans-serif;
    --color: #E40063;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.jd-container{
    width:920px;
    height:auto;
    position:relative;
    margin:0 auto;
    color:#FFF;
    font-family:var(--font);
    font-weight:lighter;
    font-size:16px;
}
.jd-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-transform:uppercase;
}
.jd-title{
    width:100%;
    height:80px;
    color:#000;
    text-align:center;
    font-size:3.5rem;
    letter-spacing:10px;
    position:relative;
}
.jd-title:before{
    content: '';
    position:absolute;
    width:210px;
    height:5px;
    background:var(--color);
    left:calc(50% - 105px);
    bottom:0;
}
.jd-title:after{
    content: '';
    position:absolute;
    width:0;
    height:0;
    border-top:solid 20px var(--color);
    border-left:solid 20px transparent;
    border-right:solid 20px transparent;
    left:calc(50% - 20px);
    bottom:-25px;
}
.jd-xat{
    width:100%;
    height:80px;
    color:#FFF;
    text-align:center;
    font-size:5rem;
    letter-spacing:10px;
    margin-top:50px;
    font-weight:400;
    margin-bottom:20px;
}
.jd-description{
    color:var(--color);
    font-size:1.4rem;
}
.jd-counter{
    width:740px;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:calc(50% - 370px);
    margin-top:50px;
}
.jd-win{
    width:100%;
    height:auto;
    margin-top:70px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.jd-win h3{
    text-transform:uppercase;
    font-weight:300;
    color:var(--color);
    font-size:2rem;
    line-height:50px;
}
.jd-win h4{
    font-weight:300;
    font-size:2.5rem;
    margin:10px auto;
}
.jd-win p{
    width:80%;
    height:auto;
    text-align:center;
}
.jd-power{
    width:60px;
    height:60px;
    background-image:url(https://i.postimg.cc/KmkphwF6/lovespring.png);
    background-position:left center;
    animation:loop 7.2s steps(71) infinite; 
    margin-top:0;
	background-sizer:cover;
	background-repeat:no-repeat;
}
@keyframes loop{
    to{
        background-position:right top;
    }
}
.jd-nav{
    width:530px;
    height:24px;
    margin-left:calc(50% - 265px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:20px;
}
.jd-btn-nav{
    width:90px;
    height:24px;
    line-height:24px;
    display:inline-block;
    text-decoration:none;
    color:#FFF;
    text-transform:uppercase;
    text-align:center;
    position:relative;
}
.jd-btn-nav:before, 
.jd-btn-nav:after{
    content:'';
    position:absolute;
    width:100%;
    height:2px;
    background:#FFF;
    bottom:-2px;
    left:0;
}
.jd-btn-nav:after{
    width:50%;
    background:var(--color);
    transition:all .2s ease-out;
}
.jd-btn-nav:hover:after{
    width:100%;
}
footer{
    width:100%;
    height:50px;
    line-height:50px;
    text-align:center;
    font-family:var(--font);
    font-weight:lighter;
    background:#1E1E1E;
    color:#4D4D4D;
    font-size:14px;
    margin-top:80px;
}