body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Roboto', sans-serif; /* Apply the Roboto font to the whole page */
}

header {
    background-color: black;
    text-align: center;
    padding: 10px;
}

h1 {
    color: white;
    font-weight: 300; /* Match the font weight to the one specified in the Google Fonts link */
}

.background-container {
    background-image: url('/image/betelgeuse.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: calc(100% - 100px); /* Assuming header height is 100px; adjust if necessary */
    overflow: auto; /* Enable scrolling within the background container */
}

.info-text {
    color: black;
    background-color: rgba(255, 255, 255, 0.8); /* 80% transparent white background */
    padding: 20px;
    text-align: center;
    border-radius: 8px; /* Optional: for rounded corners */
    margin: 20px; /* Optional: to ensure some space around the box */
    max-width: 800px; /* Optional: to limit the width of the text box */
    margin-left: auto; /* Optional: to horizontally center the text box */
    margin-right: auto; /* Optional: to horizontally center the text box */
}

.news-list {
    background-color: rgba(34, 34, 34, 0.5);  /* Dark grey with 0.5 transparency */
    border-radius: 8px;
    margin: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    text-align: left;  /* Align text to the left within the news list */
    list-style-type: none;  /* Remove bullet points */
}

.news-item {
    padding: 10px 0; /* Padding between news items */
    color: white; /* Make text color white */
}

.news-date, .news-title, .news-link {
    display: block; /* Each element takes its own line */
    margin-bottom: 5px; /* Space between elements within a news item */
}

.news-link {
    text-decoration: none; /* Remove underline from link */
    color: blue; /* Set link color */
}

strong {
    font-weight: bold !important; /* The !important flag ensures this rule takes precedence */
}

/* Responsive design */
@media (max-width: 768px) {
    header {
        padding: 20px;
    }
    .info-text, .news-list {
        padding: 10px;
        margin: 10px; /* Adjusted margin for smaller screens */
    }
}
