html, body {
    font-family: "EB Garamond", Garamond, serif;
}
h1, h2, h3, h4, h5, h6, p {
  margin-top: 0;
  margin-bottom: 0; /* or any other value */
}
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-content {
  background: white;
  padding: 40px;
  border-radius: 8px;
  display: flex;          
  flex-direction: column; 
  align-items: center;   
  justify-content: center;
  text-align: center;
}
#redbutton {
	background-color: #FF0000;
    cursor:pointer;
}
#greenbutton {
	background-color: #00FF00;
    cursor:pointer;
}
.page {
	height: 100vh;
}
.about {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	padding: 20px;
    height: 50vh;
	/*height: 40vh;*/
}
.about-col-left {
    height: 50vh;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: flex-start;
	padding: 30px;
	width: 70vw;
}
.about-col-right {
    max-height: 50vh;
    width: 30vw;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}
#about-image img{
    max-width: 100%;
    max-height: 50vh;
    width: auto;
    height: auto;
    display: block;
}
.categories {
    display: flex;
    justify-content: space-evenly;
/*height*/
}
.leftcats{
    width: 50vw;
    max-width: 100%;
    padding: 20px;
    flex-direction: column;
    justify-content: start;
}
.rightcats{
    width: 50vw;
    max-width: 100%;
    padding: 20px;
    flex-direction: column;
    justify-content: start;
}
.cats{
    display: flex;
    justify-content: start;
    align-items: start;

    color:#000000;
    text-decoration: none;
}
#cat1{
    max-height: 100%;
    max-width: 100%;
    padding: 8px 16px;
    margin: 5% 2%;
}
#cat1 img{
    max-width: 20%;
    height: auto;
    display: block;
    margin: 0 1% 0 0;
}
#cat2{
    max-height: 100%;
    max-width: 100%;
    padding: 8px 16px;
    margin: 5% 2%;
}
#cat2 img{
    max-width: 20%;
    height: auto;
    display: block;
    margin: 0 1% 0 0;
}
#cat3{
    max-height: 100%;
    max-width: 100%;
    padding: 8px 16px;
    margin: 5% 2%;
}
#cat3 img{
    max-width: 20%;
    max-height: 100%;
    display: block;
    margin: 0 1% 0 0;
}
#cat4{
    max-height: 100%;
    max-width: 100%;
    padding: 8px 16px;
    margin: 5% 2%;
}
#cat4 img{
    max-width: 20%;
    height: auto;
    display: block;
    margin: 0 1% 0 0;
}
#cat5{
    max-height: 100%;
    max-width: 100%;
    padding: 8px 16px;
    margin: 5% 2%;
}
#cat5 img{
    max-width: 20%;
    height: auto;
    display: block;
    margin: 0 1% 0 0;
}
#cat6{
    max-height: 100%;
    max-width: 100%;
    padding: 8px 16px;
    margin: 5% 2%;
}
#cat6 img{
    max-width: 20%;
    height: auto;
    display: block;
    margin: 0 1% 0 0;
}
#cat7{
    max-height: 100%;
    max-width: 100%;
    padding: 8px 16px;
    margin: 5% 2%;
}
#cat7 img{
    max-width: 20%;
    height: auto;
    display: block;
    margin: 0 1% 0 0;
}
.cattext{
    display: flex;
    flex-direction: column;
    justify-content: start;
    max-height: 80%;
}