@font-face {
    font-family: OverpassNerd;
    src: url("/assets/fonts/overpass/OverpassNerdFont-Regular.otf") format("opentype");
}
:root {
  --main-bg-color: #111317;
  --main-fg-color: #d7afaf;
  --theme-white: #e4e4e4;
  --secondary-bg-color: color-mix(in srgb, var(--main-bg-color) 35%, var(--main-fg-color) 65%);
}

body {
  background-color: rgba(from var(--main-bg-color) r g b / 1);
}

h1,h2,h3 {
  text-align: center;
}
h1,h2,h3,p,a {
  font-family: 'OverpassNerd', sans-serif;
  color: rgba(from var(--main-fg-color) r g b / 1);
}

.body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap-reverse;
/*  max-width: 80vmax;
  margin: auto;*/
  gap: 2vw;
}
.sidebar {
  min-width: 30%;
  max-width: 400px;
  flex-grow: 1;
/*  background-color: rgba(255,0,0,0.3);*/
}
.content {
/*  background-color: rgba(0,255,0,0.3);*/
  max-width: 60vmax;
}

#buttons {
  img {
    display: block;
    margin: auto;
/*    width: 60%;*/
    width: 12em;
    aspect-ratio: 88 / 31;
  }
  h1 {
    border-top: 1px dashed;
    padding-top: 1vh;
  }
  h2 {
/*    line-height: 0.25;*/
    border-top: 1px dotted;
    padding-top: 1vh;
  }
  p {
    text-align: center;
    font-size: 1.1em;
  }
}
#rats {
  img {
    display: block;
    margin: auto;
    width: 90%;
  }
}

img {
  width: 10vmax;
}
.markdown-module {
  padding: 1vmax 2vmax;
  margin: 1vmax 0;
  background-color: rgba(from var(--secondary-bg-color) r g b / 0.2);
  border-radius: 8px;
}