@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Patua+One&family=Raleway&family=Roboto&display=swap');

* {
	box-sizing: border-box;
	font-family: Roboto;
}

.main-title {
	font-family: Gloria Hallelujah;
	color: white;
	padding-top: 40px;
	padding-bottom: 20px;
}

.nav {
	background-color:rgba(0, 0, 0, 0.4);
	padding-left:70px;
	padding-top:5px;
	padding-bottom: 5px
}
.nav a{
	color: white;
	transition: color 200ms ease-in-out; 
	padding: 0 20px;
}
	.nav a:hover {
		color: #849974; 
		text-decoration: none;
	}

.main-header{
	background-color: rgba(255, 251, 255, 0.6);
	background-image: url("../images/background.jpg");
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
}

.section-title{
	font-family: Patua One;
}

.index-main {
	padding-right: 30px;
}

.index-sidebar {
	padding-top: 10px;
	padding-left: 75px;
	font-size: 0.8em;
}

.article-card{
	text-align: center;
	vertical-align: middle;
}

	.article-card:hover .article-image{
		opacity: 0.5;
	}

.article-image {
	opacity: 1;
	display: block;
	width: 100%;
	height: auto;
	transition: .5s ease;
	backface-visibility: hidden;
}

.article-card-box {
	position: absolute;
	top: 80%;
  	left: 50%;
  	width: 100%;
  	transform: translate(-50%, -50%);
  	text-align: center;
	padding-bottom: 1px;
	padding-top: 5px;
	background-color: rgba(255,251,255,0.65);
}

	.article-card-box a {
	color: black;
	transition: color 200ms ease-in-out; 
	}

	.article-card-box a:hover {
		color: rgba(0,0,0,0.65); 
		text-decoration: none;
	}

.image-caption {
	text-align:center;
	font-style: italic;
	padding-bottom: 10px;
}

	.image-caption .src {
		font-size: 0.7vw;
		padding: 0px;
		margin:0px;
	}

	.image-caption .text {
		font-size: 1vw;
		padding: 0px;
		margin:0px;
	}

body {
	background-color: rgba(255, 251, 255);
}