@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
 background-repeat: no-repeat;
 background-attachment: fixed;
 margin: 0;
 padding: 0;
 background-size: 100% 100%;
 background-color: #1a202c;
 background-position: center;
}

nav {
 display: flex;
 justify-content: space-around;
 align-items: center;
 background-color: #444;
 padding: 10px;
}

nav a {
 text-decoration: none;
 color: white;
 padding: 9px 15px;
 border-radius: 5px;
 transition: background-color 0.3s;
 font-size: 19px
}

nav a:hover {
 background-color: #555;
 cursor: pointer;
}

#account-menu {
 position: absolute;
 background-color: #444;
 padding: 10px 20px;
 border-radius: 5px;
 border: 2px solid #222;
 border-color: dimgray;
 display: inline-block;
 top: 50px;
 right: 95px;
 z-index: 110;
}

#account-menu a {
 text-decoration: none;
 color: white;
 padding: 10px 15px;
 border-radius: 5px;
 transition: background-color 0.3s;
 text-align: center;
 line-height: 2.6;
 z-index: 4;
}

#account-menu a:hover {
 background-color: #666; /* Change color on hover */
 cursor: pointer;
 z-index: 4;
}

header {
 background-color: #333;
 color: white;
 padding: 15px;
}

.flex-container {
 display: flex;
 flex-direction: row;
 justify-content: center;
}

#donateframe {
 margin-top: 8px;
}

#aboutframe {
 margin-top: 8px;
}

.tab{
 margin-top: 8px;
}

.tab-left {
 margin-right: 15px;
}

.tab-right {
 margin-left: 20px;
}

.tab image {
 width: 100%;
 height: 100%;
 object-fit: cover; /* Ensures the image covers the ad space */
}

h2 {
 color: #fff;
 margin-top: 30px;
 margin-bottom: -20px;
 z-index: 2;
}

button {
 background: #fff;
 color: black;
 padding: 10px;
 border: none;
 border-radius: 10px;
 cursor: pointer;
 margin-top: 15px;
 z-index: 2;
}

button:hover {
 background: transparent;
 color: white;
 outline: 1px solid #fff;
 z-index: 2;
}

p {
 font-size: 12px;
 color: #fff;
 margin-top: 15px;
}

.hidden {
 display: none;
 visibility: hidden;
 opacity: 0;
 pointer-events: none;
}

.clickable:hover {
 cursor: pointer;
 z-index: 2;
}

#map {
 margin-top: 8px;
 position: relative;
 z-index: 1;
}

#tableft {
 background-color: #404040;
 border-radius: 6px;
 border: 2px solid #222;
 border-color: dimgray;
 padding: 10px;
 box-sizing: border-box;
 z-index: 0;
}

.search-bar,
#load-more-button {
 width: 93.5%;
 box-sizing: border-box;
}

.search-bar {
 padding: 6px 12px;
 border: 1px solid #666;
 border-radius: 4px;
 outline: none;
 font-size: 14px;
 color: #fff;
 background-color: #505050;
}

#load-more-button {
 background-color: #606060;
 color: white;
 border: 1px solid #888;
 border-radius: 6px;
 padding: 6px 12px;
 font-size: 14px;
 font-family: 'Inter', sans-serif;
 margin-top: 12px;
 cursor: pointer;
 transition: background-color 0.3s, color 0.3s;
}

#load-more-button:hover {
 background-color: #777;
 color: #fff;
}

#search-bar:focus {
  border-color: #888;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

.popup-card, 
.popup-card * {
  color: white !important;
}

#popupList {
 margin-top: 12px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 max-height: 80vh;
 overflow-y: auto;
}

.popup-card {
 background-color: #505050;
 border-radius: 8px;
 padding: 10px;
 color: white;
 font-family: 'Inter', sans-serif;
 width: 17.125rem;
 border: 1px solid #666;
 box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.popup-card img {
 width: 70px;
 height: 70px;
 object-fit: cover;
 border-radius: 6px;
 box-shadow: 0 0 4px rgba(0,0,0,0.2);
 margin-left: 10px;
}

.popup-card .meta {
 margin-top: 8px;
 font-size: 12px;
 color: lightgray;
}

#settingmenu {
 text-align: center;
}

/* Style for dropdown containers article creation */
.dropdown-container {
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-top: 10px;
}

.dropdown-container label {
 font-weight: bold;
 color: black;
 margin-bottom: 5px;
}

/* Style for dropdown (select) elements */
select {
 width: 100%;
 padding: 8px;
 border: 1px solid #666;
 border-radius: 5px;
 background-color: #505050;
 font-size: 13px;
 color: white;
 cursor: pointer;
 outline: none;
}

/* Add hover effect for dropdowns */
select:hover {
 border-color: #888;
}

/* Style dropdown options */
select option {
 background-color: #444;
 color: white;
 padding: 5px;
}

.image-bubble {
 width: 50px;
 height: 50px;
 border-radius: 20%;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #ccc;
 cursor: pointer;
 border: 2px solid #fff;
}

.image-bubble img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.image-upload-input {
 display: none;
}

.profile-pic {
 width: 12px;
 height: 12px;
 transform: scale(2.5);
 border-radius: 50%;
 object-fit: cover;
}

#account {
 width: 12px;
 height: 12px;
 display: flex;
 transform: scale(1.4);
 align-items: center;
 justify-content: center;
 cursor: pointer;
 position: relative;
 /* NO border-radius – this remains square */
}

.profile-replacer {
 width: 12px;
 height: 12px;
 transform: scale(2.4);
 border-radius: 50%; /* makes only this element round */
 font-size: 7px;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 font-weight: bold;
 color: white;
 background-color: gray;
 display: flex;
 justify-content: center;
 user-select: none;
}

#tabright img {
 width: 100%;
 height: 100%;
 object-fit: cover; /* or contain, depending on how you want it to scale */
}

#rightdec {
 object-fit: cover;
}