/* --- Basic Body --- */
body {
  background: #000;
  color: #000080;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* --- Monitor Container --- */
#monitor-container {
  width: 800px;
  height: 600px;
  margin: 40px auto;
  position: relative;
}

/* --- CRT / Screen --- */
#crt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Scrollable content */
#screen-inner {
  position: absolute;
  top: 55px;
  left: 70px;
  width: 660px;
  height: 490px;
  overflow-y: scroll;
  overflow-x: hidden;
  pointer-events: auto;
  background-color: #fff;
  z-index: 1;
  padding: 0;
  position: relative;
}

/* CRT overlay fixed on screen */
#crt-overlay {
  position: absolute;
  top: 55px;  
  left: 70px;
  width: 660px;
  height: 490px;
  pointer-events: none;
  z-index: 999;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.12) 0px,
    rgba(0,0,0,0.12) 1px,
    transparent 1px,
    transparent 2px
  );
  background-repeat: repeat;
}

/* --- Monitor Frame --- */
#monitor-frame {
  position: relative;
  width: 800px;
  height: 600px;
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* --- Netscape Window --- */
#netscape {
  background: #c0c0c0;
  border: 2px solid #808080;
  font-size: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Title bar and buttons */
#titlebar {
  background: linear-gradient(#000080,#00004d);
  color: #fff;
  padding: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.window-buttons .btn {
  width: 10px;
  height: 10px;
  background: #ccc;
  display: inline-block;
  margin-left: 3px;
  border: 1px solid #666;
}

/* Toolbar */
#toolbar {
  background: #d4d0c8;
  padding: 4px;
  font-size: 12px;
}
#toolbar button {
  font-size: 11px;
}
.url {
  color: #000080;
  margin-left: 10px;
}

/* Page content */
#page {
  padding: 6px;
}
#content {
  background: transparent;
  padding: 10px;
  color: #000080;
}

/* Sidebar */
#sidebar {
  background: #e0e0e0;
  font-size: 12px;
  padding: 6px;
}
.box {
  background: #f0f0f0;
  border: 1px solid #808080;
  padding: 6px;
  margin-bottom: 10px;
  font-size: 12px;
}

/* Header & Footer */
#header,
#footer {
  background: #000080;
  color: #fff;
  text-align: center;
  padding: 4px 0;
  font-size: 12px;
}

/* Netscape GIF */
#netscape-gif {
  text-align: center;
  margin-top: 5px;
}

/* York container */
#york-container {
  text-align: center;
  margin-top: 10px;
}
.me {
  display: block;
  margin: 10px auto;
  border: 3px solid #000080;
  background: #fff;
  image-rendering: pixelated;
}
.netty-gif {
  display: block;
  margin: 0 auto 10px;
}
.truth-badge {
  display: block;
  margin: 10px auto 0;
}

/* Scrollbar styling */
#screen-inner::-webkit-scrollbar {
  width: 12px;
}
#screen-inner::-webkit-scrollbar-track {
  background: #c0c0c0;
}
#screen-inner::-webkit-scrollbar-thumb {
  background: #000080;
  border-radius: 6px;
  border: 2px solid #c0c0c0;
}

/* Bottom Ad Menu */
#bottom-ad-bar {
  width: 100%;
  background: #e0e0e0;
  border-top: 2px solid #808080;
  padding: 6px 0;
  text-align: center;
  font-size: 12px;
  box-sizing: border-box;
  margin-top: 20px;
}
#bottom-ad-bar img {
  margin: 0 5px;
  vertical-align: middle;
}