/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&family=Orbitron:wght@400;700;900&display=swap');
  :root {
    --green: #00ff41;
    --green-dim: #00cc33;
    --green-dark: #008123;
    --green-glow: #00ff4180;
    --black: #000000;
    --dark: #050f05;
    --dark2: #0a1a0a;
    --dark3: #0f2410;
    --text: #b0ffb8;
    --text-dim: #ffffff;
    --pink: #ff00ff;
    --yellow: #ffff00;
    --cyan: #1fff22;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background-color: var(--black);
    background-image: url('../images/background.gif');
    background-size: cover;
    color: var(--text);
    font-family: 'VT323', monospace;
    font-size: 18px;
    min-height: 100vh;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='0,0 0,16 4,12 8,20 10,19 6,11 12,11' fill='%2300ff41' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 0 0, auto;
    overflow-x: hidden;
  }
  /* SCANLINE EFFECT */
  body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.15) 3px,
      rgba(0,0,0,0.15) 4px
    );
    pointer-events: none;
    z-index: 9999;
  }
  /* MARQUEE HEADER */
  .top-banner {
    background: var(--dark);
    border-bottom: 3px solid var(--green);
    box-shadow: 0 0 20px var(--green-glow), inset 0 0 30px rgba(0,255,65,0.05);
    overflow: hidden;
    padding: 6px 0;
  }
  .top-banner marquee {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: var(--green);
    text-shadow: 0 0 10px var(--green);
    letter-spacing: 2px;
  }
  .top-banner marquee span { margin: 0 20px; }
  .top-banner marquee .star { color: var(--yellow); text-shadow: 0 0 8px var(--yellow); }
  .top-banner marquee .pink { color: var(--pink); text-shadow: 0 0 8px var(--pink); }
  /* PAGE TITLE */
  .page-title {
    text-align: center;
    padding: 24px 10px 16px;
    background: linear-gradient(180deg, #000 0%, var(--dark2) 100%);
    border-bottom: 2px solid var(--green-dark);
  }
  .page-title h1 {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(14px, 3vw, 22px);
    color: var(--green);
    text-shadow: 0 0 20px var(--green), 0 0 40px var(--green-glow);
    animation: flicker 4s infinite;
    line-height: 1.6;
  }
  .page-title .subtitle {
    font-family: 'VT323', monospace;
    font-size: 22px;
    color: var(--pink);
    text-shadow: 0 0 10px var(--pink);
    margin-top: 8px;
    letter-spacing: 3px;
  }

#into:hover {
  /* Rotates the image slightly. Use a negative value (e.g., -3deg) for counter-clockwise */
  transform: rotate(5deg) scale(110%); 
}
  /* MAIN LAYOUT */
  .container {
    max-width: 980px;
    margin: 0 auto;
    padding: 14px 10px;
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
  }
  /* PANELS */
  .panel {
    border: 2px solid var(--green-dark);
    background: var(--dark2);
    box-shadow: 0 0 8px rgba(0,255,65,0.15), inset 0 0 20px rgba(0,0,0,0.5);
    margin-bottom: 12px;
  }
  .panel-header {
    background: linear-gradient(90deg, var(--green-dark), #001a05);
    border-bottom: 2px solid var(--green-dark);
    padding: 5px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--green);
    text-shadow: 0 0 8px var(--green);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .panel-header::before { content: '▶'; font-size: 8px; }
  .panel-body { padding: 10px; }
  /* SIDEBAR */
  .sidebar { grid-column: 1; }
  /* PROFILE PIC BOX */
  .profile-pic-box {
    border: 3px solid var(--green);
    box-shadow: 0 0 15px var(--green-glow), inset 0 0 10px rgba(0,255,65,0.1);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark3);
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
  }
  .profile-pic-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(0,255,65,0.03) 10px,
      rgba(0,255,65,0.03) 20px
    );
  }
  .profile-pic-placeholder {
    font-size: 80px;
    filter: drop-shadow(0 0 12px var(--green));
    z-index: 1;
    
  }
  .profile-pic-replace-hint {
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.4;
  }
  .username-display {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 15px;
    color: var(--green);
    text-shadow: 0 0 12px var(--green);
    word-break: break-all;
    margin-bottom: 6px;
  }
  .online-badge {
    text-align: center;
    margin-bottom: 10px;
  }
  .online-badge span {
    background: var(--green-dark);
    border: 1px solid var(--green);
    color: var(--green);
    font-size: 13px;
    padding: 2px 8px;
    animation: pulse 2s infinite;
  }
  /* ABOUT / DETAILS */
  .detail-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed var(--green-dark); font-size: 16px; }
  .detail-label { color: var(--text-dim); }
  .detail-val { color: var(--green); text-align: right; max-width: 60%; }
  /* NAV */
  .nav-links { list-style: none; }
  .nav-links li { border-bottom: 1px solid var(--green-dark); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a {
    display: block;
    padding: 7px 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 17px;
    transition: all 0.1s;
    letter-spacing: 1px;
  }
  .nav-links a:hover {
    background: var(--green-dark);
    color: var(--green);
    text-shadow: 0 0 8px var(--green);
    padding-left: 16px;
  }
  .nav-links a::before { content: '> '; color: var(--green-dim); }
  /* NOW PLAYING */
  .now-playing { text-align: center; }
  .np-label { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; }
  .np-track {
    color: var(--cyan);
    text-shadow: 0 0 8px var(--cyan);
    font-size: 17px;
    line-height: 1.4;
    word-break: break-word;
  }
  .np-bar {
    margin-top: 8px;
    height: 6px;
    background: var(--dark3);
    border: 1px solid var(--green-dark);
    border-radius: 0;
    overflow: hidden;
  }
  .np-fill {
    height: 100%;
    width: 60%;
    background: linear-gradient(90deg, var(--green-dark), var(--green));
    animation: progress 8s linear infinite;
  }
  /* BLINKY THINGS */
  .blinky { animation: blink 1s step-end infinite; }
  .blinky2 { animation: blink 0.7s step-end infinite; }
  /* MOOD / CURRENT STATUS */
  .mood-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 16px; }
  .mood-emoji { font-size: 22px; }
  /* MAIN CONTENT AREA */
  .main-content { grid-column: 2; }
  /* ABOUT ME SECTION */
  .about-text { font-size: 18px; line-height: 1.6; color: var(--text); }
  .about-text p { margin-bottom: 10px; }
  .about-text .highlight { color: var(--green); text-shadow: 0 0 6px var(--green); }
  .about-text .highlight2 { color: var(--cyan); }
  .about-text .highlight3 { color: var(--pink); }
  /* INTERESTS GRID */
  .interests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    margin-top: 8px;
  }
  .interest-tag {
    background: var(--dark3);
    border: 1px solid var(--green-dark);
    padding: 5px 8px;
    font-size: 15px;
    color: var(--text);
    text-align: center;
    transition: all 0.15s;
  }
  .interest-tag:hover {
    border-color: var(--green);
    color: var(--green);
    text-shadow: 0 0 6px var(--green);
    box-shadow: 0 0 8px var(--green-glow);
  }
  .interest-tag .ico { font-size: 18px; display: block; }
  /* TOP 8 / FRIENDS */
  .friends-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .friend-card {
    text-align: center;
    border: 1px solid var(--green-dark);
    background: var(--dark);
    padding: 4px 4px;
    transition: all 0.15s;
  }
  .friend-card:hover { border-color: var(--green); box-shadow: 0 0 8px var(--green-glow); }
  .friend-card .fav { font-size: 32px; display: block; }
  .friend-card .fname { font-size: 16px; color: var(--green-dim); word-break: break-all; }
  /* ===== BLOG SECTION ===== */
  #blog-section { grid-column: 1 / -1; }
  .blog-post {
    border: 2px solid var(--green-dark);
    background: var(--dark2);
    margin-bottom: 16px;
    box-shadow: 0 0 8px rgba(0,255,65,0.08);
    animation: fadeIn 0.4s ease;
  }
  .blog-post-header {
    background: linear-gradient(90deg, var(--dark3), var(--dark2));
    border-bottom: 1px solid var(--green-dark);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
  }
  .blog-post-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--green);
    text-shadow: 0 0 8px var(--green);
  }
  .blog-post-meta {
    font-size: 14px;
    color: var(--text-dim);
  }
  .blog-post-mood {
    font-size: 14px;
    color: var(--text-dim);
    font-style: italic;
  }
  .blog-post-body {
    padding: 12px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
  }
  .blog-post-tags {
    padding: 6px 12px 10px;
    font-size: 15px;
    color: var(--green-dim);
  }
  .blog-post-tags span {
    margin-right: 8px;
    color: var(--cyan);
  }
  .delete-btn {
    background: none;
    border: 1px solid #330000;
    color: #ff3333;
    font-family: 'VT323', monospace;
    font-size: 14px;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .delete-btn:hover { background: #1a0000; border-color: #ff3333; box-shadow: 0 0 6px rgba(255,0,0,0.4); }
  /* NEW POST FORM */
  .new-post-form { display: none; }
  .new-post-form.open { display: block; animation: fadeIn 0.3s ease; }
  .form-group { margin-bottom: 12px; }
  .form-label {
    display: block;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--green-dim);
    margin-bottom: 5px;
    letter-spacing: 1px;
  }
  .form-input, .form-textarea, .form-select {
    width: 100%;
    background: var(--dark);
    border: 1px solid var(--green-dark);
    color: var(--green);
    font-family: 'VT323', monospace;
    font-size: 19px;
    padding: 7px 10px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    caret-color: var(--green);
  }
  .form-input:focus, .form-textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 10px var(--green-glow);
  }
  .form-textarea { min-height: 140px; resize: vertical; }
  .form-select option { background: var(--dark); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    padding: 10px 18px;
    border: 2px solid;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.15s;
    margin-right: 8px;
    margin-top: 4px;
  }
  .btn-green {
    background: var(--green-dark);
    border-color: var(--green);
    color: var(--green);
    text-shadow: 0 0 6px var(--green);
  }
  .btn-green:hover {
    background: var(--green);
    color: var(--black);
    box-shadow: 0 0 16px var(--green-glow);
    text-shadow: none;
  }
  .btn-cancel {
    background: transparent;
    border-color: var(--text-dim);
    color: var(--text-dim);
  }
  .btn-cancel:hover { border-color: var(--text); color: var(--text); }
  .toggle-blog-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    background: var(--dark3);
    border: 2px solid var(--green);
    color: var(--green);
    padding: 9px 16px;
    cursor: pointer;
    text-shadow: 0 0 6px var(--green);
    box-shadow: 0 0 12px var(--green-glow);
    animation: pulse 2.5s infinite;
    display: inline-block;
    margin-bottom: 14px;
    letter-spacing: 1px;
    transition: all 0.15s;
  }
  .toggle-blog-btn:hover {
    background: var(--green);
    color: var(--black);
    text-shadow: none;
  }
  #no-posts-msg {
    text-align: center;
    color: var(--text-dim);
    font-size: 20px;
    padding: 30px;
    border: 1px dashed var(--green-dark);
  }
  /* DECORATIVE */
  .divider {
    border: none;
    border-top: 1px solid var(--green-dark);
    margin: 8px 0;
    box-shadow: 0 1px 4px rgba(0,255,65,0.1);
  }
  .section-deco {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--green-dark);
    letter-spacing: 3px;
    text-align: center;
    padding: 4px 0;
  }
  /* GUESTBOOK */
  .guestbook-entry {
    border-bottom: 1px dashed var(--green-dark);
    padding: 8px 0;
    font-size: 16px;
  }
  .guestbook-entry:last-child { border-bottom: none; }
  .guestbook-entry .gb-name { color: var(--green); font-size: 17px; }
  .guestbook-entry .gb-date { color: var(--text-dim); font-size: 14px; }
  .guestbook-entry .gb-msg { margin-top: 3px; line-height: 1.5; }
  /* BOTTOM BANNER */
  .bottom-banner {
    background: var(--dark);
    border-top: 3px solid var(--green);
    box-shadow: 0 0 20px var(--green-glow);
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: var(--text-dim);
    margin-top: 16px;
  }
  
#recentpostlistdiv {
  grid-column: 1 / -1;
  border: 2px solid var(--green-dark);
  background: var(--dark2);
  box-shadow: 0 0 8px rgba(0,255,65,0.15), inset 0 0 20px rgba(0,0,0,0.5);
  margin-bottom: 12px;
  padding: 0;
  
}
#recentpostlistdiv h2 {
  background: linear-gradient(90deg, var(--green-dark), #001a05);
  border-bottom: 2px solid var(--green-dark);
  padding: 5px 10px 5px 22px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--green);
  text-shadow: 0 0 8px var(--green);
  letter-spacing: 1px;
  margin: 0;
}
#recentpostlistdiv h2::before {
  content: '▶ ';
  font-size: 8px;
}
#recentpostlistdiv ul {
  list-style: none;
  padding: 8px 12px;
  margin: 0;
}
#recentpostlistdiv li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--green-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}
#recentpostlistdiv li:last-child {
  border-bottom: none;
}
#recentpostlistdiv li.moreposts::before {
  content: '»';
  color: var(--green-dim);
  animation: none;
}
#recentpostlistdiv a {
  color: var(--cyan);
  text-decoration: none;
  font-size: 18px;
  transition: all 0.15s;
  margin-left:20px;
}
#recentpostlistdiv a:hover {
  color: var(--green);
  text-shadow: 0 0 8px var(--green);
}

  .bottom-banner a { color: var(--green); text-decoration: none; }
  .bottom-banner a:hover { text-shadow: 0 0 6px var(--green); }
  /* GIF-STYLE BADGES */
  .badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
  .badge {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    padding: 3px 6px;
    border: 1px solid;
    letter-spacing: 0.5px;
    line-height: 1.6;
  }
  .badge-green { border-color: var(--green); color: var(--green); background: var(--dark3); }
  .badge-pink { border-color: var(--pink); color: var(--pink); background: #1a001a; }
  .badge-cyan { border-color: var(--cyan); color: var(--cyan); background: #001a1a; }
  .badge-yellow { border-color: var(--yellow); color: var(--yellow); background: #1a1a00; }
  /* ANIMATIONS */
  @keyframes flicker {
    0%,95%,100% { opacity: 1; }
    96% { opacity: 0.7; }
    97% { opacity: 1; }
    98% { opacity: 0.6; }
    99% { opacity: 1; }
  }
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 6px var(--green-glow); }
    50% { box-shadow: 0 0 18px var(--green-glow), 0 0 30px rgba(0,255,65,0.2); }
  }
  @keyframes float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  @keyframes progress { 0% { width:0% } 100% { width:100% } }
  @keyframes fadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  /* RESPONSIVE */
  @media (max-width: 640px) {
    .container { grid-template-columns: 1fr; }
    .sidebar, .main-content { grid-column: 1; }
    .friends-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr; }
  }

  a {
    color: yellow;
  }
p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

hr {
  border: solid #c7b591;
  border-width: 2px 0 0 0;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

h1, h2, h3, h4, h5 {
  font-family: Tahoma, Geneva, sans-serif;
  color: #e6ecff;
}

/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: #000000;
  color: #ffffff; 
  outline-color: #d9d9d9;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
}

#content {
  padding: 10px 5% 20px 5%;
}

.gif-text {
  /* Step 1: Use a thick font to make the GIF highly visible */
 
  font-size: 800px;

  /* Step 2: Load your GIF as a background */
  background-image: url('../images/water.gif');
  background-size: contain;


  /* Step 3: Clip the background to the text boundary */
  -webkit-background-clip: text; /* Required for Chrome, Safari, and Edge */
  background-clip: text;         /* Standard syntax */

  /* Step 4: Make the text clear so the GIF shines through */
  color: transparent;
}

/*HEADER STYLE*/
#header {
  background-color: #000000;
  padding: 0 5%;
  border-color: #a9a9a9;
  border-style: ridge;
  border-width: 0 0 4px 0;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: white;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
}