body {
margin: 0;
font-family: Verdana, Arial, sans-serif;
color: #594644;
background-image:
linear-gradient(
to bottom,
rgba(24, 25, 24, 0.92) 0%,
rgba(67, 69, 58, 0.88) 40%,
rgba(89, 70, 68, 0.85) 70%,
rgba(140, 102, 74, 0.80) 100%
),
url("https://asterie-falling-star.neocities.org/backgrounds/lily.jpeg");

background-size: cover;
background-position: center;
background-attachment: fixed;
}
/*readable text*/
.text {
  color: white;
}
.text {
  background:rgba(89, 70, 68, 0.6);;
  padding: 20px;
  border-radius: 12px;
}

.text li {
  color: #ffffff;
}


h1 {
  color: #552530;
  text-shadow:
    0 0 8px #ffffff,
    0 0 16px #ff9dfc,
    0 0 24px #ff9dfc;
}

h2 {
  text-shadow: 0 0 8px #ffffff;
}
h2 {
  color: #552530;
  text-shadow:
    0 0 6px #7E707A,
    0 0 12px #7E707A,
    2px 2px 4px #7E707A; /* helps readability on images */
}

.subtitle {
  background: #8C664A;
  padding: 6px;
  border-radius: 6px;
}
.subtitle {
  color: #7E707A; /* softer readable color */
  background: rgba(0, 0, 0, 0.45);
  padding: 10px;
  border-radius: 8px;
  text-align: center;

  text-shadow:
    0 0 6px rgba(85, 37, 48, 0.8),
    0 0 12px rgba(85, 37, 48, 0.5);
}

.highlight-text {
  background: rgba(0, 0, 0, 0.6); /* dark translucent highlight */
  padding: 4px 8px;
  border-radius: 6px;
}
/* centered website box */
.site {
width: 820px;
margin: 60px auto;
border-left: 4px solid #7E707A;
border-right: 4px solid #7E707A;
box-shadow: 0 0 25px rgba(0,0,0,0.35);
}

/* header */
header {
background-image: url("https://asterie-falling-star.neocities.org/backgrounds/sunny.jpg");
text-align: center;
padding: 25px;
border-bottom: 4px dotted #552530;
}

header h1 {
margin: 0;
font-size: 36px;
text-shadow: 0 0 10px #ffffff;
}

.subtitle {
margin-top: 8px;
}

/* layout */
.layout {
display: flex;
}

/* sidebar */
.sidebar {
width: 220px;
background: #43453A;
padding: 20px;
}

.sidebar h2 {
margin-top: 0;
  color: #552530;
  text-shadow:
    0 0 6px #7E707A,
    0 0 12px #7E707A,
    0 0 18px #7E707A;
}

.sidebar a {
display: block;
margin: 6px 0;
text-decoration: none;
color: #7E707A;
transition: 0.2s;
}


/* click glow */
.sidebar a:active {
text-shadow:
0 0 8px #ffffff,
0 0 16px #7E707A,
0 0 22px #594644;
}

/* active page */
.sidebar .current {
color: #ffffff;
text-shadow:
0 0 10px #ffffff,
0 0 18px #7E707A,
0 0 24px #8C664A;
}

.magic {
margin-top: 20px;
}

/* main content */
.content {
flex: 1;
background-image: url("https://asterie-falling-star.neocities.org/backgrounds/flowerbg.jpg");
 background-repeat: no-repeat; /* Prevents the image from tiling */
    background-size: cover;      /* Scales the image to cover the entire box */
    background-position: center; /* Centers the image within the box */
padding: 30px;
color: #181918;
}

.content h2 {
margin-top: 0;
}

/* updates list */
ul {
padding-left: 20px;
}

/* blinkies */
.blinkies img {
height: 31px;
margin: 4px;
}

/* footer */
footer {
background: #8C664A;
text-align: center;
padding: 15px;
}

/* MUSIC PLAYER */
.record-player {
text-align: center;
}

.record {
width: 220px;
display: block;
margin: 15px auto;
}

.spinning {
animation: spin 5s linear infinite;
}

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* cute buttons */
.buttons {
display: flex;
justify-content: center;
gap: 12px;
}

.buttons button {
font-size: 14px;
padding: 8px 16px;
border-radius: 20px;
border: 3px solid #43453A;
background: #8C664A;
color: #181918;
cursor: pointer;
}

.buttons button:last-child {
border-color: #552530;
background: #594644;
color: #ffffff;
}

.playlist {
margin-top: 12px;
}

.playlist button {
font-size: 12px;
padding: 6px 12px;
margin: 4px;
border-radius: 14px;
border: 2px solid #43453A;
background: #7E707A;
cursor: pointer;
}

.playlist button:hover {
transform: translateY(-2px);
}