/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions likehttps://xithis.neocities.org/style.css
   "how to change link color." */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* 🌑 tło */
body {
  background-image:
    linear-gradient(rgba(11,15,18,0.7), rgba(11,15,18,1.2)),
    url("img/concrete.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fbd949;
  font-family: monospace;
}

/* 🧱 główny kontener */
.container {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

/* 🔝 header */
header {
  border-bottom: 2px solid #584322; /* kolor dolnej granicy header */
  margin-bottom: 20px;
  font-family:"Black Ops One";
  
}

/* brak marginesu pod tytulem */
h1 {
  margin: 0;
  color: #c6bbaa;
  font-size: 45px;
}

/* kolor klasy status */
.status {
  color: #c6bbaa;
  margin: 0;
  font-size: 12px;
}

/* 🧩 layout */
.main {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 200px;
  justify-content: stretch;
}

/* 📁 sidebar */
.sidebar {
  
  border-right: 1px solid #747833; /* kolor pionowej granicy sidebar */
  padding-right: 10px;
  
}

.sidebar a {
  color: #cebd76; /* kolor tekstu sidebar */
  text-decoration: none; /* likwiduje podkreslenie pod hiperlinkiem */
}

.sidebar a:hover {
  color: #a9a48f;
}

/* 📜 glowny tekst na srodku */
.main_text {
  
  padding-left: 20px;
  padding-right: 20px;
  color: #c6bbaa;
  width: auto;
  min-width: 0;
  text-align:center;
}

.right_gif {
  border-left: 1px solid #747833;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  display: flex;        /* 🔥 ważne */
  align-items: stretch;
  
}

/* rozmiar gifu z prawej*/
.img_gif {
  width: 100%;
  opacity: 0.8;
  height: 100%;
  object-fit: cover;
  display:block;
   -webkit-mask-image: radial-gradient(circle, black 60%, transparent 100%);
  mask-image: radial-gradient(circle, black 60%, transparent 100%);
  
}

.guestbook {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px dashed #444;
}

/* 🔻 footer */
footer {
  margin-top: 30px;
  border-top: 1px solid #77734e;
  padding-top: 10px;
  font-size: 0.9em;
  color: #942a2a;
  animation: flicker 2s infinite;
  text-shadow: 0 0 5px rgba(199,179,138,0.4);
}

.content {
  overflow-y: auto;  /* 🔥 scroll tylko tutaj */
  min-height: 0;     /* 🔥 ważne w gridzie */
}

.separator {
  height: 1px;
  background: linear-gradient(to right, transparent, #00ff9f, transparent);
  margin: 20px 0;
  opacity: 0.6;
}

.about {
  color: #c6bbaa;
  text-align: center;
}

/* stylizacja tekstu arabskiego */
.arabic {
  font-size: 1.8em;   
  font-family: "IBM Plex Sans Arabic";
  color: #747833;        
  margin: 0;  
  opacity: 0.6;
  filter: blur(0.3px);
}

/* animacja tekstu z stopce */
@keyframes flicker{
  0% {
    text-shadow: 2px 0 #f90909, -2px 0 #c9a96a;
  }
  50% {
    text-shadow: -2px 0 #f90909, 2px 0 #c9a96a;
  }
  100% {
    text-shadow: 0 0 #f90909;
  }
}