:root {
  --hue: 270;
  --hue-sec: 200;
  --hue-suc: 160;

  --input-pad: 0 var(--gap-s);
  --input-height: 28px;
  --spinner-size: 20px;

  --gap: 1em;
  --gap-s: 0.4em;
  --gap-xs: 0.22em;
  --radius: 4px;
  --radius-l: 8px;
  --col-prim: hsl(var(--hue), 63%, 33%);
  --col-banner: hsl(var(--hue), 100%, 43%);
  --col-prim-li: hsl(260, 100%, 97%);
  --col-text: hsl(var(--hue), 63%, 23%);
  --col-text-li: hsl(var(--hue), 13%, 60%);
  --col-text-vli: hsl(var(--hue), 13%, 73%);
  --col-sec: hsl(var(--hue-sec), 100%, 53%);
  --col-sec-li: hsl(var(--hue-sec), 100%, 87%);
  --col-li: hsl(var(--hue), 13%, 73%);
  --col-vli: hsl(var(--hue), 13%, 90%);
  --col-suc: hsl(var(--hue-suc), 100%, 38%);

  --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; */
}

* {
  box-sizing: border-box;
}

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

footer {
  margin: 0;
  padding: 0;

  span {
    font-style: italic;
    color: var(--col-text-li);
    text-align: center;
    font-size: 9pt;
    font-weight: 300;
    font-style: italic;

  }
}

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

body {
  display: flex;
  min-height: 100dvh;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  justify-content: center;
}

span {
  font-size: 11pt;
}



.lim {
  box-sizing: border-box;
  max-width: 512px;
  /* margin: auto; */
  /* margin-left: auto; */
  /* margin-right: auto; */
  /* padding: 0 1em; */
}

.main-cont {
  padding: var(--gap);
  width: 100%;
}

.main {
  width: 100%;
  background-color: var(--col-prim-li);
  border-radius: var(--radius-l);
  padding: var(--gap);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  box-sizing: border-box;
  /* margin: 0 var(--gap); */
  /* margin-left: 100px; */
  /* margin-right: 100px; */
  /* margin-right: 1.2em; */
  /* max-width: 100%; */
}


.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: 300;
  color: var(--col-prim);
  font-size: 9pt;
  font-style: italic;
  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;
  }
}

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




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

.home-itm {
  align-items: center;
  display: flex;


  img {
    flex: 1;
    height: 8em;
    object-fit: cover;
  }

  div {
    flex: 2;
  }
}

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

  i {
    font-size: 3.33em;
  }

}

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


button {
  margin: 0;
  padding: var(--input-pad);
  /* width: 100%; */
  height: var(--input-height);
  border-radius: var(--radius);
  border: none;
  background-color: var(--col-sec);
  color: white;
  font-weight: 500;
  font-size: 10pt;
  /* padding: var(--input-pad); */
  /* height: var(--input-height); */
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: relative;
}


.blc {
  display: block;
}


.btn {
  /* width: 12em; */
  height: var(--input-height);
  /* padding: 0.1em 0.6em; */
  border-radius: var(--radius);
  background: var(--bg-btn-prim);
  /* background-color: var(--col-prim); */
  color: white;
  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: 12pt;
  font-weight: 300;
  font-style: italic;
  text-align: center;
  margin: 0;
  padding: 0;
  /* margin-bottom: var(--gap-s); */
}

p {
  font-size: 9pt;
  margin-top: var(--gap-s);
  margin-bottom: 0;
  padding: 0;
}

/* h2 { */
/* font-style: italic; */
/* text-align: center; */
/* } */

/* h3 { */
/* font-weight: lighter; */
/* font-style: italic; */
/* text-align: center; */
/* } */



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

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

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

.ideas {
  color: var(--col-prim);
  font-size: 1.23em;
  font-style: italic;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  gap: var(--gap-xs);

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

nav {
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: space-between; */
  /* width: 100%; */
  /* background-color: var(--col-prim); */
  /* height: 3.33em; */
  padding: 0.3em;
  padding-top: 1em;
  /* color: #FFF; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin-top: 80px; */

  img {
    height: 3.33em;
  }

  a {
    padding: 0.111em;
  }
}

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%);
}

form {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-s);
}

input {
  height: var(--input-height);
  margin: 0;
  padding: var(--input-pad);
  border-radius: var(--radius);
  border: none;
  color: var(--col-text);
}

#indicator {
  /* margin-left: auto; */
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: 4px dotted white;
  border-radius: 50%;
  display: block;
  position: absolute;
  /* right: 0; */
  /* float: right; */
  /* top: 0; */
  /* bottom: 0; */
  right: var(--gap-xs);
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline;
}

.htmx-request.htmx-indicator {
  display: inline;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);

  span {
    font-weight: 300;
    font-size: 8pt;
    color: red;
  }
}

label {
  font-size: 8pt;
  font-weight: 600;
}

.btn-submit {
  margin-top: var(--gap-s);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-s);
}

.msg {
  font-weight: 400;
  font-size: 9pt;
  color: var(--col-sec);
}

.msg-suc {
  text-align: center;
  color: var(--col-suc);
  margin: 0;
}

.acc-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);

  a {
    font-weight: bold;
    color: var(--col-sec);
  }
}

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