:root{
  --main-color: #9900ff;
  --main-color-link: black;
  --nav-background-color: snow;
--secondary-background-color: #f6d4ff;
}
@font-face {
  font-family: "OpenSans";
  src: url("OpenSans.woff2") format("truetype");
  font-weight: normal;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.text-bold {
  font-weight: bold;
  word-break: keep-all;
}
a:active, .text-bold, a:hover {
  color: var(--main-color);
}
a:hover {
  text-decoration-color: var(--main-color);
  -moz-text-decoration-color: var(--main-color);
}
.text-underline {
  text-decoration: underline var( --main-color-link);
}

a {
  color: var( --main-color-link);
  text-decoration: none;
}
body,
html {
  scroll-behavior: smooth;
  margin: 0;
  font-family: "OpenSans", sans-serif;
}
main,nav, section{
  display: flex;
  align-items: center;
  width: 100%;

}
nav {
  position: fixed;

  padding: 1rem;
 
  background: var(--nav-background-color);
  z-index: 1000;
}

nav ul {
  margin-left: auto;
  list-style-type: none;
  display: inline-flex;
  gap: 1rem;
}

main .text-bold {
  text-align: center;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}
main ul {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  text-align: center;
}
main,
section {
  gap: 4rem;
  min-height: 100dvh;

  justify-content: space-around;
  padding: 6rem 4rem 4rem 4rem;
}

section:nth-of-type(even) {
  background-color: var(--secondary-background-color);
}

section ul {
  padding: 2rem;
  width: 50%;
 font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.6; 
  word-break: normal;

}
section ul li{
  width: fit-content;
}

main ul,
section ul {
  list-style-type: none;
  line-height: 1.6;
}
#Galerie ul{
flex: 1;
max-width: 668px;

}
#Galerie div{
flex: 2;
}
section .text-bold {
  font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2rem);
  margin-bottom: 1rem;
}
/* Responzivita pro menší obrazovky (mobilní zobrazení) */
@media (max-width: 1000px) {
  .form-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  section {
    padding: 2rem;
    text-align: center;
    flex-direction: column;
    justify-content: flex-start;
  }
  .slider-wrapper {
    flex-grow: 0 !important;
    width: 100% !important;
  }
  .text-bold {
  white-space: normal; 
}
section ul {
  width: 100%;
}
section ul li{
 width: 100%;

}
footer ul, footer{
  flex-direction: column;
}
footer ul{
text-align: center;

}
#author{
  margin: auto;
}
.comparison-box{
  height: 400px !important;
}
}