/* Minimal CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-size: 100%;
  font: inherit;
}

/* Remove list styles */
ol, ul {
  list-style: none;
}

/* Remove quotes for blockquote and q */
blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

html {
  background: linear-gradient(rgba(251, 220, 220, 0.15), rgba(251, 220, 220, 0.15)),
              url("/cinnamonbird_cairoovercoat_roxy2alt.png");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}

body {
  margin: 0;
  font-family: monospace;
  /* No background here or transparent */
  background: transparent;
  line-height: 1;
  padding: calc(1em + env(safe-area-inset-top)); /* push content down away from notch */
}

.wrapper {
  max-width: 95%;
  margin: 15px auto 0;
  background: none;
}

.header {
  width: 100%; /* full viewport width */
  box-sizing: border-box; /* ensures padding doesn't add to width */
  border: 3px double #333;
  background: linear-gradient(rgba(251, 220, 220, 0.75), rgba(251, 220, 220, 0.75));
  text-align: center;
  /* padding: 1em 0;*/
  margin: 0 auto 20px auto; /* centers the header */
  padding-top: 2em;
  padding-bottom: 2em;
}

.wrapper-2.columns {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* space between columns */
}

/* Sidebars fixed width */
.sidebar-left,
.sidebar-right {
  flex: 0 0 300px;
  /*background: #f9f9f9;*/
}

/* Main fills remaining space */
.main {
  flex: 1;
  max-height: 600px;
  overflow-y: auto;
  /*background: #fff;
  /*margin: 0 10px;*/ 
}

/* Box styles */
.box {
  border: 3px double #333;
  background: #fff;
  padding: 0;
  margin-bottom: 20px;
}

.box h1,
.box h2,
.box h3,
.box h4 {
  background: #facbd8;
  margin: 0;
  padding: 0.35em 0.25em 0.3em 0.25em;
  text-align: center;
  border-bottom: 3px double #333;
}

.inner {
  padding: 0.25em 1em 0.3em 1em;
  font-size: 1.075em;
}

.footer {
  height: 0;
}

/* Responsive adjustments */
@media (max-width: 880px) {
  .wrapper {
    max-width: 90vw;
    margin: 15px auto 0;
    padding: 0 10px;
  }
  .wrapper-2.columns {
    display: flex;
  }
  .sidebar-left,
  .sidebar-right {
    flex: 0 0 160px;
    margin-bottom: 1em;
  }
  .main {
    flex: 1;
    margin: 0 10px;
  }
}



@media (orientation: portrait) {
  .wrapper-2.columns {
    flex-direction: column;
    gap: 1rem;
  }
  .sidebar-left,
  .main,
  .sidebar-right {
    flex: none;
    width: 100%;
    margin: 0;
  }
  .html, body {
    padding-top: 20px;
  }
}