/* Default Element Styling */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  --toolbar-height: 3rem;

  /* Colours */
  --primary: #283464;
  --primary-c0: #283464c0;
  --primary-a0: #283464a0;
  --primary-80: #28346480;
  --primary-40: #28346440;
  --primary-20: #28346420;
  --offset: #f2f2f2;
  --offset-dark: #dddddd;
  --background: white;
  --background-c0: #ffffffc0;
  --background-a0: #ffffffa0;
  --background-80: #ffffff80;
  --background-40: #ffffff40;
  --background-20: #ffffff20;
  --soft-shadow: 1px 1px 4px #cccccc;
  --impact-shadow: 4px 4px 10px #222;
  --impact-shadow-lesser: 4px 4px 10px #22222280;
  --secondary: #709c7d;
  --secondary-c0: #709c7dc0;
  --secondary-a0: #709c7da0;
  --secondary-80: #709c7d80;
  --secondary-40: #709c7d40;
  --secondary-20: #709c7d20;
  --tertiary: #ffa500;
  --tertiary-c0: #ffa500c0;
  --tertiary-a0: #ffa500a0;
  --tertiary-80: #ffa50080;
  --tertiary-40: #ffa50040;
  --tertiary-20: #ffa50020;
  --palette-1: #283464;
  --palette-2: #4c6b80;
  --palette-3: #5e7f8e;
  --palette-4: #709c7d;
  --palette-5: #ffa500;
  --dark: #222222;
  --contrast: #222222;
  --contrast-e0: #222222e0;
  --contrast-c0: #222222c0;
  --contrast-a0: #222222a0;
  --contrast-80: #22222280;
  --contrast-40: #22222240;
  --contrast-20: #22222220;

  --error: darkred;
  --warning: goldenrod;
  --success: darkgreen;
  --info: darkblue;

  /* Z Indices */
  --navbar-z: 100;
  --article-fixed-z: 90;
  --dialog-z: 200;
  --alert-z: 1000;
}

article {
  /*margin-top: var(--toolbar-height);
  min-height: calc(100vh - var(--toolbar-height)); */
   min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

menu {
  padding: 0;
  margin: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  color: var(--contrast);
  font-family: "IBM Plex Sans", sans-serif;
}

label {
  font-family: "IBM Plex Sans", sans-serif;
}

button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

button:disabled {
  cursor: default;
  background-color: gray;
}

button.icon {
  height: 2rem;
  min-width: 2rem;
  border-radius: 1000px;
  border: none;
}

hr {
  width: 100%;
}

row {
  display: flex;
  width: 100%;
  align-items: center;
}

checkbox-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

textarea.long {
  height: 400px;
}

/* Utility Classes */

.wait {
  cursor: wait !important;
  color: var(--contrast);
}

.wait * {
  cursor: wait !important;
}

.nodisplay {
  display: none !important;
}

.flex-fill,
fill {
  flex: 1 1;
}

.snappy {
  transition: unset;
}

.primary {
  color: var(--primary) !important;
}

.secondary {
  color: var(--secondary) !important;
}

.tertiary {
  color: var(--tertiary) !important;
}

.background {
  color: var(--background) !important;
}

.offset {
  color: var(--offset);
}

.offset-dark {
  color: var(--offset-dark);
}

.info {
  color: var(--info) !important;
}

.success {
  color: var(--success) !important;
}

.error,
.exit,
.danger {
  color: var(--error) !important;
}

.warning {
  color: var(--warning) !important;
}

.primary-bg {
  background-color: var(--primary) !important;
  color: var(--background);
}

.secondary-bg {
  background-color: var(--secondary) !important;
  color: var(--background);
}

.tertiary-bg {
  background-color: var(--tertiary) !important;
  color: var(--background);
}

.info-bg {
  background-color: var(--info) !important;
  color: var(--background);
}

.success-bg {
  background-color: var(--success) !important;
  color: var(--background);
}

.error-bg,
.exit-bg,
.danger-bg {
  background-color: var(--error) !important;
  color: var(--background);
}

.warning-bg {
  background-color: var(--warning) !important;
  color: var(--background);
}

.contrast-bg {
  background-color: var(--contrast) !important;
  color: var(--background);
}

span.clickable {
  cursor: pointer;
  font-weight: bold;
  color: var(--primary);
}

.loading-overlay {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff99;
}

.input-pair {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.input-pair > *:first-child {
  text-align: start;
  font-size: 1rem;
  font-weight: bold;
}

.input-pair > *:last-child {
  text-align: end;
  font-size: 1rem;
}

.action-button {
  border: none;
  border-radius: 1000px;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.flex {
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
}

.shadow {
  box-shadow: 0px 0px 15px var(--contrast-40);
}

.navbar {
  height: var(--toolbar-height);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--primary);
  color: var(--background);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 1rem;
  z-index: var(--navbar-z);
  /* box-shadow: 0px -4px 8px #222; */
}

.navbar > button {
  background-color: transparent;
  border: none;
  color: var(--background);
  font-size: 1.25rem;
}

.navbar > button:active {
  scale: 0.9;
}

.navbar > .title {
  font-size: 1.5rem;
  color: var(--background);
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.navbar > .logo-container {
  height: var(--toolbar-height);
  padding: 0.1rem;
}

.navbar > .logo-container > img {
  height: 100%;
  object-fit: contain;
}

.sitepath {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  font-weight: bold;
  color: var(--primary);
}

.sitepath a,
.sitepath a:visited {
  text-decoration: none;
  color: var(--primary);
}

#site-menu {
  position: fixed;
  left: 0;
  top: var(--toolbar-height);
  height: calc(100vh - var(--toolbar-height));
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  width: min(500px, 95vw);
  z-index: calc(var(--navbar-z) - 1);
  box-shadow: var(--soft-shadow);
  transition: all 250ms ease;
  opacity: 0;
  pointer-events: none;
  padding-top: 0.5rem;
  font-size: 1rem;
  overflow: auto;
}

#site-menu h2 {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: var(--primary);
  font-weight: bold;
  text-transform: uppercase;
}

#site-menu.active {
  opacity: 1;
  pointer-events: all;
}

#site-menu .separator {
  width: calc(100% - 2rem);
  height: 1px;
  border-bottom: 1px solid var(--offset-dark);
  align-self: center;
  margin: 0.5rem;
}

#site-menu a {
  padding: 1rem;
  width: 100%;
  text-decoration: none;
  font-weight: bold;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 100ms ease;
}

#site-menu a:hover {
  color: var(--primary);
}

#site-menu a i {
  color: var(--primary);
  min-width: 1rem;
}

#site-menu .footer {
  font-size: 0.75rem;
  font-style: italic;
  color: gray;
  padding: 0.5rem;
}

#close-site-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: calc(min(500px, 95vw) - 2rem);
  top: var(--toolbar-height);
  font-size: 1rem;
  padding: 0.5rem;
  border: none;
  background-color: var(--background);
  color: var(--contrast);
  width: 2rem;
  height: 2rem;
}

.page-title {
  margin-top: var(--toolbar-height);
  padding: 1rem 2rem 1rem 2rem;
  font-size: 3rem;
}