/* This css file is for index.html */

*{
  margin: 0px;
  padding: 0px;
}
/* website background color */
body {
  background-color: white;
}
.header {
  text-align: center;
  color: rgb(22, 20, 20);
  background-color: #ddd;
}
/* Bottom right text */
.descrip {
  background-color: #fffbfb;
  position: absolute;
  top: 34.5vw;
  /* vw used here to make it so text size moves according to window size */
  left: 50%;
  font-size: 2.949vw;
  transform: translate(-50%, -50%);
  /* border-radius: 10px;*/
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* Centered text */
.homeTitle {
  background-color: #fffdfd;
  position: absolute;
  top: 30.6vw;
  left: 50%;
  font-size: 4vw;
  transform: translate(-50%, -50%);
  border-top: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* =============== nav bar =============== */ 

/* nav bar styling */
#navBar {
  width: 100%;
  height: 100px;
  background-color: rgb(232, 136, 52);
  display: none; 
}
/* place text to the right of nav bar */
#nav-items {
  text-align: left;
}
#Mac-Logo {
  /* padding-left: 5px; */
  display: inline;
  text-align: left;
}
#Mac-Logo img {
  height: 90px;
  width: 90px;
  padding-top: 5px;
  margin-top: 3.5px
  /* padding-left: -20px; */
}
img {
  border-radius: 5px;
}
#navright {
  float: right;
}
ul li {
  list-style: none;
  display: inline-block;
  line-height: 100px;
}
ul li a {
  display: block;
  text-decoration: none;
  font-size: 20px;
  font-family: sans-serif;
  color: black;
  padding: 0 20px;
}
ul li a:hover {
  color: rgb(235, 236, 236);
  background-color: rgb(208, 109, 9);
  height: 100px;
}
/* Ensure proper sizing */
* {
  box-sizing: border-box;
}

/* =============== filter / post area =============== */ 

.row {
  display: none;
  flex-wrap: wrap;
}
/* loading icon */
#loading { 
  display: block; 
	font-size: 40px; 
	margin: auto;
	text-align: center; 
	padding-top: 100px; 
  padding-bottom: 100px;
  align-items: center;
}

.gif {
  height: 400px;
  /* width: 400px; */
}
/* Create two unequal columns that sit next to each other */
/* Sidebar/left column */
.side {
  flex: 20%;
  /* Set the width of the sidebar */
  background-color: #f1f1f1;
  /* Grey background color */
  padding: 20px;
  /* Some padding */
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
/* Main column */
.postArea {
  flex: 80%;
  /* Set the width of the main content */
  background-color: white;
  /* White background color */
  padding: 20px;
  /* Some padding */
  height: 800px;
  overflow-x: hidden;
  line-height: 1.5;
}
.note {
  background-color: white;
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 5px;
}
p{
  margin: 5px;
}

.footer {
  padding: 20px;
  /* Some padding */
  text-align: center;
  /* Center text*/
  background: #ddd;
  /* Grey background */
}
#myInput {
  width: 80%;
  /* Full-width */
  font-size: 16px;
  /* Increase font-size */
  padding: 12px 20px 12px 8px;
  /* Add some padding */
  border: 1px solid #ddd;
  /* Add a grey border */
  margin-bottom: 12px;
  /* Add some space below the input */
}
/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  /* padding-top: 10px;*/
  background-color: #f1f1f1;
  cursor: pointer;
}
/* creates space between layers of FILTER buttons */
.btn:nth-child(2) {
  margin: 5px 0px;
}
.btn:nth-child(4) {
  margin: 5px 0px;
}
.btn:nth-child(6) {
  margin: 5px 0px;
}
/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #ddd;
}
/* Add a dark background to the active button */
.btn.active {
  background-color: #666;
  color: white;
}
/* Front and back of a card */
/* create inital size of front box */
.flipdiv {
  display: none;
  position: relative;
  width: 180px;
  height: 160px;
  perspective: 500px;
  margin-bottom: 160px;
}
.postGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 /* Adjust column width as needed */
  gap: 20px;
 /* Adjust the gap between grid items */
  max-height: 800px;
 /* Set the maximum height for vertical scrolling */
}
.enlarged-card {
  grid-column-start: span 3;
 /* Adjust as needed to move the card to the left */
  z-index: 1;
}
/* flipping the card to the back */
.flipdiv.v.showBack .front, .flipdiv.v.flip .front {
  transform: rotateX(180deg);
  z-index: 1;
}
.flipdiv.v.showBack .back, .flipdiv.v.flip .back {
  transform: rotateX(0deg);
  z-index: 2;
}
.flipdiv.v .back {
  transform: rotateX(-180deg);
}
/* creating the front box */
.flipdiv .front, .flipdiv .back {
  position: absolute;
  width: 180%;
  height: 200%;
  box-sizing: border-box;
  /* transition: all 0.5s ease-in;*/
  transition: none;
  color: white;
  background-color: #0F51AE;
  border-radius: 20px;
  /*round the corners */
  padding: 10px;
  backface-visibility: hidden;
}
/* creating the back box */
.flipdiv .back {
  position: absolute;
  width: 470%;
  height: 470%;
  box-sizing: border-box;
  /* transition: all 0.5s ease-in;*/
  transition: none;
  color: rgb(255, 255, 255);
  background-color: #0F51AE;
  border-radius: 20px;
  /*round the corners */
  padding: 10px;
  backface-visibility: hidden;
}
/* alliging the description on front */
.flipdiv .frontText {
  font-size: 20;
  text-align: center;
  margin-top: 10px;
  /* overflow-x: auto; */
}
.flipdiv .frontPrice {
  font-size: 20;
  text-align: center;
  margin-bottom: 14px;
}
/* Aligning the information on the front */
.flipdiv .frontImage img {
  display: block;
  height: 200px;
  width: 200px;
  margin-left: 55px;
  margin-top: 10px;
}
.flipdiv .backImage img {
  display: block;
  height: 500px;
  width: 500px;
  margin-left: 200px;
  margin-top: 10px;
}
/* aligning the information on the back */
.flipdiv .backTitle {
  position: absolute;
  left: 10px;
  top: 530px;
  font-size: 40px;
}
.backTitle { 
  width: 1000px;
  height: 45px;
  /* overflow-x: auto; */
}
.flipdiv .backDescription {
  position: absolute;
  width: 960px;
  height: 110px;
  left: 40px;
  top: 620px;
  font-size: 20px;
  /* overflow-x: auto; */
}
.flipdiv .price {
  position: absolute;
  left: 30px;
  top: 580px;
  font-size: 30px;
}
.flipdiv .sellerInfo {
  width: 190px;
  height: 100px;
  position: absolute;
  left: 830px;
  top: 150px;
  font-size: 30px;
  overflow-y: auto;
}
.flipdiv .trashButton {
  position: fixed;
  bottom: -150px;
  left: 10px;
  width: 40px;
  height: 30px;
  border-radius: 5px;
}
.flipdiv .back .visitBtn {
  position: fixed;
  right: 40px;
  top: 60px;
  font-size: 20px;
}

/* =============== popup when no posts to display =============== */ 

.popup {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}
.popup-content {
  background-color: white;
  margin: 10% auto;
  line-height: 1.5;
  margin-bottom: 10px; 
  text-align: center;
  padding: 20px; 
  border: 1px solid #888888;
  width: 30%;
  font-weight: bolder;
}
.popup-content button {
  display: block;
  padding: 5px 5px;
  margin-top: 10px;
  margin-left: 172.5px;  
}
.show {
  display: block;
}
h1 {
  color: rgb(236, 109, 30);
}

/* =============== modal/text in post area when user not logged in =============== */ 

#noPostText {
  font-size: x-large;
  max-width: 520px;
  margin: 2em auto;
  padding: 1em;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}