/*Alex Sprague 9/16/25*/

/* === Page Setup === */
body {
  background-image: url('images/subtle-fantasy-backg.png'); /* sets an image as the background */
  background-size: cover;                                   /* makes the immage cover the whole screen */
  background-repeat: no-repeat;                             /* keeps the image from repeating*/
  background-position: center;                              /* makes sure in stays centered */
  background-attachment: fixed;                             /* the image doesnt move while scrolling */
  color: rgb(255, 200, 164);                              /* sets the text color */
  text-shadow: 5px 5px 2px rgba(255, 102, 71, 0.527);     /* sets the text-shadow color*/
  font-size: 175%;                                          /* sets the default size of all text to 3x the normal size*/
  font-family: "MedievalSharp";                             /* generic old script */
  margin-top: 50px;
  position: relative;
}

/* === Main Headings === */
h1 {
  color: rgb(255, 161, 133);                               /* sets the font color */
  font-family: 'Uncial Antiqua';                            /* Fantasy-style font  */
  font-size: 200%;                                          /* Slightly smaller than body but still bold */
  animation: glowPulse 2s infinite ease-in-out;             /* Glowing effect that pulses */
}

section h1 {
  margin-bottom: 5px;
}

/* === Subheadings === */
h2, h3, h6 {
  color: rgb(255, 161, 133);                                
  font-family: 'Uncial Antiqua'; 
  text-shadow: 5px 5px 2px rgba(255, 138, 71, 0.527);     /* sets the text-shadow color*/                         
}

h2 {
  animation: glowPulse 2s infinite ease-in-out;             /* Glowing effect that pulses */
}

div {
  clear: both;
}

img {
  border-radius: 15px;
}

/* === Content Boxes === */
article {
  background-color: rgba(41, 41, 41, 0.5);              /* Dark box with 50% transparency */
  border: 3px outset rgb(255, 38, 0);                   /* Reddish border to frame the section */
  box-shadow: 12px 12px 12px rgba(255, 75, 43, 0.637);     /* Soft shadow for depth */
  width: 90%;                                             /* Makes the box wide but not full screen */
  margin: auto;                                           /* Centers it horizontally */
  margin-top: 10px; 
  margin-bottom: 10px;                                    /* Adds space above and below */
  padding: 10px;                                          /* Adds space inside the box */
  overflow: hidden;                                       /* Keeps stuff from spilling out */
  border-radius: 20px;
}

section {
  position: relative;
}

/* === Footer === */
footer {
  font-size: 33%;                                         /* Makes footer text small */
  text-align: center;                                     /* Centers the footer */
} 

/* === Navigation === */
nav {
  top: 0;                                                 /* Pins it to the top edge */
  left: 0;                                                /* Aligns it to the left edge */
  width: 100%;                                            /* Stretches it exactly across the screen */
  z-index: 1100;                                          /* Keeps it above everything else */
  text-align: center;                                     /* Centers the nav links */
  margin-top: 0;                                              /* Removes any default spacing */
  background-color: rgba(41, 41, 41);                /* Dark background */
  border: 1px solid rgb(255, 99, 71);                /* Thin red border */
  box-shadow: 5px 5px 5px rgba(255, 76, 45, 0.854);    /* Soft shadow */                                        /* Centers the box */
  border-radius: 20px;
  position: fixed;
  height: 30px;
}


/* === Links === */
a {
  color: rgb(255, 99, 71);                             /* Default link color */
  text-decoration: none;                                 /* No underline by default */
  display: inline-block;                                 /* Lets transform effects work properly */
}

a:hover {
  color: rgb(255, 160, 122);                          /* Changes color on hover */
  text-decoration: underline;                           /* Adds underline when hovered */
  transform: scale(1.15) rotate(-5deg);                 /* Makes it bigger and tilted */
  animation: glowPulse 2s infinite ease-in-out;         /* Adds glowing pulse */
}

/* === Glowing Element === */
#glow {
  transition: transform 0.3s ease, filter 0.3s ease;   /* Smooth animation */
  filter: drop-shadow(0 0 10px #ff3c3c);             /* Red glow around it */
  animation: glowPulse 2s infinite ease-in-out;        /* Pulsing glow effect */
}

/* === Glow Animation === */
@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px #ff3c3c);           /* Normal glow */
  }
  50% {
    filter: drop-shadow(0 0 20px #ff6b6b);           /* Brighter glow mid-pulse */
  }
}

/* === Utility Box === */
.box {
  background-color: rgba(41, 41, 41);                /* Dark background */
  border-bottom: 1px solid rgb(255, 99, 71);                /* Thin red border */
  box-shadow: 5px 5px 5px rgba(255, 76, 45, 0.854);    /* Soft shadow */
  margin: auto;                                        /* Centers the box */
  margin-top: 30px;
  border-radius: 20px;
}

.product-name {
  position: sticky;
  top: 35px;
  bottom: 0px;
  z-index: 1000;
  border: 1px solid rgb(255, 99, 71);                /* Thin red border */
  box-shadow: 5px 5px 5px rgba(255, 76, 45, 0.854);    /* Soft shadow */
  margin-top: 30px;
  text-align: center;
  background-color: rgba(41, 41, 41);                /* Dark background */
  border-radius: 50px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  animation: none;

}