html {
scroll-padding-top: 19rem;
scroll-behavior: smooth;
}
body {
margin: 0;
/* background-color: #34623F; */
font-family: 'Courier New', Courier, monospace;
/* background-image: url("data:image/svg+xml,") */
/* background-image: url("data:image/svg+xml,") */
/* background-image: url("data:image/svg+xml,") */
/* background-image: url("data:image/svg+xml,") */
/* background-image: url("data:image/svg+xml,") */
/* background-image: url("data:image/svg+xml,") */
/* background-image: url("data:image/svg+xml,") */
background-image: url("data:image/svg+xml,")
}
.header {
text-align: center;
padding: 1.5rem;
}
.content-box {
width: 80%;
margin: 2rem auto; /* centers it horizontally and adds vertical spacing */
box-sizing: border-box;
/* background-color: #ece9e9; */
/* background-color: #ffffff; */
background-color: rgba(255, 255, 255, 1.0);
padding: 2rem;
/* border-radius: 8px; */
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
font-size: 1rem;
line-height: 1.6;
white-space: normal; /* ✅ allow wrapping */
word-break: break-word; /* ✅ break long words */
overflow-wrap: break-word; /* ✅ broader support */
}
@media (max-width: 768px) {
.content-box {
width: 90%;
margin: 1rem auto;
padding: 1rem;
}
}
@keyframes shine {
0% { background-color: rgb(255, 189, 189); }
100% { background-color: transparent; }
}
.highlight-target.shine {
animation: shine 1.5s ease-out;
}