/* 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 {
  background-color: white;
  color: black;
  font-family: "Impact", sans-serif;
  background-image: url('images/bliss_uncropped_4k.png');
}

.freaky {
  font-family: "Papyrus", "Herculanum", "Curlz MT", fantasy;
}

.line-break {
  flex-basis: 100%;
}
.product {
  width: 250px;
  height: 225px;
  background-color: #ffffff;
  border: 1px solid black;
  font-family: sans-serif;
  font-size: 12px;
  text-align: center;
}

.product-image {
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

nav ul {
    list-style-type: none; /* Removes bullet points */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Recommended for a floating menu */
    background-color: #333; /* Example background color */
}

nav li {
    float: left; /* Makes the list items sit next to each other */
}

nav li a {
    display: block; /* Makes the entire link area clickable */
    color: white; /* Text color */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; /* Removes default link underline */
}

nav li a:hover {
    background-color: #ddd; /* Color change on hover */
    color: black;
}