/* Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Kantumruy Pro', sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

body {
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}

/* Dark mode styles */
body.dark-mode {
  background-color: #222;
  color: #f0f0f0;
}

body.dark-mode .bg-gray-100 { background-color: #222; }
body.dark-mode .bg-cccccc { background-color: #333; }
body.dark-mode .bg-eeeeee { background-color: #444; }
body.dark-mode .bg-white { background-color: #333; }
body.dark-mode a { color: #66b0ff; }
body.dark-mode h1 { border-bottom-color: #66ff66; }
body.dark-mode h1::after { background-color: #66ff66; }

/* Mode toggle button */
.mode-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  background: #ddd;
  color: #333;
  border: 2px solid #666;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 3px 3px 0 #999;
}

body.dark-mode .mode-toggle {
  background: #555;
  color: #fff;
  box-shadow: 3px 3px 0 #000;
}

/* Background colors */
.bg-gray-100 { background-color: #f4f4f4; }
.bg-cccccc { background-color: #CCCCCC; }
.bg-eeeeee { background-color: #EEEEEE; }
.bg-yellow-300 { background-color: #f6e046; }
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }

/* Text colors and sizes */
.text-purple-600 { color: #8B5CF6; }
.text-blue-600 { color: #2563EB; }
.text-red-600 { color: #ad4854; }
.text-white { color: #ffffff; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-3xl { font-size: 1.875rem; }
.text-6xl { font-size: 3.75rem; }
.font-mono { font-family: monospace; }

/* Spacing */
.p-0 { padding: 0; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.m-0 { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mr-2 { margin-right: 0.5rem; }

/* Flexbox */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.float-left { float: left; }

/* Width/sizing */
.w-full { width: 100%; }
.max-w-150 { max-width: 150px; }

/* Misc utilities */
.rounded { border-radius: 0.25rem; }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.underline { text-decoration: underline; }
.italic { font-style: italic; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.align-top { vertical-align: top; }
.list-none { list-style-type: none; }
.border { border-width: 1px; }
.border-gray-400 { border-color: #CBD5E0; }

/* Blink animation for the title */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.blink {
  animation: blink 2s infinite;
}

/* Marquee animation */
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

/* Table styles */
table {
  border-collapse: collapse;
  width: 100%;
}

table td {
  padding: 8px;
}

/* Navigation styles */
ul {
  list-style-type: square;
  padding-left: 1.5rem;
  margin: 1rem 0;
}

a {
  color: #2563EB;
  text-decoration: none;
  position: relative;
  transition: all 0.3s;
}

a:hover {
  color: #FF5733;
  text-decoration: underline;
}

/* Enhanced navigation hover effect */
nav a::before {
  content: "》";
  position: absolute;
  left: -20px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateX(-10px);
}

nav a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Section titles */
h1 {
  margin: 1.5rem 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #2fbe62;
}

/* Progress bar effect */
h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background-color: #2fbe62;
  margin-top: 5px;
}

/* Projects list */
ul li {
  margin-bottom: 1rem;
}

/* Contact section */
p b {
  font-weight: bold;
}

/* Footer style */
.text-xs.italic {
  color: #777;
  padding: 0.5rem;
}

/* Image styles */
img {
  display: block;
  max-width: 100%;
}

/* Animated divider */
.divider {
  height: 20px;
  background: url('../images/gifs/under-construction.gif') repeat-x;
  margin: 15px 0;
}

/* Guestbook styles */
.guestbook {
  background: #f0f0f0;
  border: 2px solid #999;
  padding: 15px;
  margin-top: 20px;
  box-shadow: 5px 5px 0 #ccc;
}

body.dark-mode .guestbook {
  background: #333;
  border-color: #666;
  box-shadow: 5px 5px 0 #222;
}

.guestbook-entry {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #999;
}

.guestbook-name {
  font-weight: bold;
  color: #ff5500;
}

body.dark-mode .guestbook-name {
  color: #ff8844;
}

.guestbook-date {
  font-size: 0.8rem;
  color: #666;
  font-style: italic;
}

body.dark-mode .guestbook-date {
  color: #999;
}

.guestbook-message {
  margin-top: 5px;
}

/* Form styling */
.form-group {
  margin-bottom: 15px;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 5px;
  border: 2px solid #999;
  background: #fff;
  font-family: 'Comic Sans MS', cursive;
}

body.dark-mode .form-input,
body.dark-mode .form-textarea {
  background: #444;
  color: #fff;
  border-color: #666;
}

.form-button {
  padding: 5px 15px;
  background: #f6e046;
  border: 2px outset #ddd;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Comic Sans MS', cursive;
}

.form-button:active {
  border-style: inset;
}

body.dark-mode .form-button {
  background: #666;
  color: #fff;
  border-color: #888;
}

/* 90s rotating email */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  display: inline-block;
  animation: spin 3s linear infinite;
}

/* Hit counter styling */
.hit-counter {
  display: inline-block;
  background: #000;
  color: #0f0;
  font-family: "Courier New", monospace;
  padding: 3px 6px;
  border: 1px solid #333;
}

/* Retro box with 3D effect */
.retro-box {
  border: 2px solid;
  border-color: #fff #999 #999 #fff;
  padding: 10px;
  position: relative;
  background: #ddd;
}

body.dark-mode .retro-box {
  border-color: #666 #222 #222 #666;
  background: #444;
}

/* Space for list items with "+" */
.space-y-2 > * {
  margin-top: 0.5rem;
}