/* 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 {
  margin: 0; /* Remove default margin */
  height: 100vh; /* Full viewport height */
  background-image: url("/images/winback.jpg"); /* Replace with your image path */
  background-size: cover; /* Scale image to cover entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent tiling */
  background-attachment: fixed; /* Optional: keeps image fixed on scroll */
  color: black;
  font-family: "Courier New", "Segoe UI", Tahoma, Geneva;
  }

h1 {
  color: gold;
  font-size: 5vw;
}

h2 {
  color: gold;
  font-size: 3vw;
}

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  background-color: red;
  color: black;
}

ul {
  /* border: 2px solid rebeccapurple; */
  padding: 0.2em;
  display: flex;
  list-style: none;
}

li {
  border: 2px solid blue;
  padding: 0.2em;
  margin: 0.5em;
}

.grid { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  align-items: stretch;
  justify-items: center;
  }
.grid img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
}