* {
  padding: 0;
  margin: 0;
  --navh: 56px;
}

html {
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: var(--site-bg-color);
}

body {
  width: 100%;
  height: 100%;
  font-family: "texgyreadventor";
  background-color: var(--site-bg-color);
  color: black;
}

/*-----------------------
  NAVBAR
-----------------------*/

.navbar {
  /* background-color: rgba(var(--pumpkin-rgb), 1.0); */
  color: var(--isabelline);
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  height: var(--navh);
  white-space: nowrap;
}

.navbar-bg {
  background-color: var(--bs-primary-dark);
  --navbar-bg: var(--bs-primary-dark);
}

.navbar-bg#navbar-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.navbar-end {
  height: var(--navh);
  padding-right: 1em;
}

.portrait .navbar-end {
  padding-right: 0;
}

.navbar .logo{
  position: relative;
  z-index: 2;
}
@media (hover: hover) {
.navbar .logo:hover{
  filter: brightness(1.3);
  background-color: color-mix(in srgb, var(--navbar-bg), white 8%);
}
}

.navbar a {
  text-decoration: none;
  color: var(--isabelline);
}

.navbar ul, .navbar li {
  margin: 0;
}

.navbar ul {
  list-style-type: none;
}

.navbar li a {
  display: inline-block;
}

.portrait .navbar li a {
  width: calc(100% - 2rem);
}

.navbar li a.active,
.navbar .submenu a.active {
  text-decoration: underline;
}

.navbar li a:hover {
  background-color: color-mix(in srgb, var(--navbar-bg), white 8%);
  filter: brightness(1.3);
}

.navbar-toggler {
  margin: 0;
  height: auto;
  width: var(--navh);
  border: 0;
  font-size: 2rem;
  color: var(--isabelline);
  background-color: transparent;
  display: none;
  border-radius: 0;
  position: relative;
  z-index: 2;
}

@media (hover: hover) {
.portrait .navbar-toggler:hover{
  background-color: color-mix(in srgb, var(--navbar-bg), white 8%);
  filter: brightness(1.3);
}
}
.portrait .navbar-toggler{
  display: inherit;
  align-items: center;
  justify-content: center;
}

.landscape .navbar-toggler {
  display: none;
}

.portrait .navbar-items {
  position: fixed;
  z-index: -2;
  flex-direction: column;
  /* max-height: 50vh; */
  height: fit-content;
  background-color: color-mix(in srgb, var(--navbar-bg), white 4%);
  width: 100%;
  /* top: -100%; */
  /* bottom: 100%; */
  left: 0;
  top: -110%;
  transition: top 0.3s ease 0s;
}

.landscape .navbar-items {
  z-index: 2;
}

.portrait .submenu {
  display: none;
}

.portrait .active~.submenu,
.portrait .submenu:has(> a.active) {
  display: flex;
  flex-direction: column;
}

.landscape .submenu {
  position: fixed;
  top: var(--navh);
  display: none;
}

.submenu {
  background-color: color-mix(in srgb, var(--bs-primary-dark), white 10%);
  color: black;
  display: none;
  font-size: .8em
}

.landscape .navbar li a:hover~.submenu {
  display: flex;
}

.landscape .navbar-items li:last-child .submenu {
  right: 1em;
}

.submenu:hover {
  display: flex;
}


/*-----------------------------------------
  SUPPORT ICON
-----------------------------------------*/

.support{
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 3;
}

.support h3{
  font-size: 2em;
}

.support h2{
  font-family: texgyreadventor;
}

.support_icon, .support_popup {
  z-index: 2;
}

.bi-support-icon:hover {
  color: color-mix(in srgb, var(--bs-primary-dark), white 10%);
  cursor: pointer;
}

.bi-support-icon {
  font-size: 3em;
  color: var(--bs-primary-dark);
  opacity: 0.9;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 0 0 2pt var(--isabelline);
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  right: 2pt;
  bottom: 2pt;
}

.support_popup {
  background-color: var(--isabelline);
  color: #222;
  border-radius: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 0.5em;
  position: fixed;
  right: -100%;
  bottom: 1em;
  transition: right 0.3s ease 0s;
  border: 1pt solid #333;
  box-shadow: 2pt 2pt 4pt #333333aa;
}

.slide_out{
  right: 1em;
}


/*-----------------------------------------
  BUTTONS
-----------------------------------------*/

.flat-button {
  display: inline-block;
  background-color: var(--bs-primary);
  color: var(--isabelline);
  text-decoration: none;
  border: 1px solid var(--apricot);
  border-radius: 4px;
  transition: background-color 0.3s ease;
  text-align: center;
  padding: 0.25rem 3rem;
  font-size: 1.5rem;
  height: auto;
}

.flat-button:hover {
  filter: brightness(1.3);
  border: 1px solid var(--apricot);
  color: var(--isabelline);
  cursor: pointer;
}

.flat-button:focus {
  filter: brightness(0.8);
  box-shadow:0 0 0 .25rem rgba(var(--pumpkin-rgb),.5);
  border: 1px solid var(--apricot);
  color: var(--isabelline);
}

button {
  display: inline-block;
  color: var(--isabelline);
  text-decoration: none;
  border: 0;
  padding: 0;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  text-align: center;
}

@media (hover: hover) {
  button:hover:not(.disabled) {
    filter: brightness(1.3);
    color: var(--isabelline);
  }
}

button:focus {
  filter: brightness(0.7);
  border: 0;
  color: var(--isabelline);
}

/*-----------------------
  UTILITY
-----------------------*/

.transparent {
  background: transparent;
}

.nav-safe-content {
  height: calc(100vh - var(--navh) - (var(--navh) / 2));
  margin: calc(var(--navh) / 2);
  margin-top: var(--navh);
}

.s-section {
  /* height: var(--maxh); */
  width: 100%;
  justify-content: start !important;
}

.col {
  flex-direction: column;
}

.d-flex {
  display: flex;
}

.spaced {
  justify-content: space-between !important;
}

.container {
  min-width: 90vw !important;
}

.hide {
  display: none !important;
}

.hidden {
  visibility: hidden;
}

.centered {
  align-items: center;
  text-align: center;
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.mx {
  margin-left: 1rem;
  margin-right: 1rem;
}

.my {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mb {
  margin-bottom: 1rem;
}

.mt {
  margin-top: 1rem;
}

.mb2 {
  margin-bottom: 2rem;
}

.px {
  padding-right: 1rem;
  padding-left: 1rem;
}

.py {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-nav {
  padding-top: var(--navh);
  padding-bottom: var(--navh);
}

.py2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.f1 {
  flex: 1;
}

.expand {
  width: 100%;
  height: 100%;
}

.h100 {
  height: 100%;
}

.hide-overflow{
  overflow: hidden;
}

.disabled {
  filter: saturate(85%);
  cursor: not-allowed;
}

/*-----------------------------------------
  FONTS
-----------------------------------------*/

@font-face {
  font-family: "Samarata";
  src: url("../fonts/Samarata-ax99a.ttf") format("opentype")
}

@font-face {
  font-family: "texgyreadventor";
  src: url("../fonts/texgyreadventor/texgyreadventor-regular.otf") format("opentype")
}

@font-face {
  font-family: "PepperHands";
  src: url("../fonts/PepperHands-Regular.otf") format("opentype")
}