body {
 background: #fff;
 color: #333;
 margin: 0;
 padding: 0;
 line-height: 1.4;
 height: 100vh;
 overflow: hidden;
}

.main-container {
 position: relative;
 width: 100%;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
}

.background-grid {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 opacity: 1;
 pointer-events: auto;
}

.header-overlay {
 position: absolute;
 z-index: 10;
 background: rgba(255, 255, 255, 0.95);
 border-radius: 12px;
 padding: 30px;
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 backdrop-filter: blur(10px);
 max-width: 500px;
 margin: 20px;
 transition: opacity 0.3s ease, transform 0.3s ease;
}

.header-overlay.hidden {
 opacity: 0;
 transform: scale(0.8);
 pointer-events: none;
}

.toggle-button {
 position: absolute;
 top: 10px;
 right: 10px;
 background: rgba(0, 0, 0, 0.1);
 border: none;
 border-radius: 50%;
 width: 30px;
 height: 30px;
 cursor: pointer;
 font-size: 18px;
 line-height: 1;
 color: #333;
 transition: background 0.2s ease;
}

.toggle-button:hover {
 background: rgba(0, 0, 0, 0.2);
}

.show-header-button {
 position: fixed;
 top: 20px;
 left: 20px;
 z-index: 5;
 background: rgba(255, 255, 255, 0.9);
 border: 2px solid #333;
 border-radius: 8px;
 padding: 10px 15px;
 cursor: pointer;
 font-size: 16px;
 color: #333;
 transition: background 0.2s ease;
 backdrop-filter: blur(5px);
}

.show-header-button:hover {
 background: rgba(255, 255, 255, 1);
}

.grid-instructions-overlay {
 position: fixed;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 5;
 background: rgba(255, 255, 255, 0.9);
 border: 2px solid #333;
 border-radius: 8px;
 padding: 15px 20px;
 text-align: center;
 backdrop-filter: blur(5px);
 max-width: 400px;
}

.header {
 text-align: center;
 margin-bottom: 20px;
}

.profile-section {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 20px;
 margin-bottom: 20px;
 flex-wrap: wrap;
}

.profile-image-container {
 position: relative;
 display: inline-block;
}

.profile-image {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 object-fit: cover;
 border: 3px solid #333;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 background: #f0f0f0;
}

.profile-info {
 text-align: left;
 text-decoration: underline;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
 body {
  overflow-y: auto;
  height: auto;
  min-height: 100vh;
 }
 
 .main-container {
  height: auto;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
 }
 
 .header-overlay {
  margin: 10px;
  padding: 20px;
  max-width: none;
 }
 
 .profile-section {
  flex-direction: column;
  text-align: center;
 }
 
 .profile-info {
  text-align: center;
 }
 
 .profile-info h1 {
  font-size: 2em;
 }
 
 .links {
  flex-wrap: wrap;
  gap: 10px;
 }
 
 .background-grid {
  opacity: 0.2;
  font-size: 10px;
 }
 
 .show-header-button {
  top: 10px;
  left: 10px;
  padding: 8px 12px;
  font-size: 14px;
 }
 
 .grid-instructions-overlay {
  bottom: 10px;
  padding: 10px 15px;
  max-width: calc(100vw - 40px);
 }
}

@media (max-width: 400px) {
 .header-overlay {
  padding: 15px;
  margin: 5px;
 }
 
 .profile-info h1 {
  font-size: 1.5em;
 }
 
 .background-grid {
  font-size: 8px;
 }
}

.profile-info h1 {
 margin: 0 0 5px 0;
 color: #333;
 font-size: 2.5em;
 font-weight: bold;
}

.profile-description {
 margin: 0;
 color: #666;
 font-style: italic;
 font-size: 1.1em;
}

.header h1 {
 margin: 0;
 color: #333;
 font-size: 2.5em;
 font-weight: bold;
}

.links {
 list-style: none;
 padding: 0;
 display: flex;
 justify-content: center;
 gap: 20px;
 margin-top: 10px;
}

.links a {
 color: #333;
 text-decoration: underline;
 padding: 5px 10px;
 font-weight: bold;
}

.links a:hover {
 background: #f0f0f0;
 text-decoration: none;
}

/* Health indicator styles */
.projects li {
 display: flex;
 align-items: center;
 gap: 8px;
}

.health-indicator {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background-color: #ccc;
 display: inline-block;
 position: relative;
 transition: background-color 0.3s ease;
}

.health-indicator.healthy {
 background-color: #4CAF50;
 box-shadow: 0 0 4px rgba(76, 175, 80, 0.6);
}

.health-indicator.unhealthy {
 background-color: #f44336;
 box-shadow: 0 0 4px rgba(244, 67, 54, 0.6);
}

.health-indicator.checking {
 background-color: #FF9800;
 animation: pulse 1.5s infinite;
}

@keyframes pulse {
 0% {
  opacity: 1;
 }
 50% {
  opacity: 0.5;
 }
 100% {
  opacity: 1;
 }
}

.ascii-grid {
 font-family: 'Courier New', monospace;
 font-size: 12px;
 line-height: 1;
 cursor: crosshair;
 padding: 0;
 margin: 0;
 position: relative;
 overflow: hidden;
 width: 100%;
 height: 100%;
}

.ascii-grid.background-grid {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 width: 100vw;
 height: 100vh;
 position: absolute;
 top: 0;
 left: 0;
}

.grid-row {
 white-space: pre;
 margin: 0;
 padding: 0;
 height: 1em;
}

.grid-cell {
 display: inline-block;
 width: 1ch;
 height: 1em;
 position: relative;
 cursor: pointer;
}

.grid-cell:hover {
 background: #e0e0e0;
}

.ascii-guy {
 color: #ff4444;
 font-weight: bold;
 position: absolute;
 z-index: 2;
 cursor: pointer;
 font-size: 14px;
 line-height: 1;
 pointer-events: auto;
}

.ascii-guy:hover {
 color: #cc0000;
 transform: scale(1.1);
}

.tooltip {
 position: absolute;
 background: #fff;
 border: 2px solid #333;
 padding: 10px;
 border-radius: 6px;
 font-size: 12px;
 z-index: 1001;
 min-width: 180px;
 max-width: 300px;
 display: none;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 color: #333;
 font-family: 'Courier New', monospace;
}

.modal {
 display: none;
 position: fixed;
 z-index: 1000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
 background-color: #fff;
 border: 2px solid #333;
 margin: 10% auto;
 padding: 20px;
 width: 400px;
 max-width: 90vw;
 color: #333;
 border-radius: 8px;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.modal input, .modal textarea {
 width: calc(100% - 16px);
 background: #fff;
 color: #333;
 border: 2px solid #333;
 padding: 8px;
 margin: 8px 0;
 font-family: 'Courier New', monospace;
 border-radius: 4px;
 box-sizing: border-box;
}

.modal input:focus, .modal textarea:focus {
 outline: none;
 border-color: #666;
}

.modal button {
 background: #fff;
 color: #333;
 border: 2px solid #333;
 padding: 8px 16px;
 cursor: pointer;
 margin-right: 10px;
 border-radius: 4px;
 font-weight: bold;
}

.modal button:hover {
 background: #333;
 color: #fff;
}

h2 {
 color: #333;
 margin-top: 30px;
 margin-bottom: 10px;
}

p {
 margin: 10px 0;
}

strong {
 font-weight: bold;
}

em {
 font-style: italic;
 color: #666;
}

.modal h3 {
 margin-top: 0;
 margin-bottom: 15px;
 color: #333;
}

.modal p {
 margin: 10px 0;
 font-weight: bold;
}

.modal div {
 margin-top: 15px;
}