/*
 * Design Sizes
 *
 * Page:
 *  Desktop: 1440x900
 *  Mobile: 375x667
 *
 * Cards:
 *  Desktop: 350x596 (padding around 152px, 545px - perfectly centered)
 *  Mobile: 327x543 (padding around 62px, 24px - perfectly centered)
*/

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap");

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

:root {
    /* Colors */
    /*   primary */
    --col-soft-blue: hsl(215, 51%, 70%);
    --col-cyan: hsl(178, 100%, 50%);
    --col-cyan-half-opaque: hsla(178, 100%, 50%, 0.5);
    /*   neutral */
    --col-very-dark-blue-main-bg: hsl(217, 54%, 11%);
    --col-very-dark-blue-card-bg: hsl(216, 50%, 16%);
    --col-very-dark-blue-line: hsl(215, 32%, 27%);
    --col-white: hsl(0, 0%, 100%);

    --col-heading: var(--col-white);
    --col-body: var(--col-soft-blue);
    --col-price: var(--col-cyan);
    --col-term: var(--col-soft-blue);
    --col-page-background: var(--col-very-dark-blue-main-bg);
    --col-card-background: var(--col-very-dark-blue-card-bg);
    --col-line: var(--col-very-dark-blue-line);
    --col-creator-body: var(--col-soft-blue);
    --col-creator-name: var(--col-white);
    --col-hover: var(--col-cyan);

    /* Typography */
    --fw-300: 300;
    --fw-400: 400;
    --fw-600: 600;

    --fs-heading: 1.375rem;
    --fs-body: 1.125rem;
    --lh-body: 1.625rem;
    --fs-caption: 0.9375rem;
    --fs-price: 0.9375rem;
    --fs-term: 0.9375rem;
    --fs-creator: 0.9375rem;

    /* Styling */
    --border-radius-outer: 0.9375rem;
    --border-radius--inner: 0.5rem;
    /* Other */
}

body {
    min-height: 100vh;

    display: grid;
    place-content: center;
    background-color: var(--col-page-background);

    font-family: "Outfit", sans-serif;
}

.nft-card {
    background-color: var(--col-card-background);
    border-radius: var(--border-radius-outer);
    padding: 1.5rem;

    max-width: 20.4375rem;

    box-shadow: 0px 1.5625rem 3.125rem rgba(0, 0, 0, 0.0952917);
}

.nft-card__image-preview {
    display: block;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.nft-card__img {
    border-radius: var(--border-radius--inner);
    width: 100%;
    vertical-align: bottom;
    /* above fix to remove extra 4px, see
    https://stackoverflow.com/a/3197613

    The image is display: inline so it is treated like a character and sits on the baseline. The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).

    Another fix is to set img to display: block;
    */
}

.nft-card__image-preview::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--border-radius--inner);
    transition: background-color 0.3s ease-out;
}

.nft-card__image-preview:is(:hover, :focus)::after {
    background: var(--col-cyan-half-opaque) url(../images/icon-view.svg) center
        no-repeat;
}

.nft-card__header {
    color: var(--col-heading);

    font-size: var(--fs-heading);
    font-weight: var(--fw-600);
    line-height: 1.75rem;

    margin-bottom: 0.75rem;
}

.nft-card__header-link {
    text-decoration: none;
    color: inherit;
}

.nft-card__header-link:is(:hover, :focus) {
    color: var(--col-hover);
}

.nft-card__description {
    color: var(--col-body);

    font-size: var(--fs-body);
    font-weight: var(--fw-300);
    line-height: var(--lh-body);

    margin-bottom: 1rem;
}
.nft-card__price-block {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 1rem;
}

.nft-card__price-block div {
    display: flex;
    justify-content: center;
    gap: 0.4375rem;
}

.nft-card__img:hover {
    filter: saturate(200%) opacity(50%) drop-shadow(0 0 0 var(--col-hover));
}

.nft-card__price {
    color: var(--col-price);
    font-size: var(--fs-price);
    font-weight: var(--fw-600);
}

.nft-card__time-left {
    color: var(--col-term);
    font-size: var(--fs-term);
    font-weight: var(--fw-400);
}

.nft-card__hr {
    border: 1px solid var(--col-line);
    border-style: solid none none none;
}

.nft-card__creator-block {
    margin-top: 1rem;
    display: flex;
    align-items: center;

    font-size: var(--fs-creator);
}
.nft-card__creator-img {
    width: 2.0625rem;
    border: 1px white solid;
    border-radius: 50%;
    margin-right: 1rem;
}
.nft-card__creator-text {
    color: var(--col-creator-body);
    font-size: var(--fs-creator);
    font-weight: var(--fw-400);
    margin-right: 0.3125rem;
}
.nft-card__creator-name {
    text-decoration: none;
    font-size: var(--fs-creator);
    font-weight: var(--fw-400);
    color: var(--col-creator-name);
}

.nft-card__creator-name:is(:hover, :focus) {
    color: var(--col-hover);
}

@media screen and (min-width: 1000px) {
    :root {
        --fs-price: 1rem;
        --lh-price: 1.25rem;
        --fs-term: 1rem;
        --lh-term: 1.25rem;
        --fs-creator: 1rem;
    }

    .nft-card {
        padding: 1.5rem 1.5rem 2rem 1.5rem;
        max-width: 21.875rem;
    }

    .nft-card__header {
        margin-bottom: 1rem;
    }

    .nft-card__description {
        margin-bottom: 1.5rem;
    }

    .nft-card__price-block {
        margin-bottom: 1.5rem;
    }
}