@font-face {
	font-family: 'Maple Mono';
	src: url('/font/maplemono-regular.woff2') format('woff2');
	font-weight: 400;
  	font-style: normal;
   	font-display: swap;
}

* {
    font-family: 'Maple Mono', monospace;
}

:root {
    /* colour palette */
    --beige: #e3e7d3;
    --silver: #6c706e;
    --battleship-gray: #989c94;
    --black-olive: #25291c;
    --vanilla: #e6e49f;
}

html {
    min-height: 100vh;
    background: var(--battleship-gray);
    max-width: 600px;
    margin: 0 auto;

    background-image:
        radial-gradient(var(--silver) 1px, transparent 0);
    background-size:
        3px 3px;
    background-position:
        -19px -19px;
}

hr {
    border: solid 1px var(--silver);
    margin: 15px 0;
}

img {
    width: 100%;
}

img[src="/images/donate/xmr.png"] {
	width: 200px;
}

h1, h2, h3, h4, p, ul {
    margin: 0px 0px 15px 0;
}


h1 {
    padding-bottom: 10px;
    text-shadow:
        1px 1px 0px var(--silver),
        1.5px 1.5px 0px var(--silver),
        2px 2px 0px var(--silver),
        3.5px 3.5px 0px var(--silver),
        2.5px 2.5px 0px var(--silver),
        4px 4px 0px var(--silver),
        3px 3px 0px var(--silver);

    border-bottom: 2px solid var(--silver);
}

#content {
    background: var(--battleship-gray);
    color: var(--black-olive);
    padding: 15px;
    border: 2px solid var(--silver);
        box-shadow:
        1px 1px 0px var(--silver),
        1.5px 1.5px 0px var(--silver),
        2px 2px 0px var(--silver),
        3.5px 3.5px 0px var(--silver),
        2.5px 2.5px 0px var(--silver),
        4px 4px 0px var(--silver),
        3px 3px 0px var(--silver);
    border-radius: 20px 5px;
    overflow-wrap: break-word;
}

a {
    color: var(--black-olive);
}

a:hover {
    background: var(--black-olive);
    color: var(--battleship-gray);
    border-radius: 8px 0px;
}

header {
    background: url("/images/header.png");
    background-position: center;
    background-size: cover;
    color: var(--black-olive);
    padding: 15px;
    margin-bottom: 15px;
    border: 2px solid var(--silver);
        box-shadow:
        1px 1px 0px var(--silver),
        1.5px 1.5px 0px var(--silver),
        2px 2px 0px var(--silver),
        3.5px 3.5px 0px var(--silver),
        2.5px 2.5px 0px var(--silver),
        4px 4px 0px var(--silver),
        3px 3px 0px var(--silver);
    border-radius: 20px 5px;
}

header h1 {
    display: block;
    border: none;
    margin: 15px 0px 0px 0px;
}

header h1 a {
    text-decoration: none !important;
    padding: 0px 5px 5px 0px;
    border-radius: 15px 0px;
}

header h1 a:hover {
    background: rgba(38, 42, 29, 0.8);
}

nav {
    color: var(--battleship-gray) !important;
    background: var(--battleship-gray);
    border: 2px solid var(--silver);
    padding: 5px 12px;
    border-radius: 15px 5px;
}

nav a {
    margin-right: 4px;
}

footer {
    margin-top: 10px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}