/* Apply this to the base styles so it affects both desktop and mobile */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #ccffcc;
}

body {
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  display: flex;
  flex-direction: column;   /* Stacks elements vertically */
  justify-content: flex-start; /* Aligns content to the top */
  align-items: center;      /* Centers content along the horizontal axis */
  padding-top: 40px;           /* Optional: adds breathing room at the very top */
  text-align: center;       /* Ensures text strings inside elements are centered */
}

/* Reset default browser spacing for text */
h1, h2, h3 {
    margin: 18px;
    padding: 0px;
}

.head6 {
    margin: 6px;
    padding: 0px;
}

p {
    margin: 6px;
    padding: 3px;
	line-height: 1.25; /* Scales the line height relative to the font size */
	max-width: 100%;
}

img.merchpic {
  width: 40%;         /* Destktops: Take up 40% of the page width */
  max-width: 100%;    /* Prevent tiny images from stretching and getting blurry */
  height: auto;
}

img.logo {
  width: 25%;         /* Destktops: Take up a quarter of the page width */
  max-width: 100%;    /* Prevent tiny images from stretching and getting blurry */
  height: auto;
}
/* Force the logo paragraph to take up the full screen width */
p.logo-line {
  margin: 6px;
  padding: 3px;
  line-height: 1.25; 
  width: 100%; 
  max-width: 100%;
}
 
/* This targets only mobile screens (widths under 600px) */
@media (max-width: 600px) {
  body {
    font-size: 16px; /* Makes the font a little bigger on mobile */
  }
  img.merchpic {
    width: 90%;         /* Mobiles: Take up most of the page width */
    height: auto;
}
  img.logo {
	width: 50%;   /* Mobiles: Take up half the page width */
	height: auto; /* Maintains the original aspect ratio */
  }
}

/* unvisited link */
a:link {
  color: #0000ff;
}

/* visited link */
a:visited {
  color: #800080;
}

ul.myUL {
  text-align: left;
}