/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
  color: black;
  font-family: comic sans;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* <--- ADD THIS LINE HERE */
background-image: url('background2.jpg');
  background-size: cover;       /* Stretches it to fill the whole screen */
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Keeps the photo from moving when you scroll */
}

.main-header {
 background-image: url('header2.jpg');
  background-repeat: no-repeat; /* THIS IS THE MOST IMPORTANT LINE */
  background-position: center;
  width: 100%;                 /* Fills the full width of the screen */
  height: 500px;                /* You can adjust this height */
  display: block;
}

.logo {
  max-width: 490px; /* Adjust this to make your name bigger or smaller */
  height: auto;
  /* Optional: adds a slight glow if the logo is hard to see against the shop */
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); 
 /* Use these to nudge the logo around */
  margin-left: 330px;  /* Pushes it away from the left edge */
  margin-top: 20px;   /* Pushes it down from the top edge */
}