body{
    background-color: #333;
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
}
img{
  cursor: pointer;
}
a {
    text-decoration: none; /* Usuwa podkreślenie */
  }
header {
    background-color: #222;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
  }
  @media screen and (max-width: 768px) {
    header{
      max-height: 80px;
    }
  }
  li{
    border: 3px solid #222;
  }
  li:hover{
    border-bottom: 3px solid #e2373f;
  }
  li:last-child:hover{
    border-bottom: none;
  }
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
  }
  
  .logo img {
      width: 230px;
  }
  nav .menu-icon {
    font-size: 24px;
    cursor: pointer;
    display: none; /* Ukryj hamburger na większych ekranach */
  }
  .menu-icon{
    color: white;
  }
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
  nav ul li {
    margin-right: 20px;
  }
  nav ul li:last-child {
    margin-right: 0;
  }
  .menu {
    display: flex;
  }
  .menu a{
    vertical-align: top;
    text-decoration: none;
    color: #fff;
  }
  .menu a:hover{
    color:#e2373f;
  }
  .menu img{
    margin-right: 2px;
    width: 20px;
    vertical-align: top;
  }
  .search-input{
    color: white;
    background-color: #222;
    border-bottom:1px solid #e14e53;
    border-right: none;
  }
  .search-input::placeholder{
    color: #e14e53;
  }
  @media screen and (max-width: 768px) {
    .menu {
        display: none;
      }
    .container {
      padding: 10px 20px;
    }
  
    nav ul {
      display: none;
    }
  
    .menu.active {
      text-decoration: none;
      display: flex;
      flex-direction: column;
      background-color: #222;
      padding: 20px;
      position: absolute;
      top: 50px;
      left: 0;
      width: 100%;
    }
  
    nav .menu-icon {
      display: block; /* Pokaż hamburger na mniejszych ekranach */
    }
    nav li{
      margin-top: 10px;
    }
    .profile{
      margin-top: 60px;
    }
}
.main{
    width: 80%;
    margin: auto;
}
.profile{
    margin-top: 80px;
    width: 100%;
    padding-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    background-color: #222;
    border-radius: 20px;
    border: 1px solid #ccc;
    text-align: center;
    color: white;
    position: relative;
}
.profile h1{
  margin-bottom: 0;
}
.verify a{
  vertical-align: top;
}
.verify img{
    width: 20px;
    vertical-align: top;
}

.profile-background {
    background-image: url('img/background.jpg');
    background-size: cover; /* lub 'contain' w zależności od efektu */
    background-position: center;
    background-repeat: no-repeat;

    width: 100%;
    height: 250px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.profile-avatar{
    border: 2px solid white;
    width: 200px;
    height: 200px;
    background-position: center;
    background-size: cover;
    margin-top: -150px;
    margin-left: auto;
    margin-right: auto;
}
.profile-favourite{
  background-image: url('img/fav.png');
  background-position: center;
  background-size:90%;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  margin: 20px;
}
.profile-scam{
  background-image: url('img/scam.png');
  background-position: center;
  background-size:90%;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
}
.profile-data{
  color: grey;
}
.friends-photo{
  margin: auto;
  text-align: center;
}
.friends-photo img{
    object-fit: cover;
}
.friend-photo{
  margin-top: 20px;
  border: 2px solid #222;
  margin-left: -12px;
  height: 30px;
  width: 30px;
  border-radius: 50px;
}
.sections{
  margin: 20px;
  color: grey;
}
.main-left{
    margin-top: 10px;
    float: left;
    width: 30%;
}
.profile-ids{
    margin-bottom: 20px;
    text-align: left;
    color: white;
    border: 1px solid #ccc;
    background-color: #222;
    border-radius: 20px;
    padding: 15px;
}
.profile-contact{
  margin-bottom: 20px;
  text-align: left;
  color: white;
  border: 1px solid #ccc;
  background-color: #222;
  border-radius: 20px;
  padding: 15px;
}
.profile-contact img{ 
  margin-right: 5px;
  vertical-align: top;
  width: 20px;
}
.profile-contact a{
  vertical-align: middle;
  width: 20px;
} 
.contact{
  margin-top: 20px;
}
.zobacz{
  color:#e2373f
}
.zobacz:hover{
  color:#f15e64;
}
.last-ads{
    margin-bottom: 20px;
    text-align: left;
    color: white;
    border: 1px solid #ccc;
    background-color: #222;
    border-radius: 20px;
    padding: 15px;
}
.groups{
    text-align: left;
    color: white;
    border: 1px solid #ccc;
    background-color: #222;
    border-radius: 20px;
    padding: 15px;
}
.hra{
    border: 1px solid #e2373f;
    width: 30px;
    margin-top: 5px;
    margin-left: 0;
}
.profile-photo{
    position: relative;
    margin-bottom: 20px;
    color: white;
    border: 1px solid #ccc;
    background-color: #222;
    border-radius: 20px;
    padding: 15px;
}
.profile-galeria{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.profile-galeria:hover{
  cursor: pointer;
}
.user-photo{
    object-fit: cover;
    filter: blur(3px);
    height: 150px;
    width: 29%; /* Ustaw szerokość zdjęć na odpowiedni procent, aby zmieścić się w dwóch rzędach */
    margin: 2px; /* Dodaj marginesy, aby oddzielić zdjęcia */
    background-image: url('img/avatar.jpg');
    background-position: center;
    background-size: cover;
}

.main-right{
    margin-top: 10px;
    width: 68%;
    float: right;
}
@media screen and (max-width: 768px) {
    .main-left{
        width: 100%;
        clear: both;
    }
    .main-right{
        width: 100%;
        clear: both;
    }
    .last-ads{
        display: none;
    }
    .groups{
        display: none;
    }
    .post-photo img{
      margin-top: 10px;
      max-width: 100%;
      max-height: 400px;
    }
    .user-photo{
      height: 130px;
    }
}
.post {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden;
}

.post {
    background-color: #222;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden;
}

.post-avatar {
    float: left;
    width: 50px;
    height: 50px;
    background-color: #f0f0f0;
    border-radius: 50%; /* Okrągłe zdjęcie profilowe */
    margin-right: 10px;
    display: flex; /* Używamy flexboxa */
    justify-content: center; /* Wyśrodkowanie w poziomie */
    align-items: center; /* Wyśrodkowanie w pionie */
}

.post-avatar img{
    height: 50px;
    width: 50px;
    border-radius: 100%;
}

.post-content {
    overflow: hidden;
    padding: 10px;
}
.post-photo{
  margin: auto;
  text-align: center;
  position: relative;
}
.post-photo img{
  margin-top: 10px;
  width: 500px;
  height: 600px;
}
.blurred-image {
  width: 100%;
  height: 100%;
  filter: blur(10px); /* Zastosuj efekt rozmycia */
}
.registration-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e2373f; /* Dostosuj kolor tekstu */
  font-size: 20px; /* Dostosuj rozmiar tekstu */
  text-align: center;
  background-color: #fff;
  border-radius: 20px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.post-header {
    margin-bottom: 5px;
    overflow: hidden; /* Zapobiega przekraczaniu */
    display: flex; /* Używamy flexboxa */
    align-items: center; /* Wyśrodkowanie w pionie */
}

.user-info {
    display: inline-block;
}

.username {
    cursor: pointer;
    color: white;
    font-weight: bold;
}
.username:hover{
  color:#e2373f;
}

.post-time {
    color: #888;
    display: block; /* Czas dodania na nowej linii */
}

.post-body {
    color: white;
    margin-bottom: 10px;
}

.post-footer {
    border-top: 1px solid #ccc;
    padding-top: 5px;
}

.post-footer span {
    margin-right: 10px;
    color: #888;
}
.post-reaction{
    cursor: pointer;
    margin-right: 5px;
    width: 20px;
    vertical-align: middle;
}
.likes{
  vertical-align: middle;
}
.post-shares{
    float: right;
}
.posts{
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #222;
    padding: 10px;
    color: white;
}
.more-posts{
    background-color: #222;
    padding: 10px;
    text-align: center;
    color: white;
    margin-bottom: 80px;
}
.more-things{
  text-align: center;
  padding: 10px;
  margin-top: 20px;
  background-color: #333;
  border-radius: 20px;
}
.more-things:hover{
  cursor: pointer;
  text-align: center;
  padding: 10px;
  margin-top: 20px;
  background-color: #e2373f;
  border-radius: 20px;
}
  .last-ads {
    border: 1px solid #ccc;
    padding: 10px;
  }

  .ads {
    display: flex;
    flex-direction: column; /* Ustawiamy układ kolumnowy */
  }

  .ad {
    display: flex;
    align-items: center;
    
  }

  .ad-avatar img {
    width: 50px; /* Ustawiamy szerokość avatara na 50px */
    height: 50px; /* Ustawiamy wysokość avatara na 50px */
    border-radius: 50%; /* Zaokrąglamy avatar */
    margin-right: 10px;
  }

  .ad-avatar,
  .ad-text {

    display: inline-block;
    vertical-align: middle;
  }
.ad-text:hover{
  color:#e2373f;
}
.hrb{
    width: 100%;
}
.adverstiment{
    margin: auto;
    text-align: center;
}
.adverstimentad{
    background-image: url('../users/img/add.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 20px;
    height: 300px;
    background-color: white;
    text-align: center;
    position: relative;
}
.adverstimentadad{
  bottom: 0px;
  right: 0px;
  position: absolute;
  background-color: white;
  font-size: 10px;
}
.groups{
    border: 1px solid #ccc;
    padding: 10px;
}
.groups b:hover{
  color:#e2373f;
}
.group-photo img{
    border-radius: 5px;
    width: 100px;
    height: 50px;
}
.group-photo, .group-text, .group-join{
    display: inline-block;
    vertical-align: middle;
}
.group-join{
    float: right;
}
.group-text{
    margin-left: 10px;
}
.bn632-hover {
  width: 190px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  height: 55px;
  text-align:center;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.bn632-hover:hover {
  background-position: 100% 0;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.bn632-hover:focus {
  outline: none;
}

.bn632-hover.bn28 {
  background-image: linear-gradient(
    to right,
    #eb3941,
    #f15e64,
    #e14e53,
    #e2373f
  );
  box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4);
}
.avatar-bar-container {
  position: relative;
  width: 100%;
  white-space: nowrap;
}
.avatar-bar {
  position: fixed; /* Stała pozycja na ekranie */
  bottom: 0; /* Dolna krawędź ekranu */
  left: 0; /* Lewa krawędź ekranu */
  width: 100%; /* Cała szerokość ekranu */
  background-color: #222; /* Kolor tła */
  padding: 5px; /* Wypełnienie wewnętrzne */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Cień na dolnej krawędzi */
  display: flex; /* Ustawienie na flexbox */
  justify-content: center; /* Wyśrodkowanie zawartości */
  align-items: center; /* Wyśrodkowanie zawartości */
  overflow-x: auto;
}

.arrow-right {
  right: 0;
  position: absolute;
  width: 40px;
  height: 100%;
  line-height: 30px;
  text-align: center;
  background-color: #ffffff77;
  cursor: pointer;
  z-index: 999999;
}
.arrow-right img{
  margin-top: 20px;;
  width: 12px;
}
@media screen and (min-width: 768px) {
  .arrow-right{
    display: none;
  }

}
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}
.arrow-left.hidden,
.arrow-right.hidden {
  opacity: 0; /* Ukrywamy strzałki */
  pointer-events: none; /* Wyłączamy możliwość interakcji z ukrytymi strzałkami */
}
/* Styl dla awatara */
.avatar-b {
  width: 30px; /* Szerokość awatara - proporcjonalna do szerokości ekranu */
  height: 30px; /* Automatyczna wysokość */
  border-radius: 50%; /* Zaokrąglenie */
  margin: 5px;
}
.avatar-a{
  position: relative;
}
.avatar-green{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green;
  position: absolute;
  bottom: 10px;
  right: 4px;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out forwards; /* Dodajemy animację pojawiania się */
  z-index: 9999999999;
}

/* Styl dla okienka popup */
.popup {
  width: 80%;
  text-align: center;
  background-color: #222;
  color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: relative; /* Ustawienie dla pozycjonowania X */
  z-index: 9999999999;
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Początkowa przezroczystość: 0 */
  }
  to {
    opacity: 1; /* Końcowa przezroczystość: 1 */
  }
}
.popup-title{
  font-size: 25px;
}
/* Styl dla ikony X */
.close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  color: #999;
}

/* Styl dla ikony X po najechaniu */
.close-icon:hover {
  color: #000;
}
.popup .bn632-hover{
  width: 300px;
}
.popup h1{
  font-size: 27px;
}
.showPopup{
  cursor: pointer;
}
.broken{
  width: 150px;
}
@media screen and (max-width: 600px) {
  .broken{
    width: 100px;
  }
}
.post-avatar img{
  object-fit: cover;
}
.post-photo img{
  object-fit: cover;
}