/* @media (min-width: 300px) and (max-width:600px) {
      .post-card {
        height: 60vw !important;
      }

      .post-card .img-fluid {
        height: 60vw !important;
      }

      .caption {
        font-size: 5vw !important;
      }
    } */

 .post-card {
   height: 18vw;
   position: relative;
   font-size: 1.1vw;

 }

 .posts-number, .followers {
  color:#fff;
 }

 .post-card .img-fluid {
   height: 18vw;
 }

 .timestamp {
   position: absolute;
   bottom: 2vw;
   font-size: 0.7rem;
   font-weight: 600;
   width: 12vw;
 }

 .p-2 {
   padding: 2vw;
 }


 .container {
   background-color: #fff;
   border-radius: 10px;
   padding: 2vw 6vw;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 h1 {
   font-size: 36px;
 }


 ul {
   list-style: disc inside;
 }

 .spinner-border {
   display: none;
 }

 #server-message {
   color: #28a745;
   font-weight: bold;
 }

 h3 {
   font-size: 20px;
   margin-top: 20px;
 }

 .fb-login-button {
   margin-top: 20px;
 }

 #account-selection {
   display: none;
 }

 .info-wrapper {
   position: absolute;
   color: wheat;
   background: rgba(1, 1, 1, 0.4);
   height: 100%;
   width: 100%;
   opacity: 0;
   transition: opacity 0.3s;
   /* Add a smooth transition for opacity */
 }

 .post-card:hover .info-wrapper {
   opacity: 1;
   /* Show on hover */
 }

 body {
   font-size: 1rem !important;
   overflow-y: hidden !important;
   overflow-x: hidden;
   background-color: #f4f4f4;
 }


 .bg-background-container {
   position: absolute;
   width: 109%;
   height: 110%;
   left: -5%;
   top: -5%;
   overflow: hidden;
   z-index: -500;
 }

 .main-image {
   width: 100%;
   height: 100vh;
   object-fit: cover;
   padding: 2vw;
   border-radius: 5vw;

 }

 .main-video {
   width: 100%;
   height: 100vh;
   object-fit: cover;
   padding: 2vw;
   border-radius: 5vw;

 }

 .background-blur-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* This ensures the image covers the entire container */
   filter: blur(50px);
   /* Adjust the blur amount as needed */
   z-index: -1;
   /* Puts the image behind other content */
 }

 .account-info {
   margin-top: 10vw;
   padding-top: 5vw;
   padding-bottom: 3vw;

 }

 .caption {
   padding-left: 5vw !important;
   color: #fff !important;
   padding-top: 8vh !important;

 }

 .logo img {
   border-radius: 5vw;
   width: 80%;
 }

 #account-name,
 #posts-number,
 #followers {
   color: #fff !important;
 }

 .app-name {
  text-transform: uppercase;
 }

 /* .font-1 {
  font-size: 1vw;
 }

 .font-1-5 {
  font-size:1.5vw;
 } */

 .color-grey {
  color:#777 !important;
 }

.container-fluid {
  max-width:1080px !important;
  overflow-y: auto;
  height:95vh;
}

/* @media (max-width: 900px) {
  .container-fluid {
    max-width: 100% !important;
  }
} */