/* avoid scroll on desktop */ 

html, body { margin:0; padding:0; height:100%; } 

/* container for sidebar + graveyard */ 


body { display: flex; flex-direction: row; } 

p { padding-bottom:15px; } 

	a { color:blue;}

/* Sidebar left */ 

h1 { margin: 0; }
.doors {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  max-width:500px;
  gap: 8px;
  flex: 0 0 auto;        /* don't let it grow/shrink unpredictably */
  z-index: 3;
}

.subtitle {
	font-size:1em;
}

/* .sidebar { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; } /*

/* Doors stacked on desktop */ 

.doors { display: flex; flex-direction: column; gap: 16px; } 

/* Graveyard area (right side) */ 

.graveyard { flex: 1; position: relative; background: linear-gradient(to top, #6b8e23 0%, #556b2f 50%, #000 100%); overflow: hidden; } 

/* Gravestone shape */
.gravestone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  max-width: 550px;       
  aspect-ratio: 3/4;
  background: #ddd;
  border: 4px solid #ccc;
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  overflow: hidden;       
}




/* RIP text */ 

.gravestone .rip { text-align: center; font-family: serif; font-size: 2em; margin-top: 16px; color:#000; } 

/* Inscription framed area */
.gravestone .inscription {
  flex: 1;
  margin: 16px;
  background: #eee;
  border: 2px inset #999;
  color: #000;
  overflow-y: auto;        /* 👈 scroll only this content */
  padding: 1em;
}

/* Grass at bottom of graveyard and sidebar */ 

.grass { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background: repeating-linear-gradient( -45deg, #228b22, #228b22 10px, #006400 10px, #006400 20px ); z-index: 1; } 


/* TABLET and MOBILE override */ 
@media (max-width: 1000px) { 

.sidebar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 16px;
  max-width:500px;
  gap: 8px;
  flex-wrap:wrap;

  
}

body { flex-direction: column; } 

img {max-width:80%;}

.doors { flex-direction: row; justify-content: center; } .sidebar { align-items: center; } 

.graveyard { position: relative; height: auto; min-height: calc(100vh - /*height of title+doors section*/ 200px); overflow: visible; } 

.gravestone { position: relative; top: auto; left: auto; margin: 32px auto; width: 80%; max-width: 500px; transform: none; } /* Endless repeating grave background: turf repeated */ 

.graveyard { background: repeating-linear-gradient( to bottom, #556b2f, #556b2f 100px, #6b8e23 100px, #6b8e23 200px ); } /* Grass only at very bottom */ 

.graveyard .grass { position: static; margin-top: 0; height: 60px; } }