/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("/Images/dithered-nickCage.png");
  background-repeat: repeat;
  font-family: "Lucida Console", Monaco, "Courier New", monospace;
  font-weight: 400;       /* standard weight, not bold */
  color: red;
  background-color : black;       /* fallback */
}

.thumbnail {
  max-width: 150px;       /* smaller thumbnail */
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #999;
  border-radius: 4px;
}

.site-entry:hover .site-title {
  color : white;     /* subtle hover effect */
}


.site-entry:hover .site-description{
  color : white;     /* subtle hover effect */
}



.site-title {
  font-weight: 400;
  letter-spacing: 1px;   /* slightly spaced letters, feels old-school */
  font-size: 1.1em;
}



.site-description {
  font-weight: 300;
  letter-spacing: 0.5px;
  font-size: 0.9em;
}




.site-text {
  flex: 1;                 /* takes remaining horizontal space */
}


.site-entry {
  display: flex;
  align-items: flex-start; /* aligns text with top of image */
  gap: 16px;               /* space between image and text */
  text-decoration: none;   /* removes underline */
  color: inherit;          /* keeps text color the same */
  background: none;
  padding: 12px;
  /* border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 16px;
  transition: background 0.2s; 
  */
}

a {
  color: #66ccff;
}
a:hover {
  color: white;
}