@font-face {
  font-family: "Quattro";
  src:
    local("Quattro"),
    url("Quattro.ttf"),

}

body, html {
margin-left:3%;
margin-right:3%;
margin-bottom:1%;
margin-top:1%;
    max-width: 800px
}

/* Added Gallery */

.image-grid body {
	margin: 0;
    
}

.image-grid {
	--gap: 20px;
	--num-cols: 4;
	

	box-sizing: border-box;
	padding: 0px 0px;
	display: grid;
    justify-self: start;
clear: right

	grid-template-columns: repeat(var(--num-cols), 1fr);
	grid-auto-rows: var(--row-height);
	gap: var(--gap);
}

.image-grid>img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-grid-col-2 {
	grid-column: span 2;
}

.image-grid-row-2 {
	grid-row: span 2;
}

/* Anything udner 1024px */
@media screen and (max-width: 1024px) {
	.image-grid {
		--num-cols: 2;
	}
}



/* Gallery End */








body {
	background-color: #fff;
	color: #000;
    font-size: 1rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Quattro",
	font-style: normal;
	line-height: 1.4;
}
a { text-decoration: none; color:black; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }


a.gray { text-decoration: none; color:gray; }
a.gray:visited { text-decoration: none; }
a.gray:hover { text-decoration: none; }
a.gray:focus { text-decoration: none; }
a.gray:hover, a:active { text-decoration: none; }


.page a.active {
	color: #ff4a00;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 2.5em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(0, 0, 0, 1);
	border: 0;
	height: 1px;
	display: block;
}


}