@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Red+Hat+Display&display=swap');

body {
    background: #4f6d7f;
    font-family: 'Red Hat Display', sans-serif;
}

/* H1- Headings, top of the page, etc. */
h1 {
    font-family: 'Bebas Neue', sans-serif;
    text-align: center;
}

/* H2 - Smaller headings, within pages, etc. */
h2 {
    font-family: 'Bebas Neue', sans-serif;
    text-align: center;
}

h3 { 
    font-family: 'Bebas Neue', sans-serif;
    text-align: center;
}

p { 
    text-align: center;

}

.text-container {
    max-width: 800px; /* Adjust this value to your desired width */
    margin: 0 auto;  /* Center the container horizontally if needed */
}

.text-container p {
    margin: 0; /* Remove default paragraph margins */
}

a {
    color: #dd6e42;
}

/* Hover effect for links */
a:hover {
    color: #ffffff; /* Change text color on hover */
}

/* Settings for the header */
header {
    float: center;
    margin-bottom: 10px;
}

footer {
    margin-top: 100px;
}

/* HEADER STYLING */
/* Resetting default margin and padding for the list */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Style for the list items (navigation links) */
nav ul li {
    display: inline; /* Display links horizontally */
    margin-right: 20px; /* Add some spacing between links */
}

/* Style for the bottom navigation row with space below it */
.newline-link {
    /* Add space above + below the bottom row */
    margin-top: 10px; 
    margin-bottom: 10px; 
}

/* Style for the bottom navigation row links */
.newline-link {
    display: inline-block; /* Display links horizontally */
    margin-right: 20px; /* Spacing between bottom row links */
}

/* Style for the links */
nav ul li a {
    text-decoration: none; /* Remove underlines from links */
    color: rgb(0, 0, 0); /* Text color for links */
    font-weight: bold; /* Makes the text bold */
}

/* Change the image color on hover */
nav ul li a img:hover {
    filter: invert(100%); /* Inverts from black to white */
}

/* IFRAME STYLING */
.auto-resizable-iframe {
    max-width: 600px;
    margin: 0px auto;
}
  
  .auto-resizable-iframe > div {
    position: relative;
    padding-bottom: 75%;
    height: 0px;
}
  
  .auto-resizable-iframe iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.new-element {
    margin-top: 50px;
}

/* NEWS TILE STYLING */
.news-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.news-tile {
    width: 75px;
    height: 100px;
    margin: 10px 20px;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
    background-color: #e8dab2;
}

.news-tile img {
    object-fit: cover;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #e8dab2;
    padding: 25px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgb(0, 0, 0);
    /* border: 1px solid rgb(0, 0, 0); */
}

.close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 10px;
    cursor: pointer;
    background: transparent;
    border: none;
}