:root {
  --base: #362c2c;
  --base-dark: hsl(0, 12%, 15%);
  --base-light: hsl(0, 12%, 31%);
  --primary: #a4c639;
  --brightest: #f0eee0;
  --pad: 25px;
} 
@font-face {
  font-family: 'HeavyData';
  src: url('HeavyDataNerdFont-Regular.ttf') format('TrueType');
  /* font-weight: normal;  */
}

@font-face {
  font-family: 'BigBlue';
  src: url("BigBlueTerm437NerdFont-Regular.ttf") format('TrueType');
}

h1, h2, h3, h4, h5 {
  color: var(--base);
  font-family: "BigBlue", "Verdana", sans-serif;
}

h1 {
  font-family: "HeavyData";
}

b, strong {
  color: var(--base-dark);
}

a {
  color: var(--base-light);
}

html {
  color: var(--base);
  font-family: "Open Sans", serif;
  font-size: 1.2em;
  /* display: flex;
  flex-direction: row;
  justify-content: center; */
  background-color: var(--brightest);
}

body {
  margin: var(--pad);
}

.site-title {
  font-size: 1.5em;
  margin-bottom: 0px;
  margin-top: 0px;
  /* text-align: center; */
}

.nav-wrapper {
  background-color: var(--base);
  margin: calc(var(--pad) * -1);
  margin-bottom: 20px;
  /* display: flex;
  flex-direction: row;
  justify-content: center; */
  /* width: 100%; */
}
.mx-auto {
  margin-inline: auto;
  max-width: 770px;
}
.nav-main {
  padding: var(--pad);
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  font-size: 1.2em;
  gap: var(--pad);
  color: var(--brightest);
  h1, a {
    color: var(--brightest);
  }
  
}

.block {
  border: 1px dotted white;
  padding: 5px 15px;
  margin: 0 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.block h1 {
  font-size: 1em;
  text-align: center;
  margin-bottom: 0;
}

.small {
  font-size: 0.8em;
}

.wave {
  background: #111;
  color: #fff;
  text-shadow: 1px 1px 10px #fff, 1px 1px 10px #ccc;
}

footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer hr {
  width: 100%;
}