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

@font-face {
  font-family: 'MootJungle'; /
  src: url('https://ofnature.neocities.org/fonts/Mootjunglefreeversion-Regular.ttf') format('truetype'), /* Path downloaded font file */
       url('https://ofnature.neocities.org/fonts/Mootjunglefreeversion-Regular.woff2') format('woff');    /* Fallback format */
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #C4A77D;
  color: #2F2963;
  font-family: Verdana, sans-serif;
  margin: 0;
  
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Padding offset to keep content inside the 10px outer green border */
  padding: 10px;
}

/* Outer fixed frame */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid #228B22;
  pointer-events: none;
  z-index: 9999;
}

/* Banner container styling */
.banner-container {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 20px;
}

/* Site banner image */
.site-banner {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
  height: auto;
}
/* Columns */
.column {
  flex: 1;
  padding: 20px;
}

/* Inner Frame (leave untouched) */
.inner-frame {
    flex: 1;
    display: flex;
    border: 4px solid #2F2963;
    width: 100%;
}

/* Main Frame */
.main-frame {
    flex: 1;             /* Stretches main-frame across the flex row */
    text-align: center;  /* Centers all text inside main-frame */
}

.main-frame h1,
.main-frame p {
    display: block;
}

/* Main Frame */

.main-frame {
    text-align: center;
}

.main-frame h1,
.main-frame p {
    display: block;
}

/* Footer Styling */
.site-footer {
  width: 100%;
  margin-top: -4px; /* Pulls footer up so top border overlaps inner-frame bottom border */
  padding: 15px;
  text-align: center;
  border: 4px solid #2F2963;
  font-size: 0.85rem;
  color: #2F2963;
}

.site-footer p {
  margin: 0;
}