@font-face {
  font-family: LL;
  src: url("/assets/LoveLetter.ttf");
  font-display: block;
  transform-origin: left;
  size-adjust: 79%;
}

@font-face {
  font-family: 'Courier New';
  src: url('/assets/ModernDOS9x16.ttf');
  font-display: block;
}

@font-face {
  font-family: 'MS Sans Serif';
  src: url('/assets/ms-sans-serif-1.otf');
  font-display: block;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: LL;
  color: #00cc00;
  -webkit-text-stroke: 4px #000;
  paint-order: stroke fill;
}


a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover {
  border-bottom: 1px solid #00cc00;
}

html,
body {
  height: 100%;
  font-size: 1.2rem;
  line-height: 1.5;
  min-width: 330px;
  -webkit-text-size-adjust: 100%;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1rem;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #010101;
}

#content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  z-index: 2;
}

.nav {
  position: fixed;
  z-index: 2;
  bottom: 2rem;
  right: 3rem;
  font-family: monospace;
  font-size: 0.66rem;
  color: white;
  opacity: 0.8;
  -webkit-text-stroke: 2px rgb(40, 40, 40);
  paint-order: stroke fill;
}

.col-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  flex-grow: 1;
  padding: 1.4rem;
}

.ncol-1 {
  flex: 80%;
  align-items: end;
  align-content: end;
}

.ncol-2 {
  align-items: start;
  align-content: start;
  justify-content: center;
}

.title-block {
  position: relative;
}

#title {
  position: relative;
  margin-top: auto;
  margin-bottom: 2rem;
  z-index: 1;
}


.bg-col-2 {
  margin-left: auto;
}

.bg-col-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
}

#rb {
  height: 200px;
  width: 150px;
  max-height: 200px;
  background: url('/assets/rabbit_hole.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#rb:hover {
  height: 200px;
  width: 150px;
  max-height: 200px;
  background: url('/assets/rb_open.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Win95 Window */
.win95-window {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #666666 #666666 #ffffff;
  box-shadow: 1px 1px 0 0 #000;
  min-width: 200px;
  min-height: 150px;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
  cursor: default;
  user-select: none;
}

.win95-window * {
  font-family: inherit;
  font-size: inherit;
  color: #000;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

.win95-body::-webkit-scrollbar,
.win95-tab-content::-webkit-scrollbar,
.win95-scroll::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: none;
}

.win95-body::-webkit-scrollbar-thumb,
.win95-tab-content::-webkit-scrollbar-thumb,
.win95-scroll::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-button {
  width: 16px;
  height: 16px;
  background: silver;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
  border: 1px solid;
  border-color: silver #000 #000 silver;
}

.win95-body::-webkit-scrollbar-track,
.win95-tab-content::-webkit-scrollbar-track,
.win95-scroll::-webkit-scrollbar-track {
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+");
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2px;
}

.win95-body::-webkit-scrollbar-button,
.win95-tab-content::-webkit-scrollbar-button,
.win95-scroll::-webkit-scrollbar-button {
  background-repeat: no-repeat;
  background-size: 16px;
}

.win95-body::-webkit-scrollbar-button:single-button:vertical:decrement,
.win95-tab-content::-webkit-scrollbar-button:single-button:vertical:decrement,
.win95-scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=");
}

.win95-body::-webkit-scrollbar-button:single-button:vertical:increment,
.win95-tab-content::-webkit-scrollbar-button:single-button:vertical:increment,
.win95-scroll::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=");
}

.win95-body::-webkit-scrollbar-button:single-button:horizontal:decrement,
.win95-tab-content::-webkit-scrollbar-button:single-button:horizontal:decrement,
.win95-scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=");
}

.win95-body::-webkit-scrollbar-button:single-button:horizontal:increment,
.win95-tab-content::-webkit-scrollbar-button:single-button:horizontal:increment,
.win95-scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=");
}

.win95-body::-webkit-scrollbar-corner,
.win95-tab-content::-webkit-scrollbar-corner,
.win95-scroll::-webkit-scrollbar-corner {
  background: silver;
}

.win95-title-bar {
  display: flex;
  align-items: center;
  height: 20px;
  background: linear-gradient(90deg, #000080, #1084d0);
  padding: 2px 2px 2px 3px;
  flex-shrink: 0;
  cursor: move;
}

.win95-title-text {
  flex: 1;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win95-close-btn {
  width: 16px;
  height: 14px;
  border: 2px solid;
  border-color: #ffffff #666666 #666666 #ffffff;
  background: #c0c0c0;
  font-size: 12px;
  line-height: 10px;
  text-align: center;
  cursor: default;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #000;
}

.win95-close-btn:active {
  border-color: #666666 #ffffff #ffffff #666666;
}

.win95-body {
  flex: 1;
  position: relative;
  background: #c0c0c0;
  min-height: 0;
}

.win95-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, #666666 25%, #fff 25%, #fff 50%, #666666 50%, #666666 75%, #fff 75%);
  background-size: 6px 6px;
}

.win95-body canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Tab Control ── */
.win95-tab-bar {
  display: flex;
  padding-left: 2px;
  flex-shrink: 0;
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
}

.win95-tab {
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
  padding: 3px 10px 4px 10px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #666666 #666666 #fff;
  cursor: default;
  position: relative;
  margin-right: -2px;
  top: 0;
}

.win95-tab.active {
  border-bottom-color: #c0c0c0;
  z-index: 3;
}

.win95-tab-content {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #666666 #fff #fff #666666;
  padding: 10px 8px 8px 8px;
  flex: 1;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.win95-tab-panel {
  display: none;
}

.win95-tab-panel.active {
  display: block;
}

/* ── Form Elements ── */
.win95-label {
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
  color: #000;
  display: block;
  margin-top: 6px;
  margin-bottom: 2px;
}

.win95-input {
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
  color: #000;
  padding: 2px 4px;
  border: 2px solid;
  border-color: #666666 #fff #fff #666666;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.win95-textarea {
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
  color: #000;
  padding: 2px 4px;
  border: 2px solid;
  border-color: #666666 #fff #fff #666666;
  background: #fff;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  outline: none;
  resize: vertical;
}

.win95-fieldset {
  border: 2px solid;
  border-color: #fff #666666 #666666 #fff;
  padding: 8px;
  margin-bottom: 8px;
}

.win95-btn {
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
  padding: 4px 16px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #666666 #666666 #fff;
  cursor: default;
  color: #000;
  margin-top: 8px;
}

.win95-btn:active {
  border-color: #666666 #fff #fff #666666;
}

/* ── Menu Bar ── */
.win95-menu-bar {
  display: flex;
  align-items: stretch;
  height: 20px;
  background: #c0c0c0;
  border-bottom: 1px solid #666666;
  flex-shrink: 0;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
}

.win95-menu-item {
  padding: 2px 8px;
  cursor: default;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
  color: #000;
}

.win95-menu-item u {
  color: inherit;
}

.win95-menu-item:hover {
  background: #000080;
  color: #fff;
}

.win95-menu-dropdown {
  position: absolute;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #666666 #666666 #fff;
  padding: 2px;
  z-index: 20;
  min-width: 140px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

.win95-menu-dropdown-item {
  padding: 3px 20px 3px 8px;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
  cursor: default;
  white-space: nowrap;
  color: #000;
}

.win95-menu-dropdown-item:hover {
  background: #000080;
  color: #fff;
}

.win95-menu-dropdown-item-disabled {
  color: #888;
}
.win95-menu-dropdown-item-disabled:hover {
  background: #c0c0c0;
  color: #888;
}

/* ── Status Bar ── */
.win95-status-bar {
  height: 22px;
  background: #c0c0c0;
  border-top: 1px solid #fff;
  display: flex;
  align-items: stretch;
  padding: 2px 2px;
  flex-shrink: 0;
}

.win95-status-panel {
  border: 2px solid;
  border-color: #666666 #fff #fff #666666;
  padding: 0 4px;
  display: flex;
  align-items: center;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
  color: #000;
  white-space: nowrap;
}

/* ── Guestbook Entries ── */
.guest-entry {
  padding: 6px 4px;
  border-bottom: 1px solid #c0c0c0;
}

.guest-entry:last-child {
  border-bottom: none;
}

.guest-entry-name {
  font-weight: bold;
  color: #000080;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
}

.guest-entry-date {
  color: #666666;
  font-size: 10px;
  margin-left: 8px;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
}

.guest-entry-comment {
  margin-top: 2px;
  color: #000;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
  font-size: 10px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.win95-pagination {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.win95-pagination .win95-btn {
  min-width: 24px;
  padding: 2px 6px;
  text-align: center;
  margin-top: 0;
}
.win95-pagination .win95-btn.active {
  border-color: #666666 #fff #fff #666666;
  background: #a0a0a0;
}
.win95-pagination .win95-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}