
<style>

    a{text-decoration:none}
    a:hover {
        text-decoration:none;
        color:#FF0000;
    }
	img {
		display: block;
		margin: auto;
		max-width: 100%;
		-webkit-box-shadow: 4px 4px 4px #d0dbe7;
    	box-shadow: 4px 4px 4px gray;
	}
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.caption {
		font-size: smaller;
		font-style: italic;
		font-weight: bold;
		margin-top: 1rem;
		text-align: center;
	}
    h1 {
        text-align: center;
        font-style: italic;
        color: #25316d;
    }
    h2 {
        color: #d0dbe7;
		background-color: #25316d;
        font-style: italic;
		margin-bottom: 2px;
		margin-top: 2px;
		text-align: center;
    }
    h3 {
		background-color: #25316d;
        color: #d0dbe7;
        font-style: italic;
		margin-top: 2px;
		text-align: center;
    }
	.flex {
		display: inline-flex;
		flex-wrap: wrap;
	}
	.flex > li {
		min-width: 200px;
		padding-bottom: 1rem;
	}
	@media only screen and (max-width: 416px) {
		.flex {
			justify-content: space-between;
		}
		.flex > li {
			min-width: inherit;
			width: 100%;
		}
	}
	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, 200px);
		justify-content: space-between;
	}
	@media only screen and (max-width: 416px) {
		.grid {
			grid-template-columns: repeat(auto-fill, 100%);
		}
	}
	.grid > li {
		padding-bottom: 1rem;
	}
    .red {
        color: red;
    }
    .small {
        font-size: small;
    }
    </style>