:root {
  --primary-color: #003366; /* main navy blue */
  --primary-color-light: #e6ecf5;
  --secondary-color: #ff9900; /* complimentary orange */
  --secondary-color-dark: #cc7a00;
  --text-main: #000;
  --text-muted: #555;
  --bg-main: white;
  --border: #ccc;
  --font-body: Verdana, Arial, Helvetica, sans-serif;
}

@import url("/assets/utilities-973d564c.css");
@import url("/assets/buttons-f039fadb.css");
@import url("/assets/tables-bcc64909.css");
@import url("/assets/forms-7977beb5.css");
@import url("/assets/images-34aedcb9.css");

:where(lexxy-editor) {
  &[attachments="false"] button[name="upload"] {
    display: none;
  }
}

body {
  max-width: 760px; /* fixed classic width */
  color: var(--text-main); background: var(--bg-main) url('https://www.transparenttextures.com/patterns/climpek.png');
  margin: 0 auto; padding: 0;
  font-family: var(--font-body); font-size: 13px;
}

header {
  background-color: var(--primary-color);
  color: #fff;
  text-align: center;
  & #hero {
    #appname { font-size: 20px; font-weight: bold; margin: 0; }
    padding: var(--size-2);
  }
}

footer {
  background-color: var(--primary-color-light);
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-align: center;
  padding: var(--size-2);
}

h1 {
  font-size: 20px;
  margin-top: 0;
  color: var(--primary-color);
}

h2 {
  font-size: 16px;
  margin-top: 0;
  color: var(--primary-color);
}

h3 {
  font-size: 12px;
  margin-top: 0;
  color: var(--primary-color);
}

p {
  line-height: 1.4;
}

a {
  color: var(--primary-color);
  text-decoration: underline;
  &:hover {
    color: var(--secondary-color-dark);
  }
}

nav#main-nav {
  padding: var(--size-2);
  text-align: center;
  background: var(--primary-color-light);
  color: var(--primary-color);
  border: 1px solid var(--border);
  border-bottom: unset;

  a {
    margin: 0 8px;
    font-weight: bold;
  }
}

ul {
  padding-inline-start: 25px;
  li:not(:last-child) {
    margin-bottom: var(--size-2);
  }

}

#demo-notice {
  background-color: var(--secondary-color); color: white;
  p { margin: unset; }
}

#container, #extension {
  border: 1px solid var(--border);
}

#sidebar, #topbar {
  background: var(--primary-color-light);
  background: white;
  border: 1px solid var(--border);
}

#sidebar {
  display: none;
  border-top: unset; border-left: unset; border-bottom: unset;
}

#topbar {
  display: flex;
  padding: var(--size-2);
  /*justify-content: space-evenly;*/
  border-bottom: unset;

  a {
    margin: 0 8px;
    font-weight: bold;
  }
}

@media screen and (min-width: 480px) {
  #sidebar { display: block; }
  #topbar { display: none; }
}

#content, #extension {
  background: var(--bg-main);
  padding: 20px;
}

#extension {
  width: 300px;
}