@font-face {
   font-family: Bodoni;
   src: url(FONTS/bodoni_cyrillic.ttf);
}

@font-face {
    font-family: 'ABCDiatype';
    src: url('FONTS/ABCDiatypeVariableEdu-Regular.woff2') format('woff2'),
         url('FONTS/ABCDiatypeVariableEdu-Regular.woff') format('woff');
    font-weight: 100 900;   /* rozsah vah variable fontu */
    font-style: normal;     
    font-display: swap;
}


body {
    font-family: "ABCDiatype";
    background-color: rgb(247, 247, 247);
    font-size: 1.5vw; /*1.5 viewport width*/
    margin: 0;
} 

a {
  color: inherit;
  text-decoration: none; 
}



.canvas-text {
  font-size: 3em; 
  text-align: center;
 }

.canvas-section {
  position: relative;
  width: 90vw;
  height: 90vh;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* Adjust the ratio as needed */
}

.canvas-slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
}

.slide {
  flex: 0 0 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Šipky */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: white;
  border: none;
  font-size: 2em;
  cursor: pointer;
  z-index: 2;
}

.prev { left: 25px; }
.next { right: 25px; }

/* Galerie autorů */
.artist-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2%;
  margin: 2% auto;
  width: 90%;
}

.author-info {
    margin-left: 1.5vw;
}


/* vole, používejme relativní jednotky (em, rem..) vygoogli si to*/

.single-author{
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background-color: #ffffff; /* volitelné, tmavé pozadí jako na obrázku */
  padding: 0.5em;
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: 0.5em;
  color: #000000;
  cursor: pointer;
}

.single-author img {
  width: 30vh;
  height: 30vh;
  object-fit: cover;
  border-radius: 5px;
}

.list-authors {
  margin-left: 5vw;
  margin-right: 5vw;
}

.site-footer {
  background: black;
  color: white;
  padding: 2vh 3vw;
  margin-top: 10vh;
  
}

.site-footer a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
  display: inline-block;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 1.2em;
  margin-bottom: 20px;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.5vh 0;
}

.footer-left, .footer-center, .footer-right, .footer-rightright {
  flex: 1;
  width: 2vh;
}

.footer-left p, .footer-center p, .footer-right p, .footer-rightright p {
  margin: 0.1vh 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  margin-top: 20px;
}

.site-footer hr {
  border: none;
  border-top: 1px solid white;
  margin: 20px 0;
}

/*ARTIST HTML*/
.img-author {
  
  margin-top: 5vh;
  width: 20vw;
  height: 20vw;
  object-fit: cover;
  margin-right: 5vw;
  margin-bottom: 5vh;
  display: flex;
  border-radius: 2vh;
}


.description-author-area {
    display: flex;
}

.description-author-area2 {
  margin-left: 10%;  
  width: 100%;
}

.description-author-area3 {
  width: 50%;
  margin-left: 20%;
}

.readmore {
  color: blue;
  text-decoration: underline;
}

.readmore:hover {
  cursor: pointer
}

.name-of-artist {
  font-size: 4vw;
  margin-bottom: 10px;
  margin-top: 5vh;
  margin-right: 5vw;
  margin-bottom: 5vh;
  display: block;
}

.author-description-box {
    display: block;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-bottom: 5vh;
}


.splitter {
  width: 95%;
  height: 0.5vh;
  background-color: #000000; /* nebo jiná barva */
  margin: 2vh auto;
  border-radius: 2vh;
}



.description-author {
  /* background-color: lightgray; /* pro vizuální test */
  font-size: 1vw;
  text-align: top;
  color: #525252;
  margin-top: 5vh;
  margin-right: 2vh;
}


.art-collection-container, .art-pieces-container{
  display: flex;              /* obrázky vedle sebe */
  justify-content: space-between; /* rovnoměrně rozdělit */
  width: 100%;
  margin: 0 auto;       
  height: 70vh;
}

.art-collection-items {
  flex: 1;                    /* každý zabere stejnou šířku */           /* mezery mezi sloupci */
  text-align: center;         /* text na střed */
}

.art-collection-picture {
  width: 80%;
  height: 80%;               /* výška obrázku */
  margin-left: 10%;
  margin-top: 5%;
  padding: 8px;
}s

.art-collection-piece-name, .art-collection-piece-name {
  font-size: 1.8em;
  color: #333;
}

.art-collection-name-box {
  width: 100%;
  height: 15vh;
}

.art-collection-name {
 text-align: center;
 font-size: 10vh;
 padding-top: 5vh;
}

.art-collection-img, .art-pieces-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.mainHeader-points {
    color:#7c7c7c;
    font-size: 1.8em;
    margin-left: 4vh;
    text-decoration: none;
    width: 35%;
    transition: color 0.5s ease;

}

.mainHeader-points:hover {
    color:#000000;
}


.mainHeader-points1, .mainHeader-points2, .mainHeader-points3 {
  transition-duration: 1s;
  text-decoration: none;
  margin-left: 10vh;
}

.mainHeader-points1:hover, .mainHeader-points2:hover, .mainHeader-points3:hover {
  color: #000000;
}

#mainHeader {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255);
  padding: 1% 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  transition: top 0.5s ease;
  height: 13vh;
}

#mainHeader.hidden {
  top: -100%;
}

.mainHeader-title {
  font-family: Bodoni;
}

.contact-text-box{
  width: 30vw;
  margin-left: 42.5vw;
  
}



.contact-text {
    display: flex;
    flex-direction: column;   /* každá věta na nový řádek */
    justify-content: left;  /* svislé vycentrování */

    font-size: 3vh;
}

.about-us-title {
  text-align: center;
}

.about-us-text-box {
  width: 80%;
  margin-left: 10%;
}

.about-us-text {
  
}

#moreAuthorBio {display: none;} /*pro read more funkci xd*/

.hidden {
  display:none;
}