body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f6f7;
  padding-top:60px;

}

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;
}



/*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;
  z-index: 1000;
}

/* 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;}
.smallicon{ width:25px; height:25px; border-radius:25px; border:2px solid #ccc;}
/* Hide mic button by default */
#micBtn {
	margin-top: 10px;
    font-size: 24px;
    padding: 6px 12px;
 display: inline-block;
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;
  }
}
header {
    position: fixed;
    z-index: 1000;
	top:0px;

}
.section {
    position: relative;
    z-index: 1;
}
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.listing-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height:350px;
}

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

.listing-card .img-wrap {
  width: 100%;
  aspect-ratio: 4/3; /* maintain ratio, responsive */
  overflow: hidden;
  position: relative;
  min-height:350px;
}
.listing-card a{ color:black}
.listing-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop */
  object-position: center;
  transition: transform 0.3s ease;
}

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

/* Overlay content */
.listing-info {
  position: absolute;
  bottom: 0;
  width: 100%;
background: linear-gradient(to top, rgba(255,255,255,0.95) 20%, rgba(255,255,255,.0) 170%);
  color: #000;
  padding: 10px;
  max-height: 100%;
  overflow: hidden;
    transition: all 0.5s ease;
}

.listing-card:hover .listing-info {
  max-height: 100%;
  background: linear-gradient(to top, rgba(255,255,255,0.95) 20%, rgba(255,255,255,1) 180%);


}

.listing-info h2 {
  font-size: 1em;
  line-height: 1.2em;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* show 2 lines only */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-info .price {
  font-weight: bold;
  font-size: 0.95em;
}

.listing-info .tags {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.listing-info .taglinks {
  background: rgba(0,0,0,0.1);
  color: blue;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75em;
  transition: background 0.2s;
}

.listing-info .taglinks:hover {
  background: #0b66ff;
  color: #fff;
}
.videoembed{
    position: relative;       /* always behind content */
    top: 0;
    left: 0;
    min-width: 100;          /* full viewport width */
     min-height: 400px;         /* full viewport height */
    overflow: hidden;

}

/* Responsive iframe */
.videoembed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.77vh;       /* 100vh * 16/9 ratio */
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;  /* makes it click-through if needed */
}