* {
  box-sizing: border-box;
}
/* :root {
  --bg-color: #77ACA2;
  --topbar-color: #083E5E;
  --main-color: #F4E9CD;
  --subbar-color: #468189;
  --button-color: #0B5783;
} */
:root {
  --content-width: 900px;
  --bg-color: #E0DFD5;
  --text-color: #E0DFD5;
  --topbar-color: #39494F;
  --topbar-color: #1D4350;
  --topbar-color: #034B65;
  /* --topbar-color: #004057; */
  --main-color: #39494F;
  --main-color: #31474F;
  --main-color: #2A4650;
  --main-color: #1D4350;
  --main-color: #164657;
  --main-color: #034B65;
  /* --main-color: #004057; */
  --divider-inner-color: #E8E9EB;
  --divider-bg-color: #E0DFD5;
  --subbar-color: #F09D51;
  --button-color: #C2543E;
  --button-hilite-color: #F06543;
  --button-active-color: #E38E64;
  --button-active-color: #F09D51;
  --subbutton-color: #F7CBA1;
  --subbutton-color: #C2543E;
  --subbutton-hilite-color: #B88261;
  --subbutton-active-color: #D96830;
  /* --button-active-color: #B88261; */
  /* --subbutton-active-color: #E0DFD5; */
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--bg-color);
}

.topbar {
  max-width: var(--content-width);
  margin: auto;
  background: var(--topbar-color);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  gap: 10px;
}

.subbar {
  max-width: var(--content-width);
  margin: auto;
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--subbar-color);
  align-items: center;
  justify-content: center;
}

.divider {
  max-width: var(--content-width);
  margin: auto;
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--divider-inner-color);
  align-items: center;
  justify-content: center;
}


.subbar.hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

.logo {
  display: flex;
  right: calc(50% + 250px); 
  font-size: 24px;
  font-weight: bold;
  min-width: 150px;
  color: white;
}

/* BUTTON AREA */

.nav-buttons {
  flex: 0;
  gap: 10px;
  display: flex;
  /* justify-content: center; */
  gap: 10px;
}

#subNav {
  display: flex;
  justify-content: center;
  gap: 7px;
}

/* BUTTONS */

.nav-btn,
.wp-block-button__link {
  background: var(--button-color);
  color: white;

  border: none;
  border-radius: 8px;

  padding: 8px 26px;

  cursor: pointer;

  transition: 0.2s;
}

.nav-btn:hover,
.wp-block-button__link.nav-btn:hover {
  background: var(--button-hilite-color);
}

/* PRESSED/ACTIVE STATE */

.nav-btn.active,
.wp-block-button__link.nav-btn.active {
  background: var(--button-active-color);
  transform: translateY(0px);
}

/* SUBNAV BUTTONS */
.subnav-btn,
.wp-block-button__link {
  background: var(--subbutton-color);
  color: white;

  border: none;
  border-radius: 8px;

  padding: 6px 18px;

  cursor: pointer;

  transition: 0.2s;
}

.subnav-btn:hover,
.wp-block-button__link.subnav-btn:hover {
  background: var(--subbutton-hilite-color);
}

/* PRESSED/ACTIVE STATE */

.subnav-btn.active,
.wp-block-button__link.subnav-btn.active {
  background: var(--subbutton-active-color);
  transform: translateY(0px);
}

/* CONTENT */

main {
  padding: 40px;
  max-width: var(--content-width);
  margin: auto;
  color: var(--text-color);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.00) 60px
    /* rgba(0,0,0,0.1) 0px,
    rgba(0,0,0,0.00) 20px */
  ),
 var(--main-color);
  min-height: calc(100vh - 70px);
}