@font-face {
  font-family: 'SHPinscher-Regular'; 
  src: url('/fonts/SHPinscher-Regular.otf') format('truetype'); 
  font-weight: normal;
  font-style: normal; 
}
body {  
  margin: 10px;
  background-color: #78226D;
  background-size: contain;
  color: #FDD50B;
  font-family: 'SHPinscher-Regular', monospace;
  font-size:x-large;
  text-align: center;
}
p {
  text-align: justify;
}
:root{
  --bg:#FDD50B;
  --border:#E870A0;
  --text:#78226D;
}

*{box-sizing:border-box} /* To robi, że sidebary nie wchodzą ci na główne pudełko! */

.page-wrapper {
  display: flex;           /* ustawia elementy w rzędzie */
  gap: 20px;              /* odstęp między kolumnami */
  max-width: 1400px;      /* max szerokość całości */
  margin: 20px auto;      /* wycentrowanie */
  padding: 0 20px;        /* margines od brzegów */
  align-items: flex-start; /* kolumny od góry */
}

/* main box */

.main{
  background-color: var(--bg);
  border: 12px groove var(--border);
  color: var(--text);
  position: static; 
  text-align: center;
  height: auto;
  width: 700px;
  max-width: calc(100% - 40px); 
  margin: 10px auto;
  padding: 20px;
}

.main p{ 
  text-align: left; 
  margin-top:2px; 
}

.artwork img{ 
  border-radius:8px; 
  display:inline-block; 
  margin:18px; 
  vertical-align:middle; 
}

/* side bars */

.right-box{
  background-color: var(--bg);
  border: 12px groove var(--border);
  color: var(--text);
  border-radius: 5px;
  text-align: center;
  position: fixed;
  right: 40px;
  top: 140px;
  width: 350px;
  padding: 20px;
}

.right-box a img{ 
    width:120px; 
    height:auto; 
    display:block; 
    margin:8px auto; 
}

.left-box {
  background-color: var(--bg);
  border: 12px groove var(--border);
  color: var(--text);
  border-radius: 5px;
  text-align: center;
  position: fixed;       
  left: 40px;           
  top: 140px;            
  width: 350px;          
  padding: 20px;      
  }

/* GUESTBOOK */

.gustebook {
  width: 700px;                    /* Taka sama szerokość jak main-box */
  max-width: calc(100% - 40px);  /* Zabezpieczenie przed overflow */
  margin: 20px auto;             /* KLUCZOWE: "auto" wycentrowuje! */
  display: block;                /* Element blokowy */
  border: 12px groove var(--border);  /* DODANA RAMKA! */
  background-color: var(--bg);         /* TŁO JAK W MAIN-BOX */
  padding: 20px;                       /* ODSTĘP OD RAMKI */
}

.gustebook iframe {
  width: 100%;     /* 100% szerokości RODZICA (.gustebook) */
  height: 700px;
  /* reszta stylów... */
}

/* TABEL */

.pros {
  color: green;
}

.cons {
  color: red;
}

.tabel_pros_cons{
  border-color: #78226D;
  border: 4px;
}