*{
    padding : 0;
    margin:0;
    box-sizing: border-box;
}

:root{
    font-size: 18px;
    font-family: 'Outfit', sans-serif;
--Soft-blue: hsl(215, 51%, 70%);
--Cyan: hsl(178, 100%, 50%);


--Very-dark-blue-main-BG: hsl(217, 54%, 11%);
--Very-dark-blue-card-BG: hsl(216, 50%, 16%);
--Very-dark-blue-line: hsl(215, 32%, 27%);
--White: hsl(0, 0%, 100%)
}

body{
    background-color: var(--Very-dark-blue-main-BG);
    height:100vh;
    display:flex;
    justify-content: center;
    align-items:center;
}

main{
    background-color: var(--Very-dark-blue-card-BG);
    height:70vh;
    width:20vw;
    padding:20px;
    border-radius:3%;
    display:flex;
    flex-direction: column;
    gap:25px;
    overflow: ;
}

.card__img-wrapper{
    position:relative;
    animation: float 2s ease-in-out infinite alternate ;
}
.card__img-wrapper:hover{
 cursor:pointer;
}
.card__img{
    border-radius:5%;
    width:100%;
    height:100%;
}
.card__img-wrapper div{
    height:100%;
    position: absolute;
    top:0%;
    width:100%;
    border-radius:5%;
}
.card__img-wrapper:hover div{
    background-color: hsl(178, 100%, 50%, 50%);
}
.card__img-preview{
    height:40px;
    width:40px;
    position:absolute;
    left:43.5%;
    top:42%;
    opacity:0;
}
.card__img-wrapper:hover .card__img-preview{
    cursor:pointer;
    opacity:1;
}

.card__body{
    display:flex;
    flex-direction: column;
    gap:25px;
}
.card__header{
    color:white;
}
.card__description, .card__time-left{
    color:var(--Soft-blue);
    font-weight: 200;
    font-size:1rem;
}
.card__meta-info{
    display:flex;
    justify-content: space-between;
}
.card__price{
    color:var(--Cyan);
    display:flex;
}
.card__price p{
    margin-left:8px;
}
.card__time-left{
    display:flex;
}
.card__time-left p{
    margin-left:8px;
}
.card__break-line{
    width:100%;
    height:1px;
    background-color:hsl(216, 34%, 69%);
}

.card__footer{
    display:flex;
}
.card__footer p{
    margin-left:10px;
    margin-top:5px;
    color:var(--Soft-blue);
    font-weight: 200;
}
.card__footer .author-name{
    color:white;
}
.card__footer .author-name:hover{
    color:cyan;
    cursor: pointer;
}
.card__header:hover{
    color:cyan;
    cursor:pointer;
}
.card__footer__img{
    border:1px solid white;
    border-radius:50%;
    height:32px;
    width:32px;
}


@keyframes float{
    from {
        transform: translateY(-5px);
    }
    to{
       transform: translateY(5px);
    }
}