html, body {
    overflow-x: hidden; /* Ukrywa przewijanie w poziomie */
    max-width: 100vw;   /* Zapobiega przekraczaniu szerokości ekranu */
}

* {
    max-width: 100%;
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
}

.logo {
  width: 50%;
  max-width: 230px;
  position: absolute;
  top: 5%;
  
  
}

.magazyn, div[id^="btnStep"], div[class$="Btn"] {
  display: block;
  background-color: #373636;
  color: #e6e2e2;
  padding: 15px 20px;
  text-align: center;
  border: none;
  border-radius: 7px;
  font-size: 18px;
  font-weight: lighter;
  cursor: pointer;
  margin: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.magazyn:hover, div[id^="btnStep"]:hover,div[class$="Btn"]:hover {
  background-color: #2c86c2;
  color: #ffffffc2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.photoFrame {
  width: 200px;
  height: 200px;
  margin: 0 auto; /* Poziome wycentrowanie */
  border: 1px solid rgb(86, 85, 85);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  
}

.photoFrame img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#btnStep0-2, #btnStep0-3 {
    text-decoration: line-through;
}
body {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: Arial, sans-serif;
}
.input-container {
    display: inline-block;
    gap: 10px;
    margin-bottom: 20px;
    margin-right: 15px;
    font-size: 30px;
}
.digit-input {
    width: 10%;
    height: 18%;
    font-size: 36px;
    text-align: center;
    border: none;
    border-bottom: 2px solid rgb(41, 41, 41);
    outline: none;
}
button {
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 10px;
}
.output {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
}

.step1, .step2  {
  width: 80%;
  text-align: center;
}

footer {
  padding: 10px;
  width: 100vw;
  text-align: center;
  background-color: #373636;
  color: white;
  position:absolute;
  bottom: 0px;
  font-size: 10px;
  margin-top:auto;
}

a{
  color: white;
  text-decoration: none;
}

.step2-2 {
  text-align: center;
}

.cegielka{
    display: inline-block;
    padding: 8px 17px;
    margin: 5px;
    background-color: #ffffffc2;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #2c86c2;
}

.step3{
  width:80%;
}


hr {
    margin-top: 10px;
    margin-bottom: 6px;
}

textarea {
  padding:10px;
  font-size: 20px;
}

.comment {
  text-align: left;
}

.commentText {
    font-size: larger;
    margin-top: 10px;
}

.step4 {
    margin-top: 50px;
}

.sendDataBtn {
  background-color: #2c86c2 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}