/* 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: 'Georgia', serif;
  width:60%;
  margin: 0 auto;            /* Centers the 60% container on the page */
  padding: 0 20px;           /* Prevents text from hitting the absolute left/right edges */
  box-sizing: border-box;    /* Keeps padding inside the width calculation */
  overflow-wrap: break-word; /* Forces long text/URLs to wrap instead of overflowing */
}

@media screen and (max-width: 768px) {
  body {
    width: 100%;
    padding: 0 15px;         /* Keeps a small 15px gap on small phone screens */
  }
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}   

a:link {
  color: #FF00C3;
}

a:visited {
  color: #BB00FF;
}

a:hover {
  color: black;
  background-color: violet;
  padding: 2px 4px;
  border-radius: 4px;
}

h1 {
  color: #FF00C3;
}

h2 {
  color: #BB00FF;
}

h3 {
  color: violet;
}

h4 {
  color: violet;
}

hr {
  border: 1px solid black;
}

p img {
  max-width: 100%;
  height: auto;
  display: block; /* optional, but removes unwanted inline whitespace below the image */
}

blockquote {
  max-width: 50%; 
  margin: 1em auto;
  padding: 0.5em;
}

.blockquote-alt {
  max-width: 65%;
  font-size: 0.9em;
}

/* 1. rotation image */
@keyframes gentle-shake {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(-5deg); /* Counter-clockwise 5 degrees */
  }
  66% {
    transform: rotate(5deg);  /* Clockwise 10 degrees (from -5 to +5) */
  }
  100% {
    transform: rotate(0deg);  /* Back to original position */
  }
}

/* 2. image class on hover */
.shake-on-hover:hover {
  animation: gentle-shake 0.4s ease-in-out;
}

sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  top: -0.3em;
  
}
summary::marker {
  content: "♡";
}

/* Change the open state symbol */
details[open] summary::marker {
  content: "☆";
}