body {
	background-color: #f4cccc;
}

h1{
			font-family:"Lora", Garamond, serif;
		color:Black;
		font-variant:small-caps;
}

h2{
		font-family:"Lora", Garamond, serif;
		color:Black;
		font-variant:small-caps;
}
h3 {
	color: #545454;
	text-align: left;
	font-variant:small-caps;
	margin-top:3%;
}

h4{
		font-family:"Lora", Garamond, serif;
		color:#545454;
}
p {
	font-family: "Courier New", Verdana, sans-serif;
}

.name {
	max-width: 50%;
	margin-left: 25%;
	margin-right: 25%;
}

ul {
	list-style-type: none;
	margin:0;
	padding: 0;
	overflow: hidden;
	background-color: #f4cccc;
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;

}

li {
	font-family:"Lora", Garamond, serif;
		border-left: 1px solid #545454;
}


li a {
	display: block;
	color:#545454;
	text-align: center;
	padding: 8px 16px;
	text-decoration: none;



}




/*hover action*/

li a:hover {
	background-color: #545454;
	color: white;

}


/*current tab*/
.active {
	background-color: #f4cccc;
	color: #545454;
}

#columnA {
	margin-left:3%;
	margin-top:3%;	
	text-align: Left;
	flex:50%;
	max-width: 50%;
	align-items: left;
	float: left;

}

#columnB {
	flex:45%;
	align-items: right;
	text-align: left;
	max-width: 45%;

	margin-left:auto;
	margin-bottom:3%;

}

.toosmall {
	margin-bottom: 30%;
}



table, th, td {
	border:5px solid #f4cccc;
	border-collapse: collapse;
	border-radius: 10px;
	text-align: left;
	color: #545454;
}



/*.gallery {
	float: left;
	flex:25%;
	max-width: 25%;
}

@media screen and (max-width: 800px) {
  .gallery {
    flex: 50%;
    max-width: 50%;
  }
}*/


.gallery {
	display:flex;
	flex-wrap: wrap;
	padding:0px 4px;
}


.column {
	flex:23;
	max-width: 23%;
	padding: 0px 4px;
}

.column img {
	margin-top:8px;
	vertical-align: middle;
	width:100%;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 48%;
    max-width: 48%;
  }

 @media screen and (max-width: 400px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }