:root {
  --hue: 270;
  --hue-sec: 200;
  --gap: 1.88em;
  --gap-s: 0.8em;
  --gap-xs: 0.4em;
  --radius: 8px;
  --radius-l: 16px;
  --col-prim: hsl(var(--hue), 63%, 33%);
  --col-banner: hsl(var(--hue), 73%, 90%);
  --col-prim-li: hsl(var(--hue), 100%, 87%);
  --col-text: hsl(var(--hue), 60%, 15%);
  --col-text-li: hsl(var(--hue), 10%, 70%);
  --col-text-vli: hsl(var(--hue), 6%, 79%);
  --col-sec: hsl(var(--hue-sec), 100%, 53%);
  --col-sec-li: hsl(var(--hue-sec), 100%, 87%);
  --col-sec-vli: hsl(var(--hue-sec), 100%, 96%);
  --col-li: hsl(var(--hue), 13%, 73%);
  --col-vli: hsl(var(--hue), 13%, 96%);

  --angle: 190deg;
  --bg-btn-prim: linear-gradient(var(--angle), var(--col-prim-li) 0%, var(--col-prim) 100%);
  --bg-btn-sec: linear-gradient(var(--angle), var(--col-sec-li) 0%, var(--col-sec) 100%);
  --bg-dis: linear-gradient(var(--angle), var(--col-vli) 0%, var(--col-text-vli) 100%);
  --bg-cont-info: linear-gradient(190deg, hsl(var(--hue), 13%, 98%) 0%, hsl(var(--hue), 13%, 96%) 100%);
}

@font-face {
  font-family: 'Nunito Sans';
  src: url(../static/fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf) format('ttf-variations');
  src: url(../static/fonts/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf) format('ttf-variations');
  font-weight: 300 500 700;
}

html,
body {
  /* width: 100%; */
  margin: 0;
  padding: 0;
  /* height: 100%; */
}

footer {
  font-size: 10pt;
  margin-top: auto;
}

html {
  font-family: Nunito Sans, Arial, Helvetica, sans-serif;
  color: var(--col-text);
}


.lim {
  /* width: 100%; */
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1em;
}

.pad {
  padding: var(--gap);
}

.pad-h {
  padding: 0 var(--gap);
}

.f-bold {
  font-weight: bold;
}

.f-sm {
  font-size: 10.4pt;
  font-style: italic;
}

a {
  font-weight: bold;
  color: var(--col-prim);
  text-decoration: none;

  :active {
    text-decoration: none;
  }

  :visited {
    text-decoration: none;
  }

  :hover {
    text-decoration: none;
  }
}

ul {
  display: flex;
  align-items: center;
  /* justify-content: end; */
  list-style-type: none;
  padding: 0;
  margin: 0;
  gap: var(--gap);
  /* width: 100%; */

  li {
    font-weight: bold;
  }
}

.fc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
}

.col-p {
  color: var(--col-prim);
}

.fv {
  flex-direction: column;
}

.dl-itm a {
  width: 92px;
  height: 128px;
  /* max-width: 8em; */
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  /* color: #FFF; */

  i {
    font-size: 38pt;
  }

}

.dl-cont {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: center;
  gap: var(--gap-s);
  text-align: center;
  padding-bottom: var(--gap-xs);
}

.banner {
  height: 88vh;
  height: 94dvh;
  background: var(--col-prim);
  background: linear-gradient(184deg, var(--col-banner) 0%, transparent 80%);
  /* background-color: #ccc; */
  width: 100%;
  color: var(--col-prim);
  display: flex;
  justify-content: center;
  align-items: center;
  /* line-height: 0.88; */
  /* display: contents; */

  div {
    /* width: 100%; */
    /* height: 100%; */
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    /* justify-content: space-evenly; */
    gap: 0.22em;
  }

  .banner-name {
    font-size: 26pt;
    font-weight: 300;
  }

  .banner-h1 {
    font-size: 16pt;
    font-weight: 300;
    font-style: italic;
  }

  .banner-h2 {
    font-size: 12pt;
    font-weight: 200;
    font-style: italic;
  }

  span,
  button {
    display: block;
  }

  img {
    width: 192px;
    height: 192px;
    /* box-shadow: 10px 5px 5px red; */
    filter: drop-shadow(16px -16px 12px white);
  }
}

.blc {
  display: block;
}

.main {
  background-color: var(--col-prim-li);
}

.btn {
  width: 188px;
  height: 30px;
  padding: 0.1em 0.6em;
  border-radius: var(--radius);
  background: var(--bg-btn-prim);
  /* background-color: var(--col-prim); */
  color: white;
  font-weight: 500;
  font-size: 11pt;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* text-align: center; */

  /* :hover { */
  /* filter: brightness(0.5); */
  /* } */
}

.sv {
  height: var(--gap);
}

.svs {
  height: var(--gap-s);
}

h1 {
  font-size: 18pt;
  text-align: center;
  font-weight: 300;
  margin-bottom: var(--gap-s);
}

h3 {
  font-weight: 500;
  /* font-style: italic; */
  font-size: 11pt;
  color: var(--col-prim);
  margin-bottom: 0;
}

p,
span {
  font-size: 10pt;
  font-weight: 300;
}

.sec {
  background: var(--bg-btn-sec);
  /* background-color: var(--col-sec); */
}

.copyright {
  margin-top: var(--gap);
  padding: var(--gap);
  color: var(--col-text-li);
  text-align: center;
  font-style: italic;
  font-size: 9pt;
}

.ideas {
  color: var(--col-prim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  gap: var(--gap-xs);

  span {
    font-size: 14pt;
    font-style: italic;
    text-align: center;
  }

  i {
    font-size: 18pt;
    color: var(--col-prim);
  }
}

nav {
  margin-top: 1em;
  margin-bottom: 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* border-radius: var(--radius); */
  /* border: 1pt solid var(--col-prim-li); */

  img {
    height: 48px;
    width: 48px;
  }

  a {
    font-weight: 300;
  }

  a.current {
    font-weight: 400;
    color: var(--col-sec);
  }

  span {
    margin: auto;
  }

}



a.disabled {
  pointer-events: none;
  cursor: default;
  /* background-color: var(--col-li); */
  background: linear-gradient(190deg, var(--col-vli) 0%, var(--col-text-vli) 100%);
}

.logo {
  width: 192px;
  height: 192px;
  margin: auto;
  display: block;
  text-align: center;
}

.board {
  display: block;
  /* margin: auto; */
  text-align: center;
}

.home-itms {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.home-itm {
  display: flex;
  /* align-items: stretch; */
  align-items: center;
  gap: var(--gap-xs);
  padding: 0;


  img {
    height: 192px;
    width: 192px;
    object-fit: cover;
    align-self: center;
    /* align-self: stretch; */
    border-radius: var(--radius-l);
  }

  i {
    display: block;
    margin: auto;
    text-align: center;
    font-size: 44pt;
    width: 192px;
    color: var(--col-prim-li);
  }

  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--gap-s);
  }

  .cont {
    width: 100%;
  }

  @media (max-width: 768px) {
    /* align-items: start; */
    /* padding-top: var(--gap); */
    /* flex-direction: column; */

    /* img { */
    /* height: 256px; */
    /* width: 256px; */
    /* } */

    img {
      height: 128px;
      width: 128px;
    }

    i {
      font-size: 33pt;
      width: 128px;
    }

  }
}

.version {
  display: inline-block;
  font-weight: 300;
  font-style: italic;
  font-size: 12pt;
  margin: auto;
  /* width: 100%; */
  text-align: center;
  margin-bottom: var(--gap-s);
  padding: var(--gap-xs) var(--gap-s);
  border-radius: var(--radius);
  color: var(--col-sec);
  background-color: var(--col-sec-vli);
}

.roadmap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  align-items: stretch;
  justify-content: center;
}


.roadmap-itm {
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    display: block;
  }

  p {
    margin: 0;
  }
}

.roadmap-arrow {
  /* margin-left: var(--gap-xs); */
  margin-right: var(--gap-xs);
  text-align: center;
  color: var(--col-sec);
  /* width: 64px; */
  width: var(--gap);
  font-size: 20pt;
}

.roadmap-sep {
  color: var(--col-li);
}

.roadmap-content {
  width: 100%;
  padding: var(--gap-s);
  border-radius: var(--radius);
  background-color: var(--col-vli);
}


.roadmap-name {
  font-size: 10pt;
  font-weight: 500;
  margin-bottom: var(--gap-xs);
  color: var(--col-prim);
}

.current>.roadmap-content {
  background-color: var(--col-sec-vli);
}

.current .roadmap-name {
  color: var(--col-sec);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--gap-s);

  span {
    font-size: 12pt;
    font-weight: 300;

  }
}

.burger {
  font-size: 16pt;
  display: none;
}

@media screen and (max-width: 540px) {
  .nav-links {
    display: none;
  }

  a.burger {
    float: right;
    display: block;
  }

  .nav-links.responsive {
    display: block;
    position: absolute;
    top: 3.33em;
    width: 144px;
    right: var(--gap-s);

    ul {
      padding: var(--gap-s);
      border-radius: var(--radius);
      background-color: var(--col-vli);
      flex-direction: column;
    }
  }
}

.cont {
  border-radius: var(--radius);
  padding: var(--gap-s);
}

.cont-info {
  background: var(--bg-cont-info);
}