html,
:root {
  --grid-maxWidth: 60rem;
  --grid-gutter: 2rem;
  --font-size: 1.2rem;
  --y-200: #facc15;
  --y-100: #fef08a;
  --y-50: #fffbf1;
  --g-500: #121110;
  --g-400: #292524;
  --g-300: #57534E;
  --g-200: #A8A29E;
  --g-100: #d4d4d4;
  --g-50: #FFFEFA;
  --space: 1em;
  --font-family-sans: "Bricolage Grotesque", Helvetica, sans-serif;
}

@view-transition {
  navigation: auto;
}

html {
  box-sizing: border-box;
  line-height: 1.2;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  cursor: url(assets/PointerArrow.svg), pointer;
}

body {
  background-color: var(--g-50);
  line-height: 1.6;
  color: var(--font-color);
  font-family: var(--font-family-sans);
  font-size: var(--font-size);
  font-weight: 400;
  margin: 0;
  padding: 0;
  background: #fffcf5;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  margin: 0.3em 0 0.5em;
  line-height: 120%;
  word-wrap: break-word;
}

h1 {
  font-size: 2.788rem;
}

h2 {
  font-size: 2.488rem;
}

h3 {
  font-size: 2.074rem;
}

h4 {
  font-size: 1.728rem;
}

h5 {
  font-size: 1.44rem;
}

h6 {
  font-size: 1.2rem;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1.5px solid;
  border-bottom-color: var(--y-200);
  cursor: url(assets/PointerHand.svg), pointer;

}

a:hover:not(.button) {
  border-bottom-color: var(--g-300);
  transition: transform 0.4s ease-in-out;
}

p {
  margin-top: 0;
  font-size: var(--font-size);
}

blockquote {
  background-color: var(--g-200);
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--g-200);
}

dl dt {
  font-weight: bold;
}

hr {
  border: none;
  background-color: var(--g-200);
  height: 1px;
  margin: 0.2rem 0;
}

table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
}

table.striped tr:nth-of-type(2n) {
  background-color: var(--g-200);
}

td,
th {
  vertical-align: middle;
  padding: 1.2rem 0.4rem;
}

thead {
  border-bottom: 2px solid var(--g-200);
}

tfoot {
  border-top: 2px solid var(--g-200);
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

img {
  max-width: 100%;
  height: auto;
}

fieldset {
  border: 1px solid var(--color-lightGrey);
}

iframe {
  border: 0;
}

li {
  padding-bottom: calc(var(--space)/2);
}

/* CHOTA GRID */

.container {
  max-width: var(--grid-maxWidth);
  margin: 0 auto;
  width: 96%;
  padding: 0 calc(var(--grid-gutter) / 2);
}

.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin-left: calc(var(--grid-gutter) / -2);
  margin-right: calc(var(--grid-gutter) / -2);
}

.row.reverse {
  flex-direction: row-reverse;
}

.col {
  flex: 1;
}

.col,
[class*=" col-"],
[class^="col-"] {
  margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2);
}

.col-1 {
  flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
  max-width: calc((100% / (12/1)) - var(--grid-gutter));
}

.col-2 {
  flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
  max-width: calc((100% / (12/2)) - var(--grid-gutter));
}

.col-3 {
  flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
  max-width: calc((100% / (12/3)) - var(--grid-gutter));
}

.col-4 {
  flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
  max-width: calc((100% / (12/4)) - var(--grid-gutter));
}

.col-5 {
  flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
  max-width: calc((100% / (12/5)) - var(--grid-gutter));
}

.col-6 {
  flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
  max-width: calc((100% / (12/6)) - var(--grid-gutter));
}

.col-7 {
  flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
  max-width: calc((100% / (12/7)) - var(--grid-gutter));
}

.col-8 {
  flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
  max-width: calc((100% / (12/8)) - var(--grid-gutter));
}

.col-9 {
  flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
  max-width: calc((100% / (12/9)) - var(--grid-gutter));
}

.col-10 {
  flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
  max-width: calc((100% / (12/10)) - var(--grid-gutter));
}

.col-11 {
  flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
  max-width: calc((100% / (12/11)) - var(--grid-gutter));
}

.col-12 {
  flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
  max-width: calc((100% / (12/12)) - var(--grid-gutter));
}

@media screen and (max-width: 599px) {
  .container {
    width: 100%;
  }

  .col,
  [class*="col-"],
  [class^="col-"] {
    flex: 0 1 100%;
    max-width: 100%;
  }
}

@media screen and (min-width: 900px) {
  .col-1-md {
    flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
    max-width: calc((100% / (12/1)) - var(--grid-gutter));
  }

  .col-2-md {
    flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
    max-width: calc((100% / (12/2)) - var(--grid-gutter));
  }

  .col-3-md {
    flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
    max-width: calc((100% / (12/3)) - var(--grid-gutter));
  }

  .col-4-md {
    flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
    max-width: calc((100% / (12/4)) - var(--grid-gutter));
  }

  .col-5-md {
    flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
    max-width: calc((100% / (12/5)) - var(--grid-gutter));
  }

  .col-6-md {
    flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
    max-width: calc((100% / (12/6)) - var(--grid-gutter));
  }

  .col-7-md {
    flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
    max-width: calc((100% / (12/7)) - var(--grid-gutter));
  }

  .col-8-md {
    flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
    max-width: calc((100% / (12/8)) - var(--grid-gutter));
  }

  .col-9-md {
    flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
    max-width: calc((100% / (12/9)) - var(--grid-gutter));
  }

  .col-10-md {
    flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
    max-width: calc((100% / (12/10)) - var(--grid-gutter));
  }

  .col-11-md {
    flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
    max-width: calc((100% / (12/11)) - var(--grid-gutter));
  }

  .col-12-md {
    flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
    max-width: calc((100% / (12/12)) - var(--grid-gutter));
  }
}

@media screen and (min-width: 1200px) {
  .col-1-lg {
    flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
    max-width: calc((100% / (12/1)) - var(--grid-gutter));
  }

  .col-2-lg {
    flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
    max-width: calc((100% / (12/2)) - var(--grid-gutter));
  }

  .col-3-lg {
    flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
    max-width: calc((100% / (12/3)) - var(--grid-gutter));
  }

  .col-4-lg {
    flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
    max-width: calc((100% / (12/4)) - var(--grid-gutter));
  }

  .col-5-lg {
    flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
    max-width: calc((100% / (12/5)) - var(--grid-gutter));
  }

  .col-6-lg {
    flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
    max-width: calc((100% / (12/6)) - var(--grid-gutter));
  }

  .col-7-lg {
    flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
    max-width: calc((100% / (12/7)) - var(--grid-gutter));
  }

  .col-8-lg {
    flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
    max-width: calc((100% / (12/8)) - var(--grid-gutter));
  }

  .col-9-lg {
    flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
    max-width: calc((100% / (12/9)) - var(--grid-gutter));
  }

  .col-10-lg {
    flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
    max-width: calc((100% / (12/10)) - var(--grid-gutter));
  }

  .col-11-lg {
    flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
    max-width: calc((100% / (12/11)) - var(--grid-gutter));
  }

  .col-12-lg {
    flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
    max-width: calc((100% / (12/12)) - var(--grid-gutter));
  }
}

/* Position & alignment */
.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.is-full-screen {
  width: 100%;
  min-height: 100vh;
}

.is-full-width {
  width: 100% !important;
}

.is-vertical-align {
  display: flex;
  align-items: center;
}

.is-horizontal-align {
  display: flex;
  justify-content: center;
}

.is-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.is-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.is-fixed {
  position: fixed;
  width: 100%;
}

.is-paddingless {
  padding: 0 !important;
}

.is-marginless {
  margin: 0 !important;
}

.is-pointer {
  cursor: pointer !important;
}

.is-rounded {
  border-radius: 100%;
}

.clearfix {
  content: "";
  display: table;
  clear: both;
}

.is-hidden {
  display: none !important;
}

@media screen and (max-width: 599px) {
  .hide-xs {
    display: none !important;
  }

  .text-sm-left {
    text-align: left;
  }
}

@media screen and (min-width: 600px) and (max-width: 899px) {
  .hide-sm {
    display: none !important;
  }
}

@media screen and (min-width: 900px) and (max-width: 1199px) {
  .hide-md {
    display: none !important;
  }
}

@media screen and (min-width: 1200px) {
  .hide-lg {
    display: none !important;
  }
}

@media print {
  .hide-pr {
    display: none !important;
  }
}

/*PATTERNS */

.mt-1 {
  margin-top: calc(0.875*var(--space));
}

.pt-2 {
  padding-top: calc(1.5*var(--space));
}

.pt-4 {
  padding-top: calc(4*var(--space));
}

.pb-2 {
  padding-bottom: calc(1.5*var(--space));
}

.pb-4 {
  padding-bottom: calc(4*var(--space));
}

#showPostHeading {
  color: var(--g-300);
}

#showPostHeading::before {
  content: " / ";
}

.topy {
  padding-top: calc(2*var(--space));
  padding-bottom: var(--space);
}

header {
  padding-top: var(--space);
  justify-content: center;
  align-items: center;
  font-size: calc(1.25*var(--space));
}

.button,
[type="button"],
[type="reset"],
[type="submit"],
button {
  padding: 1rem 1.25rem;
  border-radius: 3em;
  border: 2.5px solid var(--g-500);
  font-size: var(--font-size);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transform: scale(1);
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}

.button:hover,
[type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover,
button:hover {
  cursor: url(assets/PointerHand.svg), pointer;
  transform: translateY(-5px);
}

.button:active:not(:disabled),
[type="button"]:active:not(:disabled),
[type="reset"]:active:not(:disabled),
[type="submit"]:active:not(:disabled),
button:active:not(:disabled) {
  transform: scale(0.975);
}

.primary {
  color: var(--g-500);
  background: var(--y-200);
}

.secondary {
  color: var(--g-500);
  background-color: var(--g-50);
}

.box-white {
  background-color: var(--g-50);
  border: 2.5px solid;
  border-color: var(--g-500);
  border-radius: calc(1.25*var(--space));
  padding-right: calc(0.9* var(--space));
  padding-left: calc(0.9* var(--space));
  padding-top: calc(1.5* var(--space));
  padding-bottom: calc(2* var(--space));
  height: fit-content;
}

.bordery {
  border-top: 1px solid;
  border-top-color: var(--g-100);
  padding-top: calc(2*var(--space));
  margin-top: calc(2*var(--space));
}

.listy {
  line-height: 1.2;
  content: " / ";
  padding-bottom: calc(0.5*(var(--space)));
  padding-top: calc(0.5*(var(--space)));
  margin: 0;
}

.listy::before {
  content: url('/assets/Success.svg');
  align-content: center;
  margin-right: calc(0.5 * (var(--space)));
}

details {
  border-bottom: 2px solid;
  border-color: var(--g-500);
  padding-bottom: var(--space);

}

details p,
details ol {
  color: var(--g-300);
}

summary {
  cursor: url(assets/PointerHand.svg), pointer;
}

.m0 {
  margin: 0 auto;
  gap: calc(0.5*var(--space));
}

.text-muted {
  color: var(--g-300);
  font-size: calc(0.9*var(--font-size));
  line-height: 1.4;
}

.g-300 {
  color: var(--g-300);
}