:root {
	/* --link-color: #0051ff; */
	--link-color: #1c58ff ;
	--ext-link-color: #ffd621;
  --background-color: #000;
	/* Possible other colors:
	 * rgb(63, 255, 0)
	 * rgb(38, 153, 0)
	 */
	--text-color: #000;
}
* {
	box-sizing: border-box;
}

body {
  background-image: url("https://old.biogutterne.gay/background.png");
  background-repeat: repeat;
	color: var(--text-color);
	margin: 0;
  font-family: "Courier Prime", monospace;
	font-size: 14px;
	line-height: 1.4
}

.site {
	padding-right: 15px;
	padding-left: 15px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
  width: fit-content;
  background-color: white;
  padding: 5px 12px 7px 12px;
  border-radius: 5px;
}

.site .header {
	margin-top: 20px;
	margin-bottom: 10px;
}

.site .main {
	margin-top: 15px;
	margin-bottom: 15px;
}

.article-list {
  display: grid;
  gap: 10px;
}

@media (min-width: 480px) {
  .article-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 768px) {
  .article-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .article-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .article-list {
    grid-template-columns: repeat(5, 1fr);
  }
}

.article-card {
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--text-color);
  background-color: lightblue;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.article-title {
  padding-left: 2px;
  padding-right: 2px;
  inline-size: 150px;
  overflow-wrap: break-word;
}
 
img.crop-200x280 {
  max-width: 200px;
  max-height: 280px;
  object-fit: contain;
}

img.crop-700x480 {
  max-width: 700px;
  max-height: 480px;
  object-fit: contain;
}

.site .nav > a {
	background-size: 1px 1em;
	/* background-size: 1px 1em; */
	box-shadow:
		inset 0 -0.00em var(--background-color),
		inset 0 -0.12em #ff0000;
	transition: box-shadow 0.2s ease-out 100ms;
	display: inline;
	text-decoration: none;
	font-size: 18px;
	color: var(--text-color);
	margin-right: 15px;
}
.site .nav > a.external-link {
	box-shadow:
		inset 0 -0.00em var(--background-color),
		inset 0 -0.12em var(--ext-link-color);
} 

.site .nav > a:hover {
	box-shadow:
		inset 0 -0.00em #111,
		inset 0 -0.12em #0000cc;
}