:root {
  --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* --body-font-family: var(--font-sans-serif); */
  --body-font-family: "Courier New", Courier, monospace;
  --body-font-size: 1rem;
  --body-font-weight: 500;
  --body-line-height: 1.5;
  --body-color: #fff;
  --body-color-rgb: 255, 255, 255;
  --body-bg: #fff;
  --body-bg-rgb: 255, 255, 255;
  --link-color: #fff;
  --link-color-rgb: 255, 255, 255;
  --link-hover-color: #aaaaaa;
  --link-hover-color-rgb: 170, 170, 170;
  --link-decoration: none;
  --heading-color: inherit;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  background-color: var(--body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1,
.h1,
h4,
.h4 {
  margin: 0;
  padding: 0;
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--heading-color);
}

h1,
.h1 {
  font-weight: 700;
  font-size: calc(1.25rem + 3vw);
}

h4,
.h4 {
  font-size: calc(0.75rem + 1vw);
}

p {
  margin: 0;
  padding: 0;
}

a {
  color: rgba(var(--link-color-rgb), var(--link-opacity, 1));
  text-decoration: var(--link-decoration);
}
a:hover {
  --link-color-rgb: var(--link-hover-color-rgb);
  text-decoration: underline;
}

.app {
  min-height: 100vh;
  height: 100%;
  width: 100%;
  background-image: url("../../static/img/background.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
}

.container {
  position: relative;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
  padding: 1.25rem 1.5rem;
}

.header {
  width: 100%;
  text-align: left;
}

.main {
  width: 100%;
  text-align: center;
}

.border-bottom::after {
  content: "";
  display: block;
  margin: 0 auto calc(0.25rem + 1vw);
  padding: 0;
  color: inherit;
  border: 0;
  border-bottom: calc(0.25rem + 0.5vw) solid;
  opacity: 0.25;
  min-width: 5rem;
  width: 20%;
}

.footer {
  width: 100%;
  text-align: right;
}