/* 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-image: url('img/background.jpg');
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
}
  .header {
 width: 100%;
 height: 500px;        /* adjust to desired height */
 object-fit: cover;    /* crops image nicely if it’s too tall */
 display: block;
}
.glitch-text {
 text-align: center;
 font-family: monospace;
 font-size: 18px;
 color: #e6e0d8;
 display: block;
 animation: shake 0.3s infinite;
 text-shadow: 1px 0 #ff0000, -1px 0 #00ffea;
 max-width: 900px;   /* limits width so text stretches nicely */
 margin: 20px auto;  /* centers the paragraph horizontally */
 line-height: 1.5;   /* gives vertical spacing between lines */
  z-index: 2; 
}
.tiny-text {
 text-align: center;
 font-family: monospace;
 font-size: 14px;
 font-weight: bold;
 color: #ff0000;
 text-shadow: 1px 1px 2px #000000;
 display: block;
 z-index: 3; 
}
.blurred-strike {
 text-decoration: line-through;   /* adds strikethrough */
 color: #e0e0e0;                 /* light gray color */
 filter: blur(1.5px);            /* adds blur */
 font-family: monospace;          /* matches your glitch/ritual aesthetic */
 text-align: center;              /* optional, center on page */
 display: block;                  /* ensures it behaves as a block */
}
.header-container {
 position: relative; /* establishes stacking context */
 z-index: 0;         /* header background at the bottom */
}
.sticky-container {
 position: relative; /* allows absolute positioning of notes */
 z-index: 1;         /* sticky notes above header but below text */
 width: 100%;
 height: 0;          /* we'll position notes absolutely relative to page */
}
/* Fully randomized sticky notes */

.sticky-note {

  position: absolute;

  opacity: 0.75;          /* semi-transparent */

  transform-origin: center center;

}

/* Randomized positions, rotations, and sizes */

.note1  { top: 40px;  left: 60px;   width: 120px; transform: rotate(-8deg); }

.note2  { top: 180px; left: 280px;  width: 140px; transform: rotate(5deg); }

.note3  { top: 80px;  left: 520px;  width: 110px; transform: rotate(-3deg); }

.note4  { top: 250px; left: 500px;  width: 130px; transform: rotate(7deg); }

.note5  { top: 70px; left: 550px;  width: 115px; transform: rotate(-6deg); }

.note6  { top: 320px; left: 1140px; width: 140px; transform: rotate(4deg); }

.note7  { top: 60px;  left: 1350px; width: 125px; transform: rotate(-5deg); }

.note8  { top: 280px; left: 1550px; width: 130px; transform: rotate(6deg); }

.note9  { top: 400px; left: 400px;  width: 120px; transform: rotate(-7deg); }

.note10 { top: 500px; left: 900px;  width: 140px; transform: rotate(3deg); }

.note11 { top: 450px; left: 1700px; width: 130px; transform: rotate(-4deg); }

.glitch-button {
 font-family: monospace;
 font-size: 16px;
 padding: 10px 20px;
 margin: 10px;
 background: none;
 border: 2px solid #e6e0d8;
 color: #e6e0d8;
 cursor: pointer;
 position: relative;
 text-decoration: none;
 display: inline-block;
 overflow: hidden;
 transition: color 0.2s, border-color 0.2s, transform 0.1s;
}
/* Hover: red + glitch */
.glitch-button:hover {
 color: #ff0000;
 border-color: #ff0000;
 animation: glitch-text 0.3s infinite;
}
/* Glitch animation */
@keyframes glitch-text {
 0%   { text-shadow: 1px 0 #00ffea, -1px 0 #ff00ff; }
 25%  { text-shadow: -1px 0 #ff00ff, 1px 0 #00ffea; }
 50%  { text-shadow: 2px 0 #00ffea, -2px 0 #ff00ff; }
 75%  { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffea; }
 100% { text-shadow: 1px 0 #00ffea, -1px 0 #ff00ff; }
}
/* Optional tiny shake on hover */
.glitch-button:hover {
 transform: translate(-1px, 0px);
 animation: glitch-text 0.3s infinite;
}
 
@keyframes shake {
 0% { transform: translate(0px, 0px); }
 25% { transform: translate(-1px, 0); }
 50% { transform: translate(1px, 0); }
 75% { transform: translate(-1px, 0); }
 100% { transform: translate(0px, 0); }
}