/* Global Styles */
html, body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: larger;
    font-weight: 300;
    margin: 0;
    padding: 0;
    background-image: url('background2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    color: white; /* Default text color */
}

/* Navbar */
.navbar {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 20px; /* Spacing between links */
    margin: 20px 40px 0 40px; /* Add spacing around navbar */
    position: relative; /* To maintain placement */
    align-items: center; /* Ensures vertical alignment */
}

.navbar li {
    position: relative;
}

.navbar-logo {
    position: absolute;
    top: -50px; /* Adjust to align with the navbar vertically */
    left: 20px; /* Adjust for horizontal placement */
    height: 200px; /* Set the size of the logo */
    z-index: 1; /* Ensure the logo appears above the navbar */
}

.navbar li a {
    color: white;
    text-decoration: none;
    padding: 8px 15px; /* Adds padding around text for easier clicking */
    font-size: 1.2rem; /* Slightly smaller font */
    transition: color 0.3s ease;
}

.navbar li a:hover {
    color: gold;
}

.navbar li::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: gold;
    transition: width 0.3s ease;
}

.navbar li:hover::after {
    width: 100%;
}

/* Main Content */
#content {
    position: relative;
    margin: 0 auto;
    text-align: center;
    max-width: 700px; /* Slightly reduced width */
    padding: 32px; /* Adds padding around the content */
    line-height: 1.6em; /* Adjusted line height for text readability */
    margin-top: 50px; /* Adds spacing below the navbar */
}

#content h1 {
    font-size: 2.5rem; /* Adjusted heading size */
    margin-bottom: 20px; /* Adds spacing below the heading */
}

#content p {
    text-align: justify;
    font-size: 1rem; /* Adjusted font size for better readability */
    margin-bottom: 20px; /* Adds spacing below the paragraph */
}

.avatar {
    border-radius: 50%;
    width: 140px; /* Smaller avatar size */
    border: 3px solid white; /* Added a white border */
    margin-bottom: 20px; /* Adds spacing below the avatar */
}

/* Icons (Logos) */
.icons {
    list-style: none;
    font-size: large;
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 60%;
    max-width: 300px; /* Smaller width for icons container */
    margin: 30px auto; /* Adds spacing above and below icons */
}

.icons a i {
    font-size: 2rem; /* Reduced icon size */
    color: white;
    transition: color 0.3s ease;
}

.icons a:hover {
    color: gold;
}

/* Hyperlinks */
a {
    text-decoration: none;
    color: white;
    transition: color 0.3s ease;
}

a:hover {
    color: gold;
}

/* Specific Links (Gold by Default) */
a[href*="kcl.ac.uk"], a[href*="bankofengland.co.uk"] {
    color: gold;
}

a[href*="kcl.ac.uk"]:hover, a[href*="bankofengland.co.uk"]:hover {
    color: lightgoldenyellow;
}

/* Small Font */
.small-font {
    font-size: 0.7em;
    color: white;
}

.news-list {
  font-size: 1rem;
}