/* @import 'reset-css'; */


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}


body {
  /* background: #ffd6ea; */
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: 'Crimson Pro', serif;
  font-size: 18px; 
  font-style: italic;
} 

.kot {
  width: 30%;
  mix-blend-mode: multiply;
  opacity: 0.8;
}

/* abbr {
  font-weight: bold;
  color: grey;
  text-decoration-line: none;
} */

.name {
  font-size: 22px;
  font-family: 'Playfair Display', serif;
}

.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
font-size: 15px;
/* font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
/* font-weight: bold; */
color: rgb(0, 0, 0);
/* background: #ffd6ea; */
position: relative;
z-index: 1;
}



.text-tarot p {
  margin-bottom: 24px; 
}

.text-tarot {
  padding: 5px;
  font-size: larger;
  line-height: 1.2;
  max-width: 600px;
  margin: 0;
  padding: 20px;
  padding-bottom: 20px;
  font-style: normal;
  text-align: left;  
}
.text-tarot .first-line {
   display: block;
    margin-bottom: 7.5px;

}


.text-box {
  padding: 5px;
  font-size: larger;
  line-height: 1.1;
  max-width: 600px;
  margin: 0;
  padding: 20px;
  padding-bottom: 20px;
}
.first-text-box {
 padding-top: 40px;
  font-size: larger;
  line-height: 1.1;
  max-width: 600px;
  margin: 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.last-text-box {
 padding-top: 20px;
  font-size: larger;
  line-height: 1.1;
  max-width: 600px;
  margin: 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 65px;
}

 .text-box .first-line {
    display: block;
    margin-bottom: 7.5px;
  }

.centered-text {
  display: flex;
  justify-content: center; /* poziomo */
  align-items: center;     /* pionowo */
  height: 100vh;           /* wysokość na całą stronę */
  text-align: left;      
  flex-direction: column;
}

.centered-text-info {
  display: flex;
  align-items: center;    
  height: 100vh;           
  text-align: justify;      
  flex-direction: column;
  font-style: normal;
}

.hello {
 padding: 20px;
 text-align: center;
 font-size: x-large;
} 

/* span.bold {
  font-weight: bold;
  display: inline;
} */

.text-group {
      display: flex;
      flex-direction: column; /* ustawia wyrazy jeden pod drugim */
      gap: 0.5rem;
      text-align: left;
      font-size: 20px;
      font-family: "Century Expanded";
    }

a {
 color: black;
text-decoration: none;
 /* z-index: 10; */
}

body.info-page a:link,
body.info-page a:visited,
body.info-page a:hover,
body.info-page a:focus,
body.info-page a:active {
  color: gray !important;
  background-color: #f7e1ec !important;
  text-decoration: none !important;
}

body.info-page a:hover,
body.info-page a:focus,
body.info-page a:active {
  color: black !important;
}

.black-arrow {
  color: black;
}

.background-black a {
  background: #f7e1ec;
  color: grey;
}

/* a:visited { */
  /* color: rgb(2, 2, 2); */
/* } */


a:hover {
  color: black;
  background: #f7e1ec;
}

a:active {
  color: grey;
}

.reverse {
  color: grey;
  text-decoration: none;
}

.reverse-black {
  color: rgb(20, 20, 20);
}

.back {
font-size: x-large;
font-family: 'Playfair Display', serif;
/* font-style: italic; */
/* height: 75%;
justify-content: right;
padding : 20px; */
padding-top: 9px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 10px;
}

.back_reverse {
font-size: x-large;
font-family: 'Playfair Display', serif;
/* font-style: italic; */
height: 75%;
justify-content: right;
padding: 20px;
color:#f7e1ec;
}

.back-black {
  color:#f7e1ec;
  background-color: rgb(20, 20, 20);
  padding: 10px;
} 


footer {
display: flex;
font-size: x-large;
font-family: 'Playfair Display', serif;
/* font-style: italic; */
justify-content: space-between;
padding: 10px 20px;
bottom: 0;
left: 0;
width: 100%;
position: fixed;
z-index: 1;
align-items: flex-end;

}

  .copy {
    font-size: 14px;
    color:rgb(20, 20, 20);
        padding-bottom: 5.1px;
        font-family: 'Playfair Display', serif;
  }

  .index {
    font-size: 14px;
    color:rgb(20, 20, 20);
        padding-bottom: 5.1px;
        font-family: 'Playfair Display', serif;
    justify-content:right;
  }
.copy-black {
  font-size: 12px;
  color: #f7e1ec;
  padding-bottom: 5.1px;
  font-family: 'Playfair Display', serif;
}

.pink {
  color: rgb(20, 20, 20);
  background: #f7e1ec;
  display: inline; /* czy potrzebne? */
}

.color {
  color: grey;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.background-black {
  background: rgb(20, 20, 20);
  color:#f7e1ec;

}

.background-pink {
  background: #ffd6ea;
}


/* flowers *//* flowers *//* flowers *//* flowers *//* flowers */

.flower-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.flower {
 position: absolute;
 font-size: 0.5rem;
 color: #f7e1ec;
 opacity: 0.5;
 animation: float 6s ease-in-out infinite alternate;
 opacity: 1 !important;
 background: rgb(20, 20, 20) !important;
 border: 2px solid black !important;
 z-index: 1000 !important;
}

.flower_reverse{
 position: absolute;
 font-size: 0.5rem;
 color: rgb(20, 20, 20);
 opacity: 0.5;
 animation: float 6s ease-in-out infinite alternate;
 opacity: 1 !important;
 background: #f7e1ec !important;
 border: 2px solid #f7e1ec !important;
 z-index: 1000 !important;
}


.flower_pink{
 position: absolute;
 font-size: 0.5rem;
 color: rgb(20, 20, 20);
 opacity: 0.5;
 animation: float 6s ease-in-out infinite alternate;
 opacity: 1 !important;
 z-index: 10000;
 mix-blend-mode: multiply;
}

.flower-0 {
 position: absolute;
 font-size: 0.5rem;
 color: rgb(20, 20, 20);
 opacity: 0.5;
 animation: float 6s ease-in-out infinite alternate;
 opacity: 1 !important;
 z-index: 1000 !important;
}


@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(-10px) rotate(180deg);
  }
}

/* flowers *//* flowers *//* flowers *//* flowers *//* flowers */






/* przewijanie w poziomie */

.no-scroll {
  overflow: hidden;
}

.scroll-poziom {
  overflow-x: scroll; 
  overflow-y: hidden; 
}

.scroll-poziom a{
  color: rgb(20, 20, 20);
}

.img { 
  /* width:80%; */
  max-width: 100%;
  height: auto;
  padding: 10px;
  padding-bottom: 10px;
  display: block;
  box-sizing: border-box;  
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  max-width: max-content;
  box-sizing: border-box;
  padding: 10px;

}

@media (max-width: 768px) {

  .scroll-poziom {
  overflow-x: hidden; 
  overflow-y: scroll; 
  }
  .flex-container {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
  }
}

  @media (max-width: 768px) {
    .img {
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 15px;
    }

    .opis {
      padding-bottom: 20px;
    }

      .opis-last {
    padding-bottom: 70px;

  }
.text-tarot {
    font-size: 21.6px;
    padding-left: 60px;
    padding-right: 60px;
    }

  }

  @media (min-width: 768px) {
    .flex-container {
    height: 100vh;
    width: max-content;
    flex-direction: row;}
    .img {
       height: 85vh;
       width: auto;
       max-width: none;
       display: block;
       padding-bottom: 20px;
       padding-top: 10px;
       /* margin-top: 10px; */
    }
    .opis {
      padding-bottom: 55px;
    }

    .text-tarot {
    padding-left: 40px;
    padding-right: 40px;
    font-size: 18px;
    }

    .flex-container .text-tarot {
  flex: 1 1 300px;
  min-width: 500px;
  max-width: 400px;
}

  }


  .opis {
    min-height: 2.2em;
     padding-left: 20px;
     padding-right: 20px;
     font-size: smaller;
     font-family: 'Crimson Pro', serif;
     font-style: normal;
     color: #ACACA5;
     text-align: center;
     line-height: 1.2;
     flex-shrink: 0;
  scroll-snap-align: center;
     
  }

  /* .img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2; 
} */


  .slowo-klucz {
    color:#3F3E3E;
    display:inline-block;
  }


  /* shop */

  label img {
  border: 5px solid transparent;
  cursor: pointer;
  transition: border 0.2s ease;
}

label input:checked + img {
  border: 5px solid #3F3E3E;
}

label input {
  display: none;
}


h2 {
  font-style: normal;
}


.shop {
  padding: 20px;
  padding-top: 40px;
  padding-bottom: 80px;
  font-style: normal;
  text-align: center;
  color: rgb(20, 20, 20);
  line-height: 1.5;
  overflow: auto;

}

.shop img {
  padding: 2px; 
  box-sizing: border-box; 
}

.shop .img-a5 {
width: 120px;
height: 166px;
}

.img-a5-poziom {
  height: 120px;
}

.sito-big{
  width: 200px;
}

.img-a4 {
  width: 160px;
}

.shop-cena {
  color: rgb(20, 20, 20);
  font-size: 14px;
}

.image-grid { 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  padding: 5px;
  justify-content: center;
  margin: auto;
}

.zawieszka {
  width: 95px;
  height: 155px;
}

.zawieszka_0 {
  height: 155px;

}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
align-items: center;
}

.row-send {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
align-items: center;
padding-bottom: 80px;
}

.img-center {
  margin: auto;
}

.caption {
  align-items: left;
  margin-bottom: 10px;
  padding-top: 15px;
  font-size: larger;
}


/* obrazki */

.img-desktop {
  display: block !important;
}
.img-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .img-desktop {
    display: none !important;
  }
  .img-mobile {
    display: block !important;
  }

  .no-padding {
    padding-top: 0% !important;
    padding-bottom: 0% !important;
  }

  .no-top {
    padding-top: 0% !important;
  }
  .no-bottom {
    padding-bottom: 0% !important;
  }

  .top-40 {
    padding-top: 40px !important;
  }
}

.total {
  padding-top: 20px;
}

input[type="radio"] {
  display: inline-block;}

input[type="email"],
input[type="text"],
input[type="tel"],
textarea {
  width: 100%;
  max-width: 500px;
}

#cartBox {
  position: fixed;
  top: 111px;       
  right: -7px;    
  background:rgb(20, 20, 20);
  padding: 10px 30px 10px 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  font-size: 22px;
  z-index: 9999;
  color: grey;
  font-style: normal;
  font-family: 'Playfair Display', serif;
  text-decoration: none;

}
.flex-container img {
  flex-shrink: 0;
  scroll-snap-align: center;
}

.plain{
  font-family: 'Crimson Pro', serif;
  font-style: normal;
  font-weight: lighter;
}

/* lamanie tekstu */

.desktop-only {
  display: inline;
  text-align: justify;
}
.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: inline;
  }

  .text-tarot {
    font-size: 18px;
  }
}


@media (min-width:768px) {

 .img-last {
 padding-right: 40px;
 }

 .flex-container {
  padding-left: 15px;
 }
}