First mobile, flex-box

Hi Luis,

I'd recommend simplifying your background styles.

And just to say the 375px and 1440px given in the design is just a guide it's not prescriptive, use your intuition to style the most responsive best looking design you can.

Anyway i'd do the following:

body {

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--verydarkbluemainBG);

main {

    /* min-width: 375px; */ remove 
    /* max-width: 1440px; */ remove
    /* width: 100%; */ remove
    /* height: auto; */ remove
    /* background-color: var(--verydarkbluemainBG); */ moved to body
    display: flex;
    flex-direction: column;
    /* align-items: center; */ remove
    /* padding: 50px 0 0; remove

I had the exact same problem, just started learning two weeks ago.

Try adding a layer (<div class=''layer''></div> in html )and position it on top of your nft-image . You can do this with the (::after) pseudonym and (content='' ''), set it to transparent or opacity set to 0. Then when :hovering over the image set the background-color on your new div layer to cyan with the opacity around 0.5

Hey Luis, good job on the challenge. When I open your webpage on my laptop, it doesn't cover my entire screen. To fix that, I would change max-width of <main> to min-width: 100vw, and height: auto to min-height: 100vh

:) Good job!