body {
    font-family: sans-serif ;
    background: #ffffff ;
    color: #000 ;
}

main {
    max-width: 100% ;
    margin: auto ;
}

img {
    max-width: 100% ;
}

header h1 {
    text-align: center ;
}

footer {
    text-align: left ;
    clear: both ;
    float: right;
}

header {
    width: 232px;
    position: fixed;
    padding-top: 4.0em;
    text-align: center;
}
article {
    float: left;
    padding-left: 20.0em;
}

table {
    border-collapse: collapse;
    border: 1px solid black;
}

td, th {
    border: 1px solid black;
}


/* For TAGLIST.HTML */
.taglist {
	text-align: center ;
	clear: both ;
}

/* For NEXTPREV.HTML */
#nextprev {
	/* The container for both the previous and next articles. */
}
#prevart {
	float: left ;
	text-align: left ;
}
#nextart {
	float: right ;
	text-align: right ;
}
#nextart,#prevart {
	max-width: 33% ;
}

.image.avatar img {
  border-radius: 100%;
  width: 45%;
  padding: 20px;
}
/* Responsive Image */
.image.avatar img {
    border-radius: 100%;
    width: 45%;
    padding: 20px;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    header {
        width: 100%; /* Make header full-width on mobile */
        position: relative; /* Release fixed position */
        padding-top: 1em; /* Adjust padding */
    }

    article {
        float: none; /* Stack articles vertically */
        padding-left: 0; /* Remove left padding */
        padding-top: 1em; /* Add some top padding */
    }

    #prevart, #nextart {
        max-width: 100%; /* Full width on small screens */
        float: none; /* Stack vertically */
    }

    footer {
        text-align: center; /* Center footer text */
        float: none; /* Remove float */
    }

    .image.avatar img {
        width: 60%; /* Adjust image size */
        padding: 10px; /* Less padding */
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5em; /* Adjust title size on small screens */
    }

    /* Further adjustments for very small screens */
    .image.avatar img {
        width: 80%; /* Adjust image size for mobile */
    }