/* Hero/title block */
:root { --contentMaxW: min(1100px, 92vw); }

#content {
  flex-direction: column;
}

.name {
  display: grid;
  width: 100%;
  justify-content: center;
  place-items: center;
  inline-size: var(--contentMaxW);
  text-align: center;
  color: whitesmoke; /* fix from 'color whitesmoke' */
  font-family: 'Giarek', sans-serif;
  z-index: 2;
  margin-inline: auto;   /* centers the block horizontally */
  align-self: center;    /* protects against parent align-items */
}
.name .typing {
  width: auto;
  max-inline-size: 100%;
  display: inline-block;
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  line-height: 1.05;
  text-decoration: underline;
  margin-bottom: 0;
}
.name .undername{
  font-weight: bold;
  font-style: italic;
  font-size:1.6em;
}

/* cards container (flow, not absolute) */
.cards {
  position: static;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  justify-items: center;        /* center each card in its cell */ 
  z-index: 2;
  animation: fadeIn .5s ease-in-out;
  margin: clamp(24px, 0vh, 72px) auto 0;
  width: 100%;

}

/* Card visuals preserved */
.card {
  width: 400px;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none;
  transition: background-color .3s, box-shadow .3s, transform .3s, border-radius .6s;
  border-radius: 40px;
  mix-blend-mode: darken;
  box-shadow: 10px 10px 20px rgba(0,0,0,.5);
  margin: 0 auto; /* center within grid cell when narrower than cell */
}
.card:hover { background-color: rgba(0, 0, 0, 0.5); transform: translateY(-10px); cursor: pointer; overflow: hidden; box-shadow: 15px 15px 25px rgba(0,0,0,.7); border-radius: 10px; }
.card:hover .cardTitle{ mix-blend-mode: difference; }

.cardImage { width: 90%; height: 90%; object-fit: cover; border-radius: 30px; transition: width .4s, height .4s, border-radius .4s; }
.card:hover .cardImage { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }

.cardTitle{
  color: white;
  position: absolute;
  bottom: -30px;
  font-size: 4em;
  font-family: 'Giarek', sans-serif;
}

/* ASCII container settings (unchanged) */
.ascii-container {
  font-size: 3px;
  line-height: 3px;
  font-family: monospace;
  white-space: pre;
  overflow: hidden;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 80%;
  padding: 5px;
  color: #fff;
}

/* Hero typer container */
.typer { min-height: 6vh; display: grid; place-items: center; }
.typing { animation: typing 2s steps(7), blink .7s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; }

/* Social links: below hero, centered, in flow */
.netWrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  position: relative;
  height: auto;
  bottom: 4vh;
}
.netLink img{ width: 100px; height: 100px; padding: 5%; }

/* Bio in flow (instead of absolute offsets) */
.smallBioT{
  inline-size: var(--contentMaxW);
  margin: clamp(24px, 10vh, 80px) auto 8px;
  display:block;
  font-size: clamp(1.6rem, 3vw, 3rem);
  text-align: center;
  mix-blend-mode: difference;
  margin-top: 26vh;
}
.smallBio{
  display:block;
  inline-size: var(--contentMaxW);
  margin: 0 auto;
  font-size: clamp(1rem, 1.2vw, 2rem);
  color: white;
  mix-blend-mode: lighten;
  line-height: 1.5;
  text-align: center;
  padding-inline: 1rem;
  padding-bottom: 12vh;
}

/* Arrow (kept; still absolute if desired) */
.arrow {
  width: 4vw;
  height: 6.5vh;
  position: absolute;
  top: 84vh;
  left: 50%;
  transform: translateX(-50%);
  opacity: .8; cursor: pointer;
  animation: fadeIn 2s ease-in-out;
  transition: transform .3s, opacity .3s;
}
.arrow:hover { transform: translate(-50%, 10px); opacity: 1; mix-blend-mode: difference; }

/* Animations */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes typing { from { width: 0; } }
@keyframes blink { 50% { border-color: transparent; } }

/* Minimal mobile tweaks only where necessary */
@media (max-width: 1450px){
  .card {
  width: 300px;
  height: 300px;; }

}

@media (max-width: 900px){
  .card {
  width: 300px;
  height: 200px;
  margin-top: 12px; }
  .cards{
  flex-direction: column;
  margin: 0px;
  }
  .undername{ margin:5px 0px; }
  .smallBioT{margin-top: 5vh}
  .netLink img { width: 50px; height: 50px; }

}

@media (max-width: 360px){
  .typing { font-size: clamp(1.6rem, 8vw, 2rem); }
  .cardTitle { font-size: 2em; }
  .netLink img { width: 35px; height: 35px; }
}