CSS being identified as html thus giving error

[Lfauzia]

/*alignment */
header > div,h1, h2, h3, h4, h5,footer {
text-align: center;

}

body{
font-family: 'Trirong', serif;
font-size: 19px;
}

/* Common styles for anchor tags */
a {
text-decoration: none;
color: #000000;
}

/* Navigation menu styles */
header > div {
display: flex;
justify-content: space-between;
background-color: #95a5a6;
overflow: auto;
font-weight: 400;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

}

header > div a {
padding: 12px 20px;
color: #000000;
text-decoration: none;
width: 22.8%;
transition: transform 0.3s ease;
}

header > div a:hover {
background-color: #8e9a9a;
transition: background-color 0.3s ease;
transform: translateY(-2px);
}

a.active {
background-color: #667e8e;
}

/* Main content area styles */
main {

margin: 0 auto; /* Center the main content */

}

/* Additional styles */
main a[href="https://lfauzia.github.io/web250/index.html"],
main a[href="https://lfauzia.github.io/web215/index.html"],
main a[href="https://lfauzia.github.io/web250/introduction.html"] {
text-decoration: underline;
}

main > div > figure > img {
display: block;
margin: 0 auto;
max-width: 100%;
}

main > div > figure > figcaption {
text-align: center;
font-style: italic;
}

#signature {
font-style: italic;
}

/* Container Styles /
main > div {
background-color: #f0f0f0;
max-width:90%;
margin: 10px auto; / Center the container and add top/bottom margin /
padding: 20px;
border-radius: 50px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); / Added shadow for depth */

}

main p:nth-child(2) a {
text-decoration: underline;
}

/* Header */
header {
margin-left: auto;
margin-right: auto;
max-width: 95%;
}

/* Footer navigation bar styles */
footer {
background-color: #95a5a6;
text-decoration: none;
overflow: auto;
font-size: small;
margin-left: auto;
margin-right: auto;
max-width: 95%;
box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1);
}

/* Gradient Background */
header > div, footer {
background: linear-gradient(to right, #95a5a6, #7f8c8d);

}

/* Responsive Design /
@media screen and (max-width: 768px) {
header > div, footer {
padding: 15px;
font-size: 14px;
}
}
/ logo /
.brand-content {
display: flex;
align-items: center; / Center vertically */
}

.text {
flex: 1; /* Take up remaining space /
padding-right: 20px; / Add space between text and image */
}

img.logo {
max-width: 100%;
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3); /* Add shadow effect /
float: right; / Align the image to the right */
}

/* my color palette*/
.color-F8F8F8 {
background-color: #F8F8F8;
color: #000000;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.color-f0f0f0 {
background-color: #f0f0f0;
color: #000000;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.color-95a5a6 {
background-color: #95a5a6;
color: #000000;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.color-000000 {
background-color: #000000;
color: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.color-a5babb {
background-color: #a5babb;
color: #000000;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.color-8e9a9a {
background-color: #8e9a9a;
color: #000000;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.color-667e8e {
background-color: #667e8e;
color: #000000;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
/* my color palette ends */