@font-face {
  font-family: 'TopazPlus-a1200';
  src: url('topaz.eot');
}
@font-face {
  font-family: 'TopazPlus-a1200';
  src: url('topaz.ttf') format('truetype');
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  color: #57ffff;
  font-family: 'TopazPlus-a1200', monospace;
  background: #0c1d12;
}

body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.tv-screen {
  display: block;
  flex-direction: column;
  /* min-height: 100vh; */
  height: auto;
  background: radial-gradient(circle at center, #1a1a2e, #0c1d12);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}

header {
  padding: 1rem;
  background: #111;
  border-bottom: 5px solid #007700;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

header h1 {
  margin: 0;
  font-size: 2rem;
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
}

header nav ul {
  list-style: none;
  padding: 0;
}

header nav ul li {
  display: inline;
  margin: 0 1rem;
}

header nav ul li a {
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00;
}

header nav ul li a:hover {
  text-shadow: 0 0 20px #00ff00;
  color: #00ff99;
}

main {
  display: flex;
  padding: 1rem;
  gap: 20px;
  flex: 1;
  overflow-y: visible;
  overflow-x:visible;
}

.content {
  flex: 3;
  /* overflow-y: auto ; */
}

.sidebar {
  flex: 1;
  background: #0a1b10;
  padding: 1rem;
  border: 2px solid #00ff00;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  /* overflow-y: auto; */
  height: auto;
}

.sidebar h3 {
  margin-top: 0;
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  margin-bottom: 10px;
}

.sidebar a {
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00;
}

.sidebar .tag a {
  color: #00ff00;
  text-shadow: 0 0 10px #ff0d01;
}

.sidebar a:hover {
  text-decoration: underline;
  color: #00ff99;
}

.sidebar-image {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border: 2px solid #00ff00;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}



.thread {
  margin-bottom: 1rem;
  padding: 10px;
  background: rgba(18, 18, 29, 0.9);
  border: 2px solid #00ff00;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  position: relative;
  z-index: 1;
  display: flex;
  gap:10px;
  height:200px
  width:200px
}

.thread-image {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
  border: 2px solid #00ff00;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  float: right;
}

.thread h4 {
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00;
}

.thread p {
  font-size: 1rem;
  color: #00ffcc;
  text-shadow: 0 0 5px #00ffcc;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px;
  border: 1px solid #FF6600 ; /* Colore del contorno neon rosa */
  color: #FF6600 !important;
  background-color: #0a1b10; /* Colore di sfondo per il retro tema */
  text-shadow: 0 0 5px #FF6600, 0 0 10px #FF6600 !important;
  font-size: 0.9rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.tag:hover {
  background-color: #FFAE42;
  color: #FF6600;
  box-shadow: 0 0 10px #FF6600, 0 0 20px #FF6600;
}

.sidebar .tag:hover  {
  background-color: #FFAE42;
  color: #ff3300 !important;
  box-shadow: 0 0 10px #FF6600, 0 0 20px #FF6600;
}

footer {
  padding: 1rem;
  background: #111;
  border-top: 5px solid #007700;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  position: relative;
}

.versionnumber footer {
	font-size: 10px;
	margin-top: -10px;
	text-align: end !important;
}

.flicker {
  pointer-events: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 15;
  background: rgba(0, 0, 0, 0.1);
  animation: flicker 0.3301s infinite;
}

.scanlines {
  position: fixed;
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: linear-gradient(rgba(18, 16, 16, 0) 100%, rgba(0, 0, 0, 0.25) 100%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); 
  /* background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); */
  background-size: 100% 2px, 3px 100%;
}

@keyframes flicker {
  0% { opacity: 0.119; }
  5% { opacity: 0.02841; }
  10% { opacity: 0.11171; }
  15% { opacity: 0.18028; }
  20% { opacity: 0.06174; }
  25% { opacity: 0.01078; }
  30% { opacity: 0.14994; }
  35% { opacity: 0.20507; }
  40% { opacity: 0.09599; }
  45% { opacity: 0.18462; }
  50% { opacity: 0.16952; }
  55% { opacity: 0.19912; }
  60% { opacity: 0.11171; }
  65% { opacity: 0.13115; }
  70% { opacity: 0.08803; }
  75% { opacity: 0.03568; }
  80% { opacity: 0.13127; }
  85% { opacity: 0.02129; }
  90% { opacity: 0.17088; }
  95% { opacity: 0.02167; }
  100% { opacity: 0.19912; }
}

@keyframes scanline {
  0% { top: 0; }
  100% { top: 100%; }
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #111;
  box-shadow: inset 0 0 6px rgba(0, 255, 0, 0.5);
}

::-webkit-scrollbar-thumb {
  background: #00ff00;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 255, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
  background: #00ff99;
}