:root {

  color-scheme: light dark;

  --color: light-dark(#100f0d, #f2f1f0);

  --bg-color: light-dark(#fafafa, #050505);

}

.light {

  color-scheme: light;

}

.dark {

  color-scheme: dark;

}

body {

  background-color: var(--bg-color) !important;

  color: var(--color) !important;

  min-height: 100vh;

  width: 100vw;

  font-family: "Roboto", sans-serif;

  font-optical-sizing: auto;

  font-weight: 200;

  font-style: normal;

}

.back {

  position: fixed;

  z-index: 0;

  width: 100vw;

  height: 100vh;

}

.back > .content {

  position: fixed;

  width: 100vw;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

}

.back > .content {

  position: fixed;

  width: 100vw;

  height: 100vh;

}

.back > .content > picture {

  width: 20em;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -khtml-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.back > .side {

  position: fixed;

  height: 100vh;

  width: 4.2em;

  z-index: 1;

  top: 0;

  left: 0;

  display: grid;

  grid-template-rows: 5em calc(100vh - 10em) 5em;

}

.back > .side > div {

  display: flex;

  align-items: center;

  justify-content: center;

}

.back > .side > div:nth-child(1) {

  align-items: baseline;

}

.back > .side > div:nth-child(3) {

  align-items: end;

}

.back ul {

  padding: 0;

  margin: 0;

  & li {

    display: inline-block;

    opacity: 0.5;

    padding: 0;

    width: 4.2em;

    height: 3.8em;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 1s ease-in-out;

    & svg,& img {

      width: 1.4em;

      height: 1.4em;

    }

  }

  & li:not(.logo):hover {

    opacity: 1;

    cursor: pointer;

    & svg,& img {

      width: 1.8em;

      height: 1.8em;

    }

  }

  & li.logo,

  & li.selected {

    opacity: 1;



  }

  & li.logo {

    height: 4em;

    & img {

      width: 2.4em;

      height: 2.4em;

    }

  }

}

body > .content {

  position: absolute;

  z-index: 2;

  top: 0.5em;

  right: 0.5em;

  width: calc(100vw - 4.2em);

  background-color: light-dark(#fff, #000);

  min-height: calc(100vh - 1em);

  border-radius: 1em;

  box-shadow: light-dark(#100f0d20, #dadb7d0b) 0px 0.2em 0.5em;

  > div {

    width: calc(100% - 4em);

    margin: 0;

    padding: 1em 2em;

    position: relative;

    display: inline-block;

    > div {

      width: var(--dynaui-responsive);

      margin: 1em auto;

    }

  }

}

.bg-one {

  background-color: var(--dynaui-bg-one);

}

.bg-two {

  background-color: var(--dynaui-bg-two);

}

.bg-tre {

  background-color: var(--dynaui-bg-tre);

}

nav.banners li {

  background-color: var(--dynaui-bg-two);

  border-radius: 2em;

  width: 19em;

  padding: 0;

  display: inline-block;

  margin: 1em;

}

nav.banners li.title {

  width: 100%;

}

nav.banners li.half {

  width: 12em;

}



nav.banners.sliding {

  overflow-x: scroll;

  margin-bottom: 2em;

  scroll-snap-type: x mandatory;

  scrollbar-width: none;

}

nav.banners.sliding ul {

  display: flex;

  gap: 0.5em;

  overflow-x: clip;

  width: fit-content;

}

nav.banners li.flat,

nav.banners li.title,

.bg-one nav.banners li {

  background-color: var(--dynaui-bg);

}

nav.banners li:not(.title):hover {

  box-shadow: light-dark(#100f0d10, #dadb7d10) 0px 0.2em 0.5em;

}

nav.banners li > span {

  position: absolute;

  top: -0.5em;

  right: -0.5em;

  background-color: var(--dynaui-bg);

  width: 3em;

  height: 3em;

  font-size: 0.7em;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}

nav.banners li > span:empty {

  display: none;

}

nav.banners li a {

  width: 13em;

  padding: 3em;

  display: table-cell;

  height: 20em;

}

nav.banners li.title a {

  height: auto;

  padding: 1em;

  width: 100%;

}

nav.banners li.half a {

  width: 13em;

  padding: 2em;

  display: table-cell;

  height: 12em;

}

nav.banners li a > span {

  display: inline-block;

  width: 30%;

  padding: 3em;

  margin: -2em 0 2em -2em;

}

nav.banners li.half a > span {

  display: inline-block;

  width: 20%;

  padding: 2em;

  margin: -1em 0 1em -1em;

}

nav.banners li.title a > span {

  padding: 0;

  background-color: transparent !important;

  width: 1em;

  margin: 0;

  position: absolute;

  left: -0.9em;

  top: 0.9em;

}

nav.banners li.title a > span img {

  width: 1.6em;

  height: 1.6em;

}

nav.banners li a > strong {

  display: inline-block;

  width: 100%;

  margin-bottom: 0.2em;

  font-size: 1.2em;

}

nav.banners li.title a > strong {

  font-size: 1.4em;

}

nav.banners li.title a > p {

  display: none;

}

nav.banners li a > div {

  padding: 0;

  margin: 0;

  display: flex;

  align-items: center;

  justify-content: right;

  float: left;

  position: absolute;

  bottom: 1.5em;

  right: 2em;

  cursor: pointer;

}

nav.banners li.half a > div  {

  font-size: 0.8em;

}

nav.banners li.title a > div {

  bottom: 0.8em;

}

nav.banners li a > div > span {

  width: 2em;

  height: 2em;

  padding: 0;

  margin: 0 0.5em 0 0;

  display: flex;

  align-items: center;

  justify-content: center;

  float: left;

}

nav.banners li a > div > span,

nav.banners li a > span {

  background-color: var(--dynaui-bg);

  border-radius: 50%;

}

nav.banners li.flat a > div > span,

nav.banners li.flat a > span,

nav.banners li.title a > div > span,

nav.banners li.title a > span,

.bg-one nav.banners li a > div > span,

.bg-one nav.banners li a > span {

  background-color: var(--dynaui-bg-tre);

}

nav.banners li a > div > span > img,

nav.banners li a > div > span > svg {

  width: 1em;

  height: 1em;

  margin: 0;

}

nav.list {

  margin: 0 0 1em;

}

nav.list li {

  margin: 0.5em 0 0.5em 2em;

}

nav.list li a.button {

  font-size: 0.9em;

}

nav.list li.title {

  font-size: 1.4em;

  font-weight: 500;

  margin-top: 1em;

}

nav.list li.subtitle {

  font-size: 1.2em;

  font-weight: 400;

  margin-left: 1.6em;

}

nav.list li.title {

  margin-left: 0;

}

nav.list li a:not(.button),

nav.list li a:not(.button):hover {

  text-decoration: underline;

}

nav ul li svg,

nav ul li img {

  margin-right: 0.5em;

  width: 1em;

  height: 1em;

}

nav.blog li {

  width: 19em;

  padding: 0;

  display: inline-block;

  margin: 1em;

}

nav.blog li a {

  width: 13em;

  padding: 11em 1em 2em;

  display: table-cell;

  height: 20em;

}

nav.blog li a > strong {

  display: inline-block;

  width: 100%;

  margin-bottom: 0.2em;

  font-size: 1.2em;

}

nav.blog li a > p > small {

  display: inline-block;

  width: 100%;

  margin-bottom: 0.2em;

}

nav.blog li a > span {

  background-color: var(--dynaui-bg-tre);

  border-radius: 1em 1em 0 0;

  height: 10em;

  display: inline-block;

  width: calc(100% - 2em);

  position: absolute;

  left: 0;

  top: 0;

  margin: 0;

}

nav.blog li a > div {

  padding: 0;

  margin: 0;

  display: flex;

  align-items: center;

  justify-content: right;

  float: left;

  position: absolute;

  bottom: 1.5em;

  right: 2em;

  cursor: pointer;

}

nav.blog li a:hover > div {

  text-decoration: underline;

}

nav.blog li a > div > span {

  width: 2em;

  height: 2em;

  padding: 0;

  margin: 0 0.5em 0 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--dynaui-bg-tre);

  border-radius: 50%;

}

nav.blog li a > div > span > img,

nav.blog li a > div > span > svg {

  width: 1em;

  height: 1em;

  margin: 0;

}

nav.features li {

  padding: 0.2em 0.3em;

  width: calc(50% - 0.6em);

  float: left;

}

nav.features li.title {

  width: calc(100% - 0.6em);

}

nav.features li img {

  width: 1.5em;

  height: 1.5em;

  float: left;

}

nav.features li.title img {

  display: none;

}

nav.features li div {

  width: calc(100% - 2.4em);

  float: right;

  line-height: 1.5em;

  font-size: 0.9em;

}

nav.features li.title div {

  width: 100%;

  line-height: 2em;

  font-size: 1.4em;

  font-weight: 400;

}

nav.days {

  margin: 0.5em 1em 1em;

}

nav.days li small {

  width: 8em;

  float: left;

  font-size: 1em;

}

nav.days li strong {

  width: calc(100% - 8em);

  float: right;

  font-weight: unset;

}

nav.links li {

  background-color: var(--dynaui-bg-one);

  padding: 0.8em 1.2em;

  border-radius: 1em;

  width: calc(100% - 2.4em);

  margin: 0 0 0.2em;

}

nav.links li > span {

  background-color: var(--dynaui-bg);

  border-radius: 50%;

  position: absolute;

  top: 0.5em;

  right: 1em;

  height: 3em;

  width: 3em;

  display: flex;

  align-items: center;

  justify-content: center;

}

nav.links li > span img,

nav.links li > span svg {

  height: 2em;

  width: 2em;

  margin: 0;

}

nav.links li p {

  margin: 0;

}

nav.links li.title {

  width: 100%;

  line-height: 3em;

  font-size: 1.4em;

  font-weight: 400;

  padding: 0;

  background-color: transparent;

}

nav.links li.title a:hover {

  text-decoration: none;

}

nav.links li.title > span,

nav.links li.title p {

  display: none;

}

nav.forms li {

  width: 33%;

  float: left;

}

nav.forms li label.checkbox {

  margin: 0 !important;

}

nav.forms li.title {

  font-size: 1.4em;

  font-weight: 400;

  width: 100%;

}

nav.forms li.title,

nav.forms li.full {

  width: 100%;

}

nav.forms li.title label {

  padding: 0 !important;

}

nav.forms li label.loading:has(> [type="checkbox"])::before {

  background-color: var(--dynaui-bg-tre);

  border: 1px solid var(--dynaui-link);

}

nav.forms li.title small,

nav.forms li.title .checkbox:before,

nav.forms li.title .checkbox:after {

  display: none;

}

@media (max-width: 69em) {

  .axepanel {

    margin-left: 2em;

    width: calc(100% - 8em);

  }

}