@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Marck+Script&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Cormorant+Unicase:wght@300;400;500;600;700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lobster&family=Lora:ital,wght@0,400..700;1,400..700&family=Marck+Script&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Pacifico&family=Pattaya&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Piazzolla:ital,opsz,wght@0,8..30,100..900;1,8..30,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
.merriweather-light {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-black {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: normal;
}

.merriweather-light-italic {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: italic;
}

.merriweather-regular-italic {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}

.merriweather-black-italic {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: italic;
}


:root{
   --bs-orange: #fd7e14;
   --bs-gold: #ffd700;
   --bs-yellow: #ffc107;
   --bs-yellow-rgb: 255, 193, 7;
   --yellow-rgb: 255, 238, 6;
   --warning: #ffc107;
   --bs-warning-text: #ffda6a;
   --indigo: #6610f2;
   --purple: #6f42c1;
   --geliotrop: #df73ff;
   --geliotrop-emphasis: #f3bcff;
   --pink: #e83e8c;
   --bright-magenta: #e83ee1;
   --red: #dc3545;
   --tomat: #ff6347;
   --coral: #ff7f50;
   --coral-rgb: 255, 127, 80;
   --yellow: #ffc107;
   --green: #28a745;
   --teal: #20c997;
   --cyan: #17a2b8;
   --white: #fff;
   --gray: #868e96;
   --gray-dark: #343a40;
   --primary: #007bff;
   --blue: #007bf0;
   --myblue: #388dfc;
   --light-blue: #00d9ff;
   --secondary: #3d1c16;
   --ford-brown: #3a2429;
   --ford-brown-rgb: 58, 36, 41;
   --cardoba-brown: #3a2429;
   --brown: #97898c;
   --success: #28a745;
   --info: #17a2b8;
   --seafoam-green: #00ffff;
   --danger: #dc3545;
   --danger-emphasis: #ea868f;
   --light: #f8f9fa;
   --dark: #343a40;
   --bs-gray-dark: #343a40;
   --bs-gray-100: #f8f9fa;
   --bs-gray-200: #e9ecef;
   --bs-gray-300: #dee2e6;
   --bs-gray-400: #ced4da;
   --bs-gray-500: #adb5bd;
   --bs-gray-600: #6c757d;
   --bs-gray-700: #495057;
   --bs-gray-800: #343a40;
   --bs-gray-900: #212529;
   --gradient-1: linear-gradient(to bottom right, #4f0600 0%,#7f0400 15%,#9b0104 29%,#f73639 46%,#ef6d56 65%,#d3b154 82%,#fff76d 100%);
   --gradient-2:linear-gradient(to bottom right, #fec5ff 0%,#f80ae1 54%,#e82890 68%,#fb955e 100%);
   --gradient-3:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
}

body {
    background: url('../img/bg1.jpg') 50%/100% 100% no-repeat fixed;
}

.data-input {
    border: 1px solid #ccc!important;
    margin: 0!important;
    display: inline-block!important;
    max-width: 236px!important;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    border-radius: 5px!important;
    text-align: center!important;
    height: 35px!important;
    outline: none!important;
    text-decoration: none!important;
    vertical-align: middle!important;
    font-size: 14px!important;
    width: 75px!important;
}

.select-month {
    padding: 0!important;
    font-size: 16px!important;
    border: 1px solid #ccc!important;
    margin: 0!important;
    display: inline-block!important;
    width: 105px!important;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    border-radius: 5px!important;
    text-align: center!important;
    height: 35px!important;
    outline: none!important;
    text-decoration: none!important;
    vertical-align: middle!important;
}


.birthday-submit {
    color: #fff!important;
    display: inline-block!important;
    padding: 0!important;
    width: 14em!important;
    height: 2.5em!important;
    line-height: 2.5em!important;
    background: linear-gradient(to bottom,  #9ba1aa 0%,#828c95 42%,#28343b 100%);
    border: 0 solid #5F6368!important;
    border-radius: 5px!important;
    vertical-align: middle!important;
    outline: none!important;
    text-decoration: none!important;
    font-size: 16px!important;
    transition: all .3s;
}
.birthday-submit:hover:not([disabled]) {
    background: linear-gradient(to bottom, #c4dded 0%, #638cbf 100%);
    border: 0 solid #5F6368 !important;
    border-radius: 5px !important;
    outline: none !important;
    text-decoration: none !important;
}
h1 {
    position: relative;
    font-family: "Merriweather", serif; /* Спільний шрифт */
    font-weight: bold; /* Спільна жирність */
    font-size: 56px; /* Спільний розмір */
    color: transparent; /* Градієнт перекриває текст */
    background: var(--gradient-1); /* Градієнт */
    -webkit-background-clip: text; /* Вирізаємо фон у тексті */
    background-clip: text;
    text-align: center; /* Центруємо текст */
    margin: 0; /* Прибираємо відступи */
}

h1::before {
    content: attr(data-text); /* Використовуємо той самий текст */
    position: absolute;
    top: 0; /* Вирівнюємо по висоті */
    left: 0; /* Вирівнюємо по ширині */
    width: 100%; /* Збіг ширини */
    height: 100%; /* Збіг висоти */
    font-family: "Merriweather", serif; /* Той самий шрифт */
    font-weight: bold; /* Та сама жирність */
    font-size: 56px; /* Той самий розмір */
    color: wheat; /* Білий колір тіні */
    z-index: -1; /* Розміщуємо позаду */
    text-align: center; /* Центруємо текст */
    margin: 0; /* Прибираємо відступи */
    pointer-events: none; /* Щоб не заважав взаємодії */
    transform: translate(-2px, 2px); /* Зміщення для тіні */
}

.book-card {

    margin-left: 10px;
    margin-right: 10px;
}

.container {
	display: flex;
	text-transform: uppercase;
	justify-content: center;
	align-items: center;
	text-align: center;
	perspective: 200px;
	width: 270px;
}
.book-img{
	transform: scale3d(1, 1, 1);
	transition: all 0.8s ease 0s;
	filter: drop-shadow(2px 2px 15px rgba(255, 255, 250, 0.7));
    width: 270px;
}
.book-img:hover {
	transform: scale3d(1.3, 1.3, 0.2);
	/* padding-top: 55px;
	width: 170px; */
}
.text-jus {
    text-align: justify; /* Робить текст розтягнутим по всій ширині */
    text-indent: 30px;   /* Встановлює відступ для першого рядка */
}
.time-code{
    color: rgb(62, 166, 255);

}


.digits{
    color: var(--vivid-red);
}
.header{
    color: var(--light-green-cyan);
}
/* Кастомізація пагінації */
.pagination .page-link {
    color: var(--bs-warning-text); /* Оранжевий колір тексту */
    border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; /* Оранжевий колір рамки */
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-warning-text); /* Оранжевий фон активної сторінки */
    border-color: rgba(var(--bs-warning-rgb)) !important; /* Оранжева рамка активної сторінки */
    color: var(--tomat); /* Білий текст */
}

.pagination .page-link:hover {
    background-color: var(--bs-warning);; /* Світліший оранжевий при наведенні */
    border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
    color: var(--tomat);
}

/* Неактивна кнопка пагінації */
.pagination .page-item.disabled .page-link {
    color: #6c757d; /* Сірий колір тексту */
    border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; /* Світло-сірий колір рамки */
}