@import url("../../global/normalize.css");

:root{
    /*colours*/
    --c-soft-blue: #8BACD9;
    --c-white: #fff;
    --c-cyan-op: rgba(0, 255, 248, 0.5);
    --c-cyan: #00fff8;
    --c-dark-blue-main: #0D192C;
    --c-dark-blue-card-bg: #15263F;
    --c-dark-blue-card-line: #2E405A;
    --c-red-pink: #e63946;
    
    /*font-family*/
    --ff: "Outfit", sans-serif;

    /*font-weight*/
    --fw-light: 300;
    --fw-semi-bold: 600;

    /*font sizes*/
    --fs-15px: calc(15/16 * 1rem);
    --fs-16px: 1rem;
    --fs-18px: calc(18/16 * 1rem);
    --fs-22px: calc(22/16 * 1rem);

    /*line-height*/
    --line-26px: calc(26/16 * 1rem);

    /*layout spacing*/
    --padding-main: calc(62/16 * 1rem) calc(24/16 * 1rem);
    --padding-card-inner: calc(24/16 * 1rem) calc(24/16 * 1rem) clamp(1.5rem, 1.023rem + 2.036vw, 2rem);


    /*box stuff*/
    --padding-main-mobile: 1rem;
    --padding-main-desktop: 2rem;
    --nft-max-width: clamp(20.438rem, 19.066rem + 5.852vw, 21.875rem);

    --br-8px: calc(8/16 * 1rem);
    --br-15px: calc(15/16 * 1rem);
    
    /*transition*/
    --tr: all .3s ease-in-out;
}

main{
    padding: clamp(3.875rem, -1.492rem + 22.901vw, 9.5rem) calc(24/16 * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--c-dark-blue-main);
    transition: var(--tr);
}

.nft{
    max-width: var(--nft-max-width);
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    padding: var(--padding-card-inner);
    border-radius: var(--br-15px);
    background: var(--c-dark-blue-card-bg);
    font-family: var(--ff);
    transition: var(--tr);
}
.nft-fig{
    width: 100%;
    max-height: clamp(17.375rem, 15.944rem + 6.107vw, 18.875rem);
    margin-bottom: calc(24/16 * 1rem);
    position: relative;
    top: 0;
}
.nft-fig:hover::after{
    display: flex;
    justify-content: center;
    align-items: center;
    content: url(../images/icon-view.svg);
    width: 100%;
    height: 100%;
    background-color: var(--c-cyan-op);
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    border-radius: var(--br-8px);
}
.nft-fig img{
    width: 100%;
    border-radius: var(--br-8px);
}

/*body*/
.nft-body,
.nft-footer{
    max-width: clamp(17.375rem, 15.944rem + 6.107vw, 18.875rem);
}

.nft-body-name{
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-22px);
    color: var(--c-cyan);
    margin-bottom: clamp(0.75rem, 0.511rem + 1.018vw, 1rem);
}
.nft:hover #nft-body-name--tag {
    text-shadow: 2px 2px 8px var(--c-cyan);
}
.nft-body-sub{
    font-weight: var(--fw-light);
    font-size: var(--fs-18px);
    line-height: var(--line-26px);
    color: var(--c-soft-blue);
    margin-bottom: clamp(1rem, 0.523rem + 2.036vw, 1.5rem);
}

/*body price and clock section*/
.nft-lower{
    display: flex;
    align-items: flex-start;
    font-size: var(--fs-15px);
    font-weight: var(--fw-semi-bold);
    padding-bottom:clamp(1rem, 0.523rem + 2.036vw, 1.5rem);
    border-bottom: 1px solid var(--c-dark-blue-card-line);
}
.nft-lower-price--container,
.nft-lower-time--container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.nft-lower-price--container i,
.nft-lower-time--container i {
    display: flex;
    align-items: center;
    justify-content: center;
}
figcaption {
    position: absolute;
    top: 0;
    color: transparent;
}
.nft-lower-price--container{
    gap: 6.5px;
    margin-right: auto;
    color: var(--c-cyan);
}
.nft-price{
    font-weight: 400;
}
.nft-lower-time--container{
    gap: 7.7px;
}
.nft-duration{
    font-weight: 400;
    color: var(--c-soft-blue);
}

/*footer*/
.nft-footer{
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 1rem;
}
.nft-footer-author{
    color: var(--c-white);
    font-weight: 400;
}
.nft-footer-author--highlight{
    color: var(--c-soft-blue);
}