/* 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." */

@font-face {
  font-family: 'Fontdiner Swanky';
  src: url('FontdinerSwanky-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Fontdiner Swanky', cursive !important;
  background-image: url('paperbg.jpg');
  background-repeat: repeat;
  background-size: 1300px;
  background-attachment: fixed;
}

.main-container {
  background-color: rgba(255, 255, 255, 0.8); /* White with 80% transparency */
  padding: 40px;
  border-radius: 5px; /* Gives it those soft, rounded corners */
  border: 3px solid #ff99cc; /* A cute pink border to define the section */
  box-shadow: 5px 5px 0px #000; /* Retro "hard" shadow effect */
}

h1 {
  background-color: #ff99cc;
  color: white;
  padding: 5px 10px;
  display: inline-block;
  border-radius: 5px;
  box-shadow: 5px 5px 0px #000; /* Retro "hard" shadow effect */
}

h2, h3 {
  background-color: #ff99cc; /* Solid color for your headers */
  color: white;
  padding: 5px 10px;
  display: inline-block; /* Makes the background only as wide as the text */
  border-radius: 5px;
  box-shadow: 5px 5px 0px #000; /* Retro "hard" shadow effect */
}

/* This targets the specific image you want to move above the header */
.header-icon-1 {
  display: block;    /* Forces the image onto its own line */
  margin: 0 auto;   /* Centers it horizontally */
  clear: both;      /* Ensures no other elements float next to it */
}

.header-icon-2 {
  display: block;
  margin: 0 auto;
  clear: both;
  
}

.header-icon-3 {
  display: block;
  margin: 0 auto;
  clear: both;
  
}