media query

Greetings! you have done a great job 😎

📌 Some accessibility and semantics recommendations for your HTML

• To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container"> and the <div class="attribution"> to a <footer class="attribution">
• The attribution should go outside the main
• I can only mention an accessibility issue, you can add a short description to your image with the alt attribute. In case it is just a decorative image, such as an icon or logo, you can leave it empty: alt="". More info

📌 Some suggestions

• Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens
• I leave you the task of researching the box-sizing: border-box
• You can use the gap property in the body to separate your main from your footer
• Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 20px; /* Separate the main from the footer */
}

Removing the height: 80% and adding maybe a little bit of padding for the top and bottom will make it more neat across all devices. Right now there's some extra space when the height of the device is a bit too high. Overall good job!