html, body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  background: linear-gradient(to bottom, #000, #444);
  background-repeat: no-repeat;
  font-family:arial;
}

#topbar {
  margin-top: 5px;
  margin-left:5px;
  padding-top: 20px;
  padding-left:20px;
  text-align: left;
  font-size: 32px;
  font-weight: bold;
  word-spacing:30px;
  color:#ff0000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}

.normal {
 text-shadow:0px 3px #fff; 
 -webkit-text-stroke: 1px black;
}

#layout {
  display: flex;
  align-items: flex-start;
}


#left {
  width: 200px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
}


#main {
  flex: 1;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
}


#right {
  width: 200px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
  text-align:right;
  margin-right:10px;
}

.red {
 color:#ff0000; 
}

.yellow {
 color:#ffff00; 
}

.feedlinks {
 font-style:italic;
 font-size:20px;
 text-align:right;
 padding-bottom:25px;
}

.sidelinks {
 font-size:16px;
 font-weight:bold;
}




#toplinks {
  white-space: nowrap;
}

#topsearch {
  display: flex;
  padding-right:20px;
  margin-top: 5px;
}

#topsearch input {
  width: 200px;
  padding: 5px;
  border-style:solid;
  border-width:1px;
  border-color:red;
}

#topsearch button {
  padding: 3px 8px;
  cursor: pointer;
}





.feedlinks {
  word-spacing: normal;
}

.feed-item {
  display: inline-block;
  margin-right: 18px;   /* space after phrase */
  cursor: pointer;
}

.feed-separator {
  display: inline-block;
  margin-right: 18px;   /* space after | */
}

.feed-item:hover,
.feed-separator:hover {
  color: red;
}





.premium {
  margin-top: 5px;
  background: linear-gradient(to bottom, #ff0000, #ffcc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #ffff00;
  position: relative;
  display: inline-block;

  
}

.premium::before {
  margin-top: 1px;
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: white;
  z-index: -1;
  text-shadow:
  2px 2px 2px #ffff00,
 -2px 2px 2px #ffff00,
 -2px -2px 2px #ffff00,
  2px -2px 2px #ffff00;
}




.top-link {
  cursor: pointer;
}
.top-link:hover {
  color: yellow;
}


#left ul {
  list-style: none;
  padding: 0;
  margin:0;
}

.category-link,
.category-count {
  cursor: pointer;
  color: red;
  transition: color 0.2s ease;
}

.category-link:hover,
.category-link:hover + .category-count {
  color: yellow;
}



.narrative {
 display:flex;
 justify-content: space-between;
 align-items:flex-start;
 width:100%;
 padding-left:10px;
}

.narbox {
  flex:0 0 60%;  
}

.narimg {
  width: 100%;
display: block;
 border:solid 1px black;
 object-fit:cover;
 height:400px;
}

.nardesc {
  padding-left:10px;
  font-size:20px;
  font-weight:bold;
  flex: 0 0 35%;

}

.nardesc ul {
  list-style:none; 
}

.orange {
 color:#ff6600; 
 font-size:28px;
}

.lastupdated {
  color:white;
}

.narrativebelow {
  margin-top: 50px;
  padding-left: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: nowrap; /* important: forces single row */
}

.thumbnails {
  flex: 1 1 0;   /* equal share of row */
  height: 120px; /* or whatever you want */
  object-fit: cover;
}