html {
  font-size: 100%;
}

select, textarea, input, button {
  font: inherit;
}


body {
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  min-height: 100vh;
}

p {
  font-size: 1.4rem;
  margin-bottom: 1.2em;
}

ul {
  font-size: 1.4rem;
}

h1,
h2,
h3,
h4 {
  margin: 1.414em 0 0.5em;
  font-weight: 700;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: 2.441rem;
}

h2 {
  font-size: 1.953rem;
}

h3 {
  font-size: 1.563rem;
  color: #ff6600;
}

h4 {
  font-size: 1.25rem;
  color: #666600;
}

small,
.font_small {
  font-size: 0.8rem;
}

a {
  font-weight: 400;
}

.main a:link {
  text-decoration: underline;
}

.main a:visited {
  text-decoration: none;
}
.main a:hover {
  text-decoration: none;
  color: white;
  background-color: #9c27b0;
}

.main a:active {
  text-decoration: none;
}

.container a:link {
  text-decoration: underline;
}

.container a:visited {
  text-decoration: none;
}
.container a:hover {
  text-decoration: none;
  color: white;
  background-color: #9c27b0;
}

.container a:active {
  text-decoration: none;
}

.rtecenter {
  text-align: center;
}

.grid-center-af {
  display:grid;
  place-content: center;
}

.rtestart {
  text-align: start;
}

.rteend {
  text-align: end;
}

.bold {
  font-weight: bold;
}

.bolder {
  font-weight: bolder;
}
.w960 {
  max-width: 960px;
  margin: 0 auto;
}

.w690 {
  max-width: 690px;
  margin: 0 auto;
}

.m-p5 {
  margin: 0.5em;
}

.m-1 {
  margin: 1em;
}

.m-1p5 {
  margin: 1.5em;
}

.m-2 {
  margin: 2em;
}

.mt-1 {
  margin-top:1em;
}

.mt-1p5 {
  margin-top:1.5em;
}

.mt-2 {
  margin-top:2em;
}

.mt-2p5 {
  margin-top:2.5em;
}

.mt-auto {
  margin-top: auto;
}

.p-p5 {
  padding: 0.5em;
}

.p-1 {
  padding: 1em;
}

.p-1p5 {
  padding: 1.5em;
}

.p-2 {
  padding: 2em;
}

.padding-2 {
  padding: 2em;
}

.padding-2p5 {
  padding: 2.5em;
}



.kh-columns {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 750px) {
  .kh-columns {
    flex-direction: row;
  }
}

.siimple-tip {
  display: block;
  position: relative;
  width: calc(100% - 25px - 20px - 5px);
  border-left-style: solid;
  border-left-width: 5px;
  border-radius: 5px;
  padding-top: 10px;
  padding-right: 20px !important;
  padding-bottom: 10px;
  padding-left: 25px !important;
  margin-bottom: 20px;
  background-color: #eef2f7;
  font-size: 16px;
  color: #546778;
  line-height: 24px;
}

.siimple-tip::before {
  position: absolute;
  top: 10px;
  left: -12px;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  color: #ffffff;
  text-align: center;
  line-height: 20px;
}

.siimple-tip.siimple-tip--primary {
  border-left-color: #4e91e4;
}

.siimple-tip.siimple-tip--primary::before {
  background-color: #4e91e4;
}

.siimple-tip.siimple-tip--success {
  border-left-color: #4acf7f;
}

.siimple-tip.siimple-tip--success::before {
  background-color: #4acf7f;
}

.siimple-tip.siimple-tip--warning {
  border-left-color: #fbc850;
}

.siimple-tip.siimple-tip--warning::before {
  background-color: #fbc850;
}

.siimple-tip.siimple-tip--error {
  border-left-color: #ee675d;
}

.siimple-tip.siimple-tip--error::before {
  background-color: #ee675d;
}

.siimple-tip.siimple-tip--dark {
  border-left-color: #546778;
}

.siimple-tip.siimple-tip--dark::before {
  background-color: #546778;
}

.siimple-tip.siimple-tip--light {
  border-left-color: #dde5ee;
}

.siimple-tip.siimple-tip--light::before {
  background-color: #dde5ee;
}

.siimple-tip.siimple-tip--navy {
  border-left-color: #546778;
}

.siimple-tip.siimple-tip--navy::before {
  background-color: #546778;
}

.siimple-tip.siimple-tip--green {
  border-left-color: #93d260;
}

.siimple-tip.siimple-tip--green::before {
  background-color: #93d260;
}

.siimple-tip.siimple-tip--teal {
  border-left-color: #60d2b6;
}

.siimple-tip.siimple-tip--teal::before {
  background-color: #60d2b6;
}

.siimple-tip.siimple-tip--blue {
  border-left-color: #4e91e4;
}

.siimple-tip.siimple-tip--blue::before {
  background-color: #4e91e4;
}

.siimple-tip.siimple-tip--purple {
  border-left-color: #ac94e8;
}

.siimple-tip.siimple-tip--purple::before {
  background-color: #ac94e8;
}

.siimple-tip.siimple-tip--pink {
  border-left-color: #e77eb8;
}

.siimple-tip.siimple-tip--pink::before {
  background-color: #e77eb8;
}

.siimple-tip.siimple-tip--red {
  border-left-color: #ee675d;
}

.siimple-tip.siimple-tip--red::before {
  background-color: #ee675d;
}

.siimple-tip.siimple-tip--orange {
  border-left-color: #f78055;
}

.siimple-tip.siimple-tip--orange::before {
  background-color: #f78055;
}

.siimple-tip.siimple-tip--yellow {
  border-left-color: #fbc850;
}

.siimple-tip.siimple-tip--yellow::before {
  background-color: #fbc850;
}

.siimple-tip.siimple-tip--grey {
  border-left-color: #dde5ee;
}

.siimple-tip.siimple-tip--grey::before {
  background-color: #dde5ee;
}

.siimple-tip--exclamation::before {
  content: "!";
}

.siimple-tip--question::before {
  content: "?";
}

.siimple-tip--heart::before {
  content: "❤";
}





@media only screen and (min-width: 768px) {
  .grid-race-cards {
    grid-template-columns: 1fr 1fr ;
  }
}

.grid-race-cards {
  display: grid;
  grid-template-rows: 1fr 1fr ;
  gap: 2em;
}


.css-grid-wrapper-02 {
  display: grid;
  gap: 3em;
  justify-content: center;
}
 
@media only screen and (min-width: 992px) {
  .css-grid-wrapper-02 {
    grid-template-columns: repeat(2, 1fr);
  }
}



.card-rfth {
  display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
  font-size: .8rem;
  padding: 2em;
  border-radius: 6px;
  color: rgba(0,0,0,.87);
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}



/************ Responsive embed ******************/

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive-4by3 {
  padding-bottom: 75%;
}


/************ https://smolcss.dev/ ******************/

.smol-css-grid {
  --min: 40ch;
  --gap: 2em;

  display: grid;
  grid-gap: var(--gap);
  /* min() with 100% prevents overflow
  in extra narrow spaces */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}



.smol-flexbox-grid {
  --min: 20ch;
  --gap: 2em;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.smol-flexbox-grid > * {
  flex: 1 1 var(--min);
}



button:focus {
  outline: max(1px, 0.1em) dashed currentColor;
  outline-offset: -0.25em;
}

button:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible {
  outline: max(1px, 0.1em) dashed currentColor;
  outline-offset: -0.25em;
}

p,
li,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
  hyphens: auto;
}


a:not([class]) {
	text-underline-offset: 0.25em;
}
.outline-offset {
  outline: 2px dashed blue;
  outline-offset: var(--outline-offset, .5em);
}

p {
  text-wrap: pretty;
}

:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance; 
}

.smol-responsive-padding {
  padding: 1.5rem clamp(1rem, 5%, 3rem);
}


.smol-card-component {
  --img-ratio: 3/2;

  display: flex;
  flex-direction: column;
  /* Supported for flexbox in modern browsers since April 2021 */
  gap: 1rem;
  box-shadow: 0 0 0.5rem hsl(0 0% 0% / 35%);
  border-radius: 0.5rem;
}

.smol-card-component > img {
  aspect-ratio: var(--img-ratio);
  object-fit: cover;
  width: 100%;
}

.smol-card-component > img:first-child {
  border-radius: 0.5rem 0.5rem 0 0;
}

.smol-card-component > img:last-child {
  border-radius: 0 0 0.5rem 0.5rem;
  margin-top: auto;
}

.smol-card-component > :not(img) {
  margin-left: 1rem;
  margin-right: 1rem;

  /* Prevent typography "orphans" */
  text-wrap: pretty;
}

.smol-card-component > :not(img):first-child {
  margin-top: 1rem;
}

/* Enhanced `:not()` accepts a selector list,
but as a fallback you can chain `:not()` instead */
.smol-card-component > :last-of-type:not(img, h2, h3, h4) {
  margin-bottom: 1rem;
}

.smol-card-component > :not(h2, h3, h4) {
  font-size: 0.9rem;
}

.smol-card-component > a {
  align-self: start;
}



/* For "real-world" usage, you do not need to scope
these custom properties */
:is(a, button, input, textarea, summary) {
  /* Using max() ensures at least a value of 2px, 
  while allowing the possibility of scaling 
  relative to the component */
  --outline-size: max(2px, 0.08em);
  --outline-style: solid;
  --outline-color: currentColor;        
}

/* Base :focus styles for fallback purposes */
:is(a, button, input, textarea, summary):focus {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset, var(--outline-size));
}

/* Final :focus-visible styles */
:is(a, button, input, textarea):focus-visible {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset, var(--outline-size));
}

/* Remove base :focus styles when :focus-visible is available */
:is(a, button, input, textarea):focus:not(:focus-visible) {
  outline: none;
}


/* Baseline for default links */
a:not([class]) {
  /* Relatively sized thickness and offset */
  text-decoration-thickness: max(0.09em, 2px);
  text-underline-offset: 0.17em;
}


:focus-visible {
  --outline-size: max(2px, 0.15em);

  outline: var(--outline-width, var(--outline-size)) var(--outline-style, solid)
    var(--outline-color, currentColor);
  outline-offset: var(--outline-offset, var(--outline-size));
}


/* Scroll padding allowance above anchor links */

@media (prefers-reduced-motion: no-preference) {
:has(:target) {
  scroll-padding-block-start: 2rem;
}


/* Scroll padding allowance below focused elements 
  to ensure they are clearly in view */
:focus {
  scroll-padding-block-end: 8vh;
}
}

.smol-flexbox-grid {
  --min: 10ch;
  --gap: 3rem;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.smol-flexbox-grid > * {
  flex: 1 1 var(--min);
}

.smol-flexbox-grid-15ch {
    --min: 15ch;
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: start;
}

.smol-flexbox-grid-15ch > * {
    flex: 1 1 var(--min);
}

.smol-flexbox-grid-20ch {
    --min: 20ch;
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: center;
}

.smol-flexbox-grid-20ch > * {
    flex: 1 1 var(--min);
}

.smol-flexbox-grid-25ch {
    --min: 25ch;
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: center;
}

.smol-flexbox-grid-25ch > * {
    flex: 1 1 var(--min);
}

.smol-flexbox-grid-30ch {
    --min: 30ch;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-content: stretch;
}

.smol-flexbox-grid-30ch > * {
    flex: 1 1 var(--min);
}


.smol-flexbox-grid-35ch {
    --min: 35ch;
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: center;
}

.smol-flexbox-grid-35ch > * {
    flex: 1 1 var(--min);
}


.smol-flexbox-grid-40ch {
    --min: 40ch;
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: center;
}

.smol-flexbox-grid-40ch > * {
    flex: 1 1 var(--min);
}

.smol-flexbox-grid-45ch {
    --min: 45ch;
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: center;
}

.smol-flexbox-grid-45ch > * {
    flex: 1 1 var(--min);
}


.smol-flexbox-grid-50ch {
    --min: 50ch;
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: center;
}

.smol-flexbox-grid-50ch > * {
    flex: 1 1 var(--min);
}

.smol-flexbox-grid-50ch-start {
    --min: 50ch;
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
}

.smol-flexbox-grid-50ch-start > * {
    flex: 1 1 var(--min);
}


.result-card-container {
  justify-content: around;
}

.result-card {
  border: 0;
  border-radius: 0.5em;
  color: rgba(0,0,0,.87);
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}


.align-content-stretch {
  align-content: stretch;
}