body {
background: radial-gradient(circle at center, #5c2c00 0%, black 70%, black 100%);
font-family: Courier New, monospace;
color: rgb(219, 219, 219)
}

.left-text-box {
  display: inline-block;  /* Tekst w pionie */
  width: 350px;            /* Szerokość ramki 20px */
  height: 150px;           /* Wysokość ramki 10px */
  padding: 5px;           /* Małe wewnętrzne odstępy */
  background-color: #f4f1ea; /* Jasny, retro kolor tła */
  border: 2px solid #c1b7a4; /* Wąska ramka w retro stylu */
  border-radius: 4px;      /* Subtelne zaokrąglenie rogów */
  color: #333333;         /* Kolor tekstu */
  font-family: 'Courier New', monospace;  /* Czcionka retro */
  font-size: 1rem;         /* Rozmiar czcionki */
  text-align: right;      /* Wyśrodkowanie tekstu */
  line-height: 1.6;        /* Wysokość linii */
  letter-spacing: 0.3px;   /* Subtelne rozstawienie liter */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15), inset 0 0 10px rgba(0, 0, 0, 0.1); /* Retro cień */ /* Obracamy tekst o 90 stopni, aby był pionowy */
  white-space: nowrap;     /* Zapobiegamy zawijaniu tekstu */
  margin-left: 0px;       /* Przesunięcie od lewej krawędzi */
  margin-top: 20px;        /* Przesunięcie od góry */
}

/* Efekt na hover */
.left-text-box:hover {
  border-color: #7b6d4b; /* Ciemniejszy kolor ramki przy hover */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25), inset 0 0 12px rgba(0, 0, 0, 0.2); /* Silniejszy cień */
}

.container {
  max-width: 800px; /* Ograniczenie szerokości kontenera */
  margin: 0 auto;
  flex-direction: column;
  justify-content: flex;   /* Wyśrodkowanie kontenera */
  padding: 20px;
  line-height: 1.6;
  animation: pulseLight 3s ease-in-out infinite;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  background: radial-gradient(circle at center, rgba(183,195,243,0.1) 0%, transparent 70%);
  box-shadow: 0 0 60px rgba(183,195,243,0.3), 0 0 120px rgba(183,195,243,0.2) inset;
  animation: pulseLight 3s ease-in-out infinite;
  border-radius: 15px;  /* Zwiększenie interlinii, by tekst był czytelniejszy */
}
@keyframes pulseLight {
    0% { box-shadow: 0 0 40px rgba(183,195,243,0.2), 0 0 100px rgba(183,195,243,0.1) inset; }
    50% { box-shadow: 0 0 80px rgba(183,195,243,0.4), 0 0 140px rgba(183,195,243,0.2) inset; }
    100% { box-shadow: 0 0 40px rgba(183,195,243,0.2), 0 0 100px rgba(183,195,243,0.1) inset; }
}
h1 {
    font-family: 'Press Start 2P', monospace;
    font-size: 3em;
    color: #3436c7;
    text-align: center;
    <div style="box-shadow: rgb(0, 158, 26) 5px 8px 98px -30px inset;">...</div>
    animation: goldGlow 3s ease-in-out infinite;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(60deg, #ffc710, #ff7300);
    padding: 20px;
    border-radius: 10px;
}
.h3 { 
  font-family: 'Press Start 2P', cursive; /* Czcionka pixel art */
  font-size: 36px;
  color: #4791ff;
  text-shadow: 2px 2px 10px rgba(3, 0, 139, 0.8); /* Efekt pixelowego cienia */
}

.depesza {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;

  font-family: "Courier New", monospace;
  background: #f2eddc;
  color: #1f1d1a;
  padding: 16px 18px;
  max-width: 300px;

  border: 1px dashed rgba(60, 55, 45, 0.4);
  box-shadow:
    3px 3px 0 rgba(110, 100, 80, 0.35),
    inset 0 0 12px rgba(80, 70, 50, 0.12);

  letter-spacing: 0.6px;
  text-transform: uppercase;

  transform: rotate(-1deg);
}

.rightside-image {
 /* obrazek nie będzie szerszy niż kontener */
  margin-top: 60px;
  margin-right: 0px;
  max-width: 400px;
  height: 500px;        /* proporcje zachowane */
  border-radius: 12px; /* zaokrąglone rogi */
  display: block; 
  float:right;
  border-radius: 15px;
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.depesza h3 {
  margin: 0 0 8px 0;
  font-size: 0.9em;
  letter-spacing: 2px;
  border-bottom: 1px dotted rgba(60, 55, 45, 0.5);
  padding-bottom: 6px;
}

.depesza p {
  margin: 0;
  line-height: 1.5;
  font-size: 0.85em;
}

.analog-frame {
  position: relative;
  background: #131320;
  padding: 20px;
  max-width: 700px;
  margin-left: 80px;

  -webkit-mask-image: radial-gradient(
    ellipse at center,
    black 70%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse at center,
    black 70%,
    transparent 100%
  );
}

.left-text-box p {
  margin: 0;
}

th, td {
    padding: 10px;
    border: 1px solid #67bb19;
    text-align: center;
    font-size: 18px;
    color: green;
}

/* Tabela z kolorem tła */
table {
    width: 40%; /* Szerokość tabeli */
    margin: 0 auto; /* Wyśrodkowanie tabeli */
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #f8e9a1; /* Kolor tła tabeli */
}
.products {
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  margin-top: 20px;
  padding-top: 50px;
}

.product {
  background-color: #3A3B36ff(--radial-gradient);
  padding: 20px;
  margin: 10px;
  width: 200px;
  text-align: center;
  border: 1px solid 
  border-radius: 10px;
}

.product img {
  width: 100%;
  height: auto;
  border: 5px;
  box-shadow: 0 2px 5px #4B4B46ff;
}

.product button {
  /* Przerywana linia jako obramowanie */
border: 2px dashed rgb(74, 183, 255);
}

.product button:hover {
  background-color: #E58F65;
}
.cart {
    background-color:img;
    padding: 20px;
    border-radius: 10px;
    margin-top: 40px;
    width: 100%;
    max-width: 40px;
    margin: 0 auto;
}


.cart h2 {
    text-align: center;
    font-size: 1.5em;
    color: #4b6d2c;
    background-color: #E58F65;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(
        circle at center,
        rgba(211, 200, 102, 0.35) 70%
    );
    z-index: -1; /* światło pod koszykiem */
    filter: blur(10px); /* miękkie światło */
}

.cart ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.cart li {
    padding: 10px;
    background-color: #E58F65;
    margin: 5px 0;
    border: 1px solid #4b6d2c;
}

#total-price {
    text-align: center;
    font-size: 1.2em;
    margin: 20px 0;
}


#checkout-btn:hover {
    background-color: #3436c7;
}