body {
  background-color: #000000;
  background-image: url('assets/bg-stars.svg');
  background-repeat: repeat;
  color: #00FF00;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
  padding: 10px;
}

a {
  color: #00FFFF;
  text-decoration: underline;
}

a:visited {
  color: #FF00FF;
}

a:hover {
  color: #FFFF00;
  background-color: #0000FF;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: "Times New Roman", Times, serif;
  color: #FFFF00;
  text-align: center;
  margin: 10px 0;
}

h1 {
  font-size: 36px;
  text-shadow: 2px 2px #FF0000;
}

hr {
  border: 0;
  border-top: 3px double #00FF00;
  margin: 20px auto;
  width: 90%;
}

marquee {
  background-color: #000080;
  color: #FFFFFF;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: bold;
  padding: 5px;
  border: 2px outset #0000FF;
  margin: 10px 0;
}

/* Oldschool Table Layout styling */
.main-table {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  border: 4px outset #888888;
  background-color: rgba(0, 0, 0, 0.8);
  border-collapse: collapse;
}

.main-table td {
  border: 2px inset #888888;
  padding: 15px;
  vertical-align: top;
}

.sidebar {
  width: 250px;
  background-color: #001100;
}

.content {
  background-color: #000000;
}

/* Sidebar Menu */
.menu-list {
  list-style-type: square;
  padding-left: 20px;
}

.menu-list li {
  margin-bottom: 10px;
}

/* Sections */
.section-box {
  border: 2px dashed #00FF00;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #000500;
}

.section-box h3 {
  color: #FF00FF;
  text-align: left;
  border-bottom: 1px solid #FF00FF;
  padding-bottom: 5px;
}

/* Project list */
.project-item {
  margin-bottom: 15px;
}
.project-item b {
  color: #FFFF00;
  font-size: 18px;
}

/* Brutalist Form */
form {
  margin: 0;
}

input[type="text"], textarea {
  background-color: #000000;
  color: #00FF00;
  border: 2px inset #888888;
  font-family: "Courier New", Courier, monospace;
  padding: 5px;
  width: 100%;
  box-sizing: border-box;
}

input[type="submit"] {
  background-color: #C0C0C0;
  color: #000000;
  border: 3px outset #FFFFFF;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  padding: 5px 15px;
  cursor: pointer;
  margin-top: 10px;
}

input[type="submit"]:active {
  border-style: inset;
}



/* Badges */
.badges {
  text-align: center;
  margin-top: 20px;
}

.badges a:hover {
  background-color: transparent;
}

.badges img {
  border: 0;
  margin: 2px;
}

/* Center elements */
.text-center {
  text-align: center;
}

/* Flashing text (simulating blink tag) */
.blink {
  animation: blinker 1s linear infinite;
  color: #FF0000;
  font-weight: bold;
}

@keyframes blinker {
  50% { opacity: 0; }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS
   Make the 90s table layout stack gracefully on modern smartphones
   ========================================================================== */
@media screen and (max-width: 768px) {
  body {
    padding: 5px;
  }

  /* Force table elements to block level so they stack */
  .main-table, 
  .main-table tbody, 
  .main-table tr, 
  .main-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .main-table {
    width: 98%;
  }

  /* Ensure sidebar doesn't look weird when stacked */
  .sidebar {
    width: 100%;
    border-bottom: 2px solid #888888;
  }

  .content {
    width: 100%;
  }

  /* Adjust typography for smaller screens */
  h1 {
    font-size: 24px;
  }

  marquee {
    font-size: 14px;
  }

  .badges img {
    margin-bottom: 5px;
  }
}