:root{
	--black: #0a0907;
	--red: #e50808;
	--yellow: #eba307;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;background:#ac0000;position:relative;z-index:0;}

/* Vertical center lines */
.vertical-lines{
	position:fixed;
  left:0; /* default to left 0 so it doesn't overflow on small screens */
  top:0;
  transform:none;
	height:100vh;
	display:flex;
	gap: 10px;
	align-items:stretch;
	justify-content:flex-start; /* align the three lines toward the left */
	pointer-events:none; /* don't block clicks */
	z-index:-999;
}
.vertical-lines .vl{
	width:50px; /* thickness of each line */
	height:100%;
	display:block;
	border-radius:1px;
	box-shadow:0 0 18px rgba(0,0,0,0.12);
	opacity:0.98;
}
.vertical-lines .vl.black{background:var(--black)}
.vertical-lines .vl.red{background:var(--red)}
.vertical-lines .vl.yellow{background:var(--yellow)}

/* Lightbox / modal for menu images */
.lightbox{
  display: none; /* shown when active */
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.lightbox[aria-hidden="false"]{
  display: flex;
}
.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}
.lightbox-content{
  position: relative;
  max-width: 98vw; /* allow almost full viewport width */
  max-height: 96vh; /* allow larger height */
  padding: 8px; /* reduce padding so image can be bigger */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10000;
}
.lightbox-img{
  max-width: 98vw;
  max-height: 96vh;
  width: auto;
  height: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  border-radius: 6px;
}
.lightbox-caption{
  color: #fff;
  text-align: center;
  font-size: 1rem;
  max-width: 90vw;
}
.lightbox-close{
  position: absolute;
  top: 8px;
  left: 8px; /* left because page is RTL, but keep accessible */
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
}

/* Small screens: slightly smaller padding */
@media (max-width:480px){
  .lightbox-content{ padding: 12px; }
  .lightbox-caption{ font-size: .95rem }
}

/* Image grid: show 3 images per row, responsive */
.image-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 980px;
  margin: 8px auto;
  padding: 0 12px;
  box-sizing: border-box;
}
.image-grid img{
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  cursor: zoom-in;
}

@media (max-width: 900px){
  .image-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .image-grid{ grid-template-columns: 1fr; }
}

.profile-avatar img {
        width: 120px;
        height: 120px;
    }
    
    .profile-details-box .profile-name {
        font-size: 1.4rem;
    }
    .profile-avatar img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 6px solid #040303;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    object-fit: cover;
    background: var(--yellow);
    margin-left: 155px;
}

h1 {
  margin-right: 30px;
  background: linear-gradient(90deg, var(--black), var(--red), var(--yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 2px;
}
h2 {
  margin-right: 0; /* remove huge fixed margin that caused overflow on phones */
  color: white;
  padding: 0 12px;
}

button {
 appearance: none;
 background-color: transparent;
 border: 0.125em solid #7f7e7e;
 border-radius: 0.9375em;
 box-sizing: border-box;
 color: #151515;
 cursor: pointer;
 display: inline-block;
 font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 font-size: 15px;
 font-weight: 600;
 line-height: normal;
 margin: 0;
 min-height: 3.75em;
 min-width: 0;
 outline: none;
 padding: 1em 2.3em;
 text-align: center;
 text-decoration: none;
 transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 will-change: transform;
 margin: 30px;
}

button:disabled {
 pointer-events: none;
}

button:hover {
 color: #a67502;
 background-color: #333333;
 box-shadow: rgba(233, 233, 223, 0.25) 0 8px 15px;
 transform: translateY(-2px);
}

button:active {
 box-shadow: none;
 transform: translateY(0);
}
body {
  background-color: #ac0000;
}
h3 {
  margin-right: 0; /* remove large margin */
  color: #e6b800;
  padding: 0 12px;
}

/* General responsive helpers */
img{max-width:100%;height:auto;display:block}

@media (max-width: 600px){
  .vertical-lines{display:none}
  html,body{overflow-x:hidden}
  h1{font-size:1.6rem;padding:8px 12px}
  h2,h3{font-size:1.1rem}
  .profile-avatar img{width:96px;height:96px;margin:0 auto;display:block}
  .image-grid{grid-template-columns:1fr;max-width:100%;padding:0 12px}
  .button{display:flex;justify-content:center}
  button{margin:16px}
}