/* ========================================================
   Border properties for at least 1 div
======================================================== */
.menu {
    border: 2px solid #333;
    background-color: #f8f8f8;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

/* ========================================================
   5 different states of the anchor tag in the menu
======================================================== */
/* 1. Unvisited link */
.menu a:link {
    color: #333;
    text-decoration: none;
    padding: 10px;
    margin: 0 5px;
}

/* 2. Visited link */
.menu a:visited {
    color: #666;
}

/* 3. Hover state */
.menu a:hover {
    background-color: #333;
    color: white;
    text-decoration: underline;
}

/* 4. Active state (when being clicked) */
.menu a:active {
    color: orange;
}

/* 5. Focus state (when navigating with keyboard) */
.menu a:focus {
    outline: 2px solid blue;
}


/* ========================================================
   Layout of image and text using the float property
======================================================== */
.news-image {
    float: left; /* Floats the image to the left so text wraps on the right */
    margin-right: 15px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}

/* Clearfix to ensure the container wraps around floated elements properly */
.news-container::after {
    content: "";
    display: table;
    clear: both;
}

/* ========================================================
   Specific styling for the "continue reading" link
======================================================== */
a.continue-link:link, a.continue-link:visited {
    color: blue;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    display: block; /* Puts the link on its own line */
    margin-top: 15px;
}

a.continue-link:hover, a.continue-link:active, a.continue-link:focus {
    color: red;
    text-decoration: underline;
}