html{
    background-color: #2f3136;
    color: white;
  font-family: sans-serif;
  font-weight: 900;
  }
header{
  position:sticky;
  top:1%;
  z-index:1;
}
#forsa_div{
  display:flex;
  align-items:center;
  background:#252629;
  width:180px;
  height:50px;
  padding:8px;
  justify-content:center;
  border-radius:50px;
  border:1px #6a6a6a solid;
  float:right;
}
#forsa{
  margin-right:10px;
}
.forsa_ikona{
  width:30px;

}
.produkt{
  width:250px;
  background:linear-gradient(#2b2d31, #1b1c1f);
  padding:20px;
  border: 1px #444444 solid;
  border-radius:15px;
}
.ramka{
  width:200px;
  height:200px;
  display:block;
  margin:auto;
  position:absolute;
  pointer-events: none;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.produkt button, #kup{
  margin:auto;
  display:flex;
  margin-top:40px;
  border:none;
  cursor:pointer;
  padding:10px;
  width:90%;
  background:#7289da;
  color:white;
  font-weight:800;
  border-radius:8px;
  align-items:center;
  justify-content:center;
}
.produkt button img{
  margin-left:10px;
}
main{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap:1% 10%;
  padding:2%;
  justify-items:center;
  width:90%;
  margin:auto;
}
.opis{
  color:gray;
  font-weight:100;
  font-size:15px;
}
.autor{
  display:flex;
  background:linear-gradient(#2f3136, #2c2e35);
  align-items:center;
  justify-content:center;
  border-radius:30px;
  border:1px solid #595959;
}

.autor p{
  margin-right:10px;
  font-size:12px;
}
.autor img{
  width:35px;
  height:35px;
  object-fit:cover;
  border-radius:50%;
}
.profilowe{
border-radius:50%;
  width:200px;
  height:200px;
  cursor:pointer;
}
#stworz{
  color:white;
  text-decoration:none;
  background:#7289da;
  display:flex;
  align-items:center;
  width:170px;
  padding:10px;
  justify-content:center;
  border-radius:8px;
  border:1px solid #96acf9;
  height:50%;
}
.odpowiedz{
  background:#24262a;
  border:1px solid #53565e;
  padding:10px;
  border-radius:20px;
  width:80%;
  margin:auto;
  text-align:center;
}
#formularz{
  margin:auto;
  width:50%;
}
input[type="file"]
{

  display:none;
}
.plikii {
  border: 2px dashed #7785cc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  margin:auto;
  display:block;
  width:30%;
  text-align:center;
}
input[type="text"]
{
  background:#232528;
  padding:10px;
  border:none;
  color:white;
  font-weight:900;
  width:80%;
  border:1px solid #464646;
  border-radius:8px;
}
input[type="text"]::placeholder{
  color:#b9b5b5;
  font-weight:100;
}

textarea{
   background:#232528;
  padding:10px;
  border:none;
  color:white;
  font-weight:900;
  width:80%;
  border:1px solid #464646;
  border-radius:8px;
}
textarea::placeholder{
  color:#b9b5b5;
  font-weight:100;
}
input[type="submit"]
{
    margin:auto;
  display:flex;
  margin-top:40px;
  border:none;
  cursor:pointer;
  padding:10px;
  width:90%;
  height:5vh;
  background:#7289da;
  color:white;
  font-weight:800;
  border-radius:8px;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
input[type="range"]
{
  width:50%;
}
.nazwa_produktu{
  overflow-wrap: break-word;
}
.opis{
  overflow-wrap: break-word;
}
.popup{
position: fixed;
top:50%;
left:50%;
padding:10px;
transform: translate(-50%,-50%);
background-color:rgb(29, 29, 29);
z-index: 10;
outline: 9999px solid rgba(0,0,0,0.5);
border-radius: 10px;
box-shadow: #2f3136 3px 3px 3px;
width:50%;
}
#zamknij{
  position:absolute;
  top:2%;
  right:1%;
  width:70px;
  filter:grayscale(100%);
  cursor:pointer;
}
#zamknij:hover{
   filter:grayscale(0%);
}
#potwierdzenie_zakupu p{
  margin:0;
}
#tytul_pot{
  text-align: center;
  font-weight: 900;
}
#gemy_pot{
  border:1px solid #6a6a6a;
  padding:10px;
  border-radius:20px;
  text-align:center;
}
#gemy_pot img{
  width:20px;
}
#powrot{
  color:white;
  background-color: RGBA(0, 0, 0, 0.3);
  border-radius: 15px;
  text-decoration: none;
  padding: 10px;
  font-size: 30px;
  border: 2px solid white;
  margin-right:10px;
  }
#menu-lewa{
  display:flex;
  position:absolute;
  align-items:center;
}