html, body {
height: 100%;
margin: 0;
background-color: black;
color: yellow;
  font-size: 20px; /* Base font size */
}

.container {
display: flex;
flex-direction: column;
min-height: 100%;
}

.text-left {
text-align: left;
}

.text-size-button {
cursor: pointer;
}

h2, h3 {
text-align: center;
}

.image-link img {
width: 30px;
height: 30px;
border: none;
}

.image-link img {
object-fit: cover;
}

.greeting {
}

.copyright {
}

main {
flex: 1;
}

footer {
text-align: left;
}

/* Style for the unordered list */
ul {
list-style-type: none; /* Remove bullet points */
padding: 0;
}

li {
padding: 10px;
}

li a {
text-decoration: none; /* Remove underline */
color: inherit; /* Inherit text color from parent */
background-color: inherit; /* Inherit background color */
display: block; /* Make the link fill the entire list item */
padding: 10px;
}

ul li a:hover {
color: darkred; /* Highlight color */
}