body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f6f7;
overflow-x:hidden;
}

input, select,textarea{ font-size:1.5em; margin-bottom:10px; max-width:95%;border-radius: 6px;}
.button{font-size:1.3em; border-radius:6px; margin:5px; padding:.2em; background: goldenrod; color:white; cursor:pointer; }
header{ background: #fff; width:100%}
.section {
  padding: 1em;
 
}
h2{ margin:2px;}
a{ text-decoration: none;}
h3{ margin-bottom:2px;}
.section h2 {
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: bold;
}

.listing-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.listing-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-decoration: none;
  color: #333;
  transition: all .2s ease;
}

.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.img-wrap {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius:10px;
}

.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .3s ease;
}

.listing-card:hover img {
  transform: scale(1.05);
}

.listing-info {
  padding: 10px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #2a8d4a;
}

.location {
  font-size: 13px;
  color: #777;
}

/* Category bubbles */
.category-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category {
  background: #fff;
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/*DROP AREA */
.upload-wrapper {
  margin: 20px 0;
}

.drop-area {
  max-width: 95%;
  padding: 40px;
  border: 2px dashed #ccc;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s ease;
}

.drop-area.dragover {
  border-color: #4CAF50;
  background: #f6fff6;
}

.browse-btn {
  color: #007bff;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

#preview img {
  margin-top: 15px;
  max-width: 200px;
  border-radius: 8px;
}
/*END DROP AREA */


.monsteradd{ 
	font-size:3em; 
	color:white; 
	background:green; border:3px solid white; 
	border-radius:50px; box-shadow:3px 3px 10px #000; 
	width:50px; height:50px; 
	display:flex; 
	align-item:center center; 
	justify-content:center; 
	bottom:20px; right:20px;
	z-index:2;
	position:fixed;
}
.monsteradd a{text-decoration:none; color:white;}


/*NAVIGATION */

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #213fad;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #213fad;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #eee;
  color: black;
  border:2px solid #fff; 
}

.avatar{ width:50px; height:50px; border-radius: 50px; border: 2px solid #ccc;box-shadow:3px 3px 5px #000; margin:3px; z-index:2; position:absolute }
.flex{ display:flex; align-items: left; justify-content:left; flex-wrap:wrap;}
.taglinks{ background: rgba(0,0,0,0.05); border-radius:6px; padding:4px; color:#666; margin:2px; font-size:.8em; }
.taglinks:hover{ background: rgba(0,0,0,0.3);  color:#fff;}

/* Hide mic button by default */
#micBtn {
  display: none;
border-radius:6px;
}

/* Show mic button only on screens smaller than 768px (mobile) */
@media (max-width: 768px) {
  #micBtn {
    display: inline-block;
    margin-top: 10px;
    font-size: 24px;
    padding: 6px 12px;
  }
}