/* 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 spacing */
  padding: 0;
  background-image: url('background.jpg'); /* your image */
  background-size: cover;      /* makes it cover the whole screen */
  background-position: center; /* keeps it centered */
  background-repeat: no-repeat; /* prevents tiling */
  height: 100vh;               /* ensures the body takes full viewport height */
}
a:link {
  color: #ff6700;
}
h1 {
  text-align: center;
}
a {
  text-decoration: none;
  color: #ff6700;
  padding: 2px 6px;
  border: 2px outset #fff; /* raised effect */
  background: #c0c0c0;
  display: inline-block;
  margin: 3px;
  transition: all 0.1s ease-in-out; /* smooth hover animation */
}

a:hover {
  border-style: inset;        /* makes it look pressed */
  transform: translate(1px, 1px); /* slight move to mimic depression */
  background: #a0a0a0;        /* optional darker shade for pressed look */
}
.centered {
  display: block;
  margin: 20px auto; /* top/bottom 20px, left/right auto */
}

.content-box {
  width: 600px;               /* or any width you like */
  margin: 50px auto;          /* centers the box horizontally */
  background-color: #c0c0c0;  /* classic gray “window” look */
  border: 2px solid #fff;     /* beveled border */
  padding: 20px;
  box-shadow: inset -2px -2px #fff, inset 2px 2px #808080; /* retro 3D effect */
  text-align: center;          /* centers text and images inside */
}
ul {
  list-style-type: disc;   /* standard bullets */
  padding-left: 40px;      /* indent from the content box */
  text-align: left;        /* keeps bullets aligned left even if the box is centered */
  margin: 10px 0;          /* spacing around the list */
}

li {
  margin: 5px 0;           /* spacing between items */