@font-face {
  font-family: 'Bloopoly'; /* Choose a name for your font */
  src: url('fonts/Bloopoly.ttf') format('truetype'), /* Add other formats if you have them */
  /*font-weight: normal;*/
  /*font-style: normal;*/
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  background: url("images/blackdenim.jpg") no-repeat center center fixed;
  background-size: cover;
}

main {
  /* This is your top layer */
  background-color: #ffffff;
  width: 80%;            /* Adjust width as needed */
  max-width: 800px;      /* Keeps it from getting too wide on big screens */
  padding: 40px;
  border-radius: 15px;   /* Rounded corners */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Adds depth/shadow */

  }



img {
  margin: auto;
  display: block; /* Images are inline by default, must be block for auto margins to work */
  margin-left: auto;
  margin-right: auto;
  width: 30%; /* Optional, but recommended to prevent the image from stretching the full width of the container */
 }
 
 h1 {
    font-family: 'Bloopoly', serif;
    font-size: 76px;
    text-align: center;
 }