@font-face {
  font-family: komika;
  src: url(https://murt.b-cdn.net/komika.ttf); /* url of the font */
}

img {
  max-width: 100%;
  max-height:100%;
}

.text {
  font-size: 20px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
    body {
		font-family: komika;
		margin: 40px auto;
		max-width: 650px;
		line-height: 1.6;
		font-size: 18px;
		color: #eee;
		padding: 0 10px;
		background-color: #010101;
	}
}

@media (prefers-color-scheme: light) {
    body {
		font-family: komika;
		margin: 40px auto;
		max-width: 650px;
		line-height: 1.6;
		font-size: 20px;
		color: #010101;
		padding: 0 10px;
		background-color: #eee;
	}
}


small {
	color: #888;
	text-decoration:none;

	a:link {
		color: #888;
	}

	a:visited {
		color: #888;
	}

	a:hover {
		color: #888;
	}

	a:active {
		color: #888;
	}
}

.container {
  display: flex;
  align-items: center;
  line-height: 1;

  a:link {
		color: #fff;
	}

	a:visited {
		color: #fff;
	}

	a:hover {
		color: #fff;
	}

	a:active {
		color: #fff;
	}
}

hr {
    height: 1px;
    color: #fff;
    background: #fff;
    font-size: 0;
    border: 0;
}

image-with-text {
    /* Set the container to a flex container */
    display: flex; 
    
    /* Stack children (image and text) vertically */
    flex-direction: column; 
    
    /* Center items horizontally within the container */
    align-items: left; 
	
	justify-content: left;
    
    /* Add some spacing between the image and text */
    gap: 20px; 
    

}

.image-with-text img {
    /* Ensure the image is responsive within its container */
	width: 200px;
	height: auto;
}

.caption {
    /* Style the text as small */
    font-size: 0.8em; 
    color: #555;
    
    /* Center the text within the container's width */
    text-align: left; 
    
    /* Remove default margin from the paragraph */
    margin: 10px;

}

.article {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

.articlecontainer {
  display: flex;
  line-height: 1;

  a:link {
		color: #fff;
	}

	a:visited {
		color: #fff;
	}

	a:hover {
		color: #fff;
	}

	a:active {
		color: #fff;
	}
}

hr {
    height: 1px;
    color: #fff;
    background: #fff;
    font-size: 0;
    border: 0;
}