/* --- BASE SETUP --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #554e4e; /* The dark grey page background */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: Arial, sans-serif; /* Clean, basic font */
  color: #222;
}

/* --- THE CONTAINERS --- */
.outer-frame {
  background-color: white;
  padding: 8px; /* Creates the thick white border effect */
  width: 95%;
  max-width: 550px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Adds a shadow behind the whole site */
}

.inner-frame {
  background-color: #c9b4b4; /* The dusty pink color */
  border: 1px solid #333;
}

/* --- TOP BAR & BANNER --- */
.top-bar {
  padding: 5px 10px;
  font-size: 12px;
  border-bottom: 1px solid #333;
}

/* The box that holds your text */
.typing-text {
  display: inline-block;
  overflow: hidden; /* Hides the text before the box expands over it */
  white-space: nowrap; /* Forces text to stay on one line */
  border-right: 2px solid black; /* Creates the blinking cursor line */
  
  /* The magic width: 'ch' stands for 'characters'. Your sentence is about 28 characters long! */
  width: 26ch; 
  
  /* Runs the typing animation for 3 seconds, in 28 letter-sized jumps, and then runs the blink animation forever */
  animation: typing 3s steps(26, end) forwards, blink 0.7s step-end infinite;
}

/* The Typing Animation */
@keyframes typing {
  from { width: 0; }
  to { width: 26ch; }
}

/* The Blinking Cursor Animation */
@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: black; } /* Change 'black' to match your text color if needed */
}

.banner img {
  width: 100%;
  height: 120px;
  object-fit: cover; /* Makes sure the banner doesn't stretch weirdly */
  display: block;
  border-bottom: 1px solid #333;
}

/* --- HEADER & PROFILE --- */
.header-section {
  position: relative;
  padding: 10px 15px;
  height: 90px;
}

.profile-img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid #c9b4b4; /* Pink border to blend in */
  position: absolute;
  top: -40px; /* Pulls the image up over the banner */
  left: 20px;
  object-fit: cover;
}

.title-area {
  margin-left: 130px; /* Pushes text to the right of the profile pic */
}

.name-title {
  font-family: Georgia, serif; /* Gives it that fancy serif look */
  font-size: 38px;
  font-style: italic;
  color: #eed5d5;
  /* The trick to creating that Y2K outlined text effect: */
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 2px 3px 0px rgba(0,0,0,0.2);
  margin-bottom: 5px;
}

.links a {
  font-size: 11px;
  color: #554e4e;
  text-decoration: underline;
}

/* --- SCROLLING MARQUEE --- */
.marquee-container {
  background-color: white;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  font-weight: bold;
}

.marquee-text {
  display: inline-block;
  animation: scrollText 7s linear infinite; /* Activates the scrolling */
}

@keyframes scrollText {
  from { transform: translateX(0%); }
  to { transform: translateX(-20%); }
}

/* --- MAIN CONTENT SPLIT --- */
.content-split {
  display: flex;
  padding: 15px;
  gap: 15px;
}

/* --- LEFT COLUMN (BOXES) --- */
.left-column {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-box {
  display: flex;
  justify-content: space-between;
  border: 1px solid #333;
  padding: 3px 6px;
  font-size: 11px;
  margin-bottom: 5px;
}

.search-text {
  flex-grow: 1;
  text-align: center;
  padding: 0 5px;
}

.trait-box {
  border: 1px solid #333;
  padding: 6px;
  font-size: 11px;
  font-weight: 500;
}

/* --- RIGHT COLUMN (TEXT) --- */
.right-column {
  width: 55%;
  font-size: 10.5px;
  line-height: 1.3;
  color: #333;
}

.right-column span {
  color: #e2d1d1; /* The lighter grey text in the paragraph */
}

/* --- BOTTOM NAV BAR --- */
.bottom-bar {
  display: flex;
  border-top: 1px solid #333;
  height: 35px;
}

.nav-btn {
  flex: 1; /* Makes all 3 buttons exactly equal width */
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #333;
  font-size: 16px;
  cursor: pointer;
  background-color: #c9b4b4;
}

.nav-btn:hover {
  background-color: #bfa5a5; /* Slight hover effect */
}