@charset "utf-8";
/* CSS Document */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  font-size: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

h4,
.h4 {
  font-size: 1.333rem;
  line-height: calc(2px + 2ex + 2px);
  margin-bottom: 0.65em;
  font-size: clamp(1rem, 4.333vw + 1rem, 1.333rem);
}

h3,
.h3 {
  font-size: 1.776889rem;
  line-height: calc(2px + 2ex + 2px);
  margin-bottom: 0.65em;
  font-size: clamp(1.19051563rem, 4.58637337vw + 1rem, 1.776889rem);
}

h2,
.h2 {
  font-size: 2.368593037rem;
  line-height: calc(2px + 2ex + 2px);
  margin-bottom: 0.65em;
  font-size: clamp(1.5869573348rem, 4.7816357022vw + 1rem, 2.368593037rem);
}

h1,
.h1 {
  font-size: 3.1573345183rem;
  line-height: calc(2px + 2ex + 2px);
  margin-bottom: 0.65em;
  margin-top: 1em;
  font-size: clamp(2.1154141273rem, 5.041920391vw + 1rem, 3.1573345183rem);
  font-weight: 700;
}



/* p,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
} */

/* .hyphenate {
  
  overflow-wrap: break-word;
  word-wrap: break-word;
  
  -webkit-hyphens: auto;
  hyphens: auto;
} */

.elementy {
  color: purple;
  padding: 1.5rem clamp(1rem, 5%, 3rem);
}

/* .container {
  width: min(80ch, 100vw - 2rem);
} */

/* .bg-image {
  background: #1F1B1C url(../images/bg600.jpg) no-repeat center;
  background-size: min(600px, 100%);
  color: #ffffff;
  padding: 1rem;
} */

.smol-scroll-snap {
  /* Set up container positioning */
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 0 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.smol-scroll-snap > * {
  width: min(45ch, 60vw);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

body > ul {
  list-style: none;
  margin: 0;
}
body > ul:not([data-padding-unset]) {
  padding: 0;
}

[class*=smol]:not([data-component]) > *:not([data-unstyled]) {
  display: grid;
  padding: 1rem;
  background-color: #E0D4F6;
  color: #675883;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: bold;
  text-align: center;
  border-radius: 0.15em;
  border: 1px dashed;
}
[class*=smol]:not([data-component]) > *:not([data-unstyled]):not([data-text]) {
  place-content: center;
}
[class*=smol]:not([data-component]) > *:not([data-unstyled])[data-text] {
  font-size: 1.15rem;
  text-align: left;
}

[data-container-style] {
  outline: 2px dotted #29344B;
}