/* Указываем box sizing */
*,
*::before,
*::after {
   box-sizing: border-box;
}

/* Убираем внутренние отступы */
ul[class],
ol[class] {
   padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
   margin: 0;
}

/* Выставляем основные настройки по-умолчанию для body */
body {
   min-height: 100vh;
   scroll-behavior: smooth;
   text-rendering: optimizeSpeed;
   line-height: 1.5;
}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
   list-style: none;
}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) {
   text-decoration-skip-ink: auto;
}

/* Упрощаем работу с изображениями */
img {
   max-width: 100%;
   height: auto;
   display: block;
}

/* Указываем понятную периодичность в потоке данных у article*/
article>*+* {
   margin-top: 1em;
}

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
   font: inherit;
}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
/* @media (prefers-reduced-motion: reduce) {
   * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
} */
@font-face {
   font-family: LobsterRegular;
   src: url(../fonts/Lobster-Regular.ttf);
   font-weight: normal;
   font-display: fallback;
}

body {
   display: grid;
   /* grid-gap: 1px; */
   grid-template:
      "header header header"100px
      /*10.438413361169102vw*/
      "nav nav nav"
      /*28.8px*/
      minmax(min-content, max-content)
      /**/
      "aside main section"auto
      /**/
      "footer footer footer"100px/max-content 3fr min-content;
   color: #cc3333;
   /*  background: #f5deb3;
   background: linear-gradient(90deg, #f2cd99 0%, #f7d6a1 30%, #f2cd99 70%); */
   /* background-image: linear-gradient(90deg, red 18.9%,blue 18.9%,blue 74.3%, red 74.3%); */
}

a {
   text-decoration: none;
}

header {
   grid-area: header;
   display: flex;
   justify-content: center;
   align-items: center;
   background: url(../img/c44a.gif) no-repeat left bottom, url(../img/l3a.gif) no-repeat right bottom, url(../img/c5.jpg) repeat-x;
   background-size:
      /*17.53653444676409vw*/
      auto,
      /*28.183716075156575vw*/
      auto, auto 100%;
}

header>span::after {
   content: "Всё о кошках";
   font: bold italic 55px
      /*5.741127348643007vw*/
      "LobsterRegular", arial, sans-serif;
   letter-spacing: .35rem;
   /* margin-left: -12.526096033402922vw */
   /*-120px*/
   ;
}

h1, h2 {
   font: bold italic 32px
      /*5.741127348643007vw*/
      "LobsterRegular", arial, sans-serif;
   letter-spacing: .12rem;
   text-align: center;
}

h2 {
   font-size: 24px;
   margin: 10px 0 10px 0;
}

h3 {
   text-align: center;
}

main {
   grid-area: main;
   text-indent: 15px;
   background: #FAE7B5;
}

main>article>div>p>img {
   border-radius: 5px;
   box-shadow: 5px 5px 6px #333333;
   float: left;
   margin: 10px 15px 5px 5px;
   width: 30%;
   min-width: 132.25px;
   display: block;
}

main>article>div>p,
main>article>div>ul,
main>article>div>ul>li,
main>article>div>dl,
main>article>div>dl>dt,
main>article>div>dl>dd {
   display: block;
   text-align: justify;
   padding: 0;
   margin: 5px;
   /* font-family: "Comic Sans MS", sans-serif; */
   font-family: 'Trebuchet MS', sans-serif;
   font-size: 1.04em;
}

main>article>div>dl>dt {
   font-weight: bold;
   text-align: center;
}

main p a, main li a {
   color: #b22222;
   font-weight: 550;
   transition: all 1s ease 0s;
   font-size: 1.04em;
}

main>article nav {
   margin: 5px;
}

main>article>nav>ul {
   display: flex;
   padding: 0;
   justify-content: space-evenly;
   text-indent: 0;
   list-style: none;
}

main>article>nav>ul>li>a {
   font-family: Verdana, Geneva, sans-serif;
   color: #b22222;
   font-weight: bold;
   font-size: 0.8em;
   text-shadow: 0px 1px #000;
   animation: shadow 2.5s infinite ease-in;
   transition: all 1s ease 0s;
}

main>article>nav>ul>li>a:hover, main p a:hover, main li a:hover {
   color: #daa520;
   text-shadow: 0px 1px #fff;
}

@keyframes shadow {
   from {
      text-shadow: 0px 0px 4px #000;
   }

   50% {
      text-shadow: 0 0 20px #000;
   }

   to {
      text-shadow: 0 0 4px #000;
   }
}

@keyframes shadow {
   from {
      text-shadow: 0px 0px 4px #000;
   }

   50% {
      text-shadow: 0 0 20px #000;
   }

   to {
      text-shadow: 0 0 4px #000;
   }
}

/*###### РАЗРАБОТКА ПОРОДЫ КОШЕК, ОКРАС КОШЕК, ВОПРОСЫ ПО ПИТАНИЮ ###############*/

main>.porody div, main .okras, main>.voprosy div {
   display: flex;
   flex-wrap: wrap;
   place-content: center;
   grid-gap: 7px;
   padding-bottom: 5px;
   flex-basis: 100%;
}

main>.porody figure, main .okras figure, main>.voprosy figure {
   display: flex;
   flex-direction: column;
   flex-basis: 135px;
   height: 135px;
   background: #f0ebd9;
   grid-gap: 7px;
   padding: 7px;
   border-radius: 5px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px 0 #555;
   transition: 0.5s;
}

main .okras figure {
   flex-basis: 135x;
   height: 135x;
}

main>.voprosy figure {
   flex-basis: 146px;
   height: 146px;
}

main>.porody figure:hover, main .okras figure:hover, main>.voprosy figure:hover {
   box-shadow: 0 0 15px 0 #000;
   transform: scale(1.05);
}

main>.porody figure img, main .okras figure img, main>.voprosy figure img {
   border-radius: 5px 5px 0 0;
}

main>.porody figure>figcaption, main .okras figure>figcaption, main>.voprosy figure>figcaption {
   display: flex;
   place-content: center;
   flex-wrap: wrap;
   flex-grow: 1;
   background: #ccc;
   color: hsl(0, 0%, 50%);
   font-family: arial, sans-serif;
   font-weight: bold;
   font-size: 0.75em;
   border-radius: 0 0 5px 5px;
   text-align: center;
   line-height: 0.99;
   padding: 0 auto;
   text-indent: 0;
}

/*########### КОНЕЦ РАЗРАБОТКИ ПОРОДЫ КОШЕК, ОКРАС КОШЕК, ВОПРОСЫ ПО ПИТАНИЮ #######################*/

/*############ РАЗРАБОТКА ФОТОГАЛЕРЕИ #################*/

.fotogalereya {
   display: flex;
   flex-wrap: wrap;
   place-content: center;
   padding-bottom: 5px;
   flex-basis: 100%;
   padding: 10px 0 0 0;
}

.fotogalereya figure {
   display: flex;
   flex-direction: column;
   flex-basis: 20%;
   min-width: 159px;
   height: auto;
   background: #f0ebd9;
   padding: 3px;
   border-radius: 5px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px 0 #555;
   transition: 0.5s;
}

/*############### КРНЕЦ РАЗРАБОТКИ ФОТОГАЛЕРЕИ*/

.uptolike-buttons {
   display: flex;
   justify-content: center;
}

/*ГОРИЗОНТАЛЬНОЕ МЕНЮ*/

body>nav {
   grid-area: nav;
   display: flex;
   place-content: center;
   background: linear-gradient(0deg, #f15c60 0%, #b01c20 100%);
}

body>nav ul {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   flex-wrap: wrap;
   place-content: center;
}

body>nav ul li a, .current {
   width: 160px;
}

body>nav a {
   display: flex;
   color: #fff;
   background-image: radial-gradient(ellipse at center, #b01c20 0%, #f15c60 70%, #b01c20 100%);
   padding: 2px 10px;
   margin: 1px;
   place-content: center;
   white-space: nowrap;
   text-shadow: 0px 1px black;
   transition: all 1s ease 0s;
}

body>nav a:hover {
   color: #000;
   text-shadow: 0px 1px #fff;
   background: radial-gradient(ellipse at center, #f15c60 0%, #b01c20 70%, #f15c60 100%);
}

.current {
   display: flex;
   padding: 2px 10px;
   margin: 1px;
   text-shadow: 0px 1px white;
   place-content: center;
   background: radial-gradient(ellipse at center, #f15c60 0%, #b01c20 70%, #f15c60 100%);
   animation: warning 17s infinite ease-in;
   white-space: nowrap;
}

.anim {
   animation: warning 15s infinite ease-in;
}

/*АНИМАЦИЯ ГОРИЗОНТАЛЬНОГО МЕНЮ*/
@keyframes warning {
   0% {
      background: radial-gradient(ellipse at center, #b01c20 0%, #f15c60 70%, #b01c20 100%);
      margin: 1px;
      color: #fff;
      text-shadow: 0px 1px #000;
   }

   50% {
      background: radial-gradient(ellipse at center, #f15c60 0%, #b01c20 70%, #f15c60 100%);
      color: #000;
      text-shadow: 0 1px #fff;
   }

   100% {
      background: radial-gradient(ellipse at center, #b01c20 0%, #f15c60 70%, #b01c20 100%);
      margin: 1px;
      color: #fff;
      text-shadow: 0px 1px #000;
   }
}

/*КОНЕЦ АНИМАЦИИ ГОРИЗОНТАЛЬНОГО МЕНЮ*/


aside {
   background-image: linear-gradient(90deg, #f2cd99 50%, #FAE7B5 100%);
   grid-area: aside;
   display: grid;
   grid-template-columns: repeat(2, 7.8125vw
         /*150px*/
      );
   grid-template-rows: repeat(3, auto);
   grid-gap: 10px;
   /* justify-content: center;
   align-content: start; */
   place-content: start center;
   padding: 10px;
}


/*Оформление ASIDE*/
.Qcontainer {
   height: 11.71875vw;
   /*225px*/
   width: 100%;
   position: relative;
   perspective: 1200px;
}



.book {
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
   transition: 2s;
}

.Qcontainer:hover .book {
   transform: rotateY(180deg);
}

.face {
   position: absolute;
   backface-visibility: hidden;
}

.back {
   width: 100%;
   height: 100%;
   transform: rotateY(180deg);
   background: #d22222;
   color: #fff;
   font-size: 1.2vw;
   border-radius: 5px;
}

.back, p {
   display: flex;
   flex-wrap: wrap;
   place-content: center;
   text-align: center;
}

.back a {
   color: #fff;
}

img {
   border-radius: 5px;
}

/*Конец оформления ASIDE*/

/*РАЗРАБОТКА ВИДЕО*/

.video {
   background-image: linear-gradient(90deg, #FAE7B5 0%, #ffe4b5 100%);
   grid-area: section;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(245px, auto));
   place-content: start center;
   /* grid-gap: 10px; */
}

iframe {
   width: 100%;
   height: auto;
   border-radius: 5px 5px 0 0;
   border: 0;
}

.video>figure {
   display: flex;
   flex-direction: column;
   background: #f0ebd9;
   /* width: 100%; */
   padding: 10px;
   margin: 10px 10px 0 10px;
   border-radius: 5px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px 0 #555;
   transition: 0.5s;
}

.video>figure:hover {
   box-shadow: 0 0 30px 0 #000;
   transform: scale(1.05);
}

.video>figure>figcaption {
   display: flex;
   place-content: center;
   flex-wrap: wrap;
   flex-grow: 1;
   margin-top: 7px;
   background: #ccc;
   color: gray;
   text-align: center;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-weight: bold;
   font-size: 0.85em;
   border-radius: 0 0 5px 5px;
}

div.video {
   padding-bottom: 5px;
}

/*КОНЕЦ РАЗРАБОТКИ ВИДЕО*/

footer {
   grid-area: footer;
   background: url(../img/c5.jpg) repeat-x;
}

footer>span::after {
   content: "Copyright © 2026";
   color: #fff;
   background: linear-gradient(0deg, #b01c20 0%, #f15c60 100%);
   font: bold 0.9375em verdana, arial, sans-serif;
   padding: 3px;
   text-align: center;
   display: block;
}

footer>nav>ul {
   list-style: none;
   display: flex;
   justify-content: space-evenly;
   margin: 23.5px;
   padding: 0;
}

footer a {
   color: #cc3333;
   font-weight: bold;
   font-size: 1.2em;
   /* animation: blink_shadow 3.5s infinite ease-in; */
}



@keyframes blink_shadow {
   0% {
      text-shadow: 0px 0px 4px #000;
   }

   50% {
      text-shadow: 0 0 40px #000;
   }

   100% {
      text-shadow: 0 0 4px #000;
   }
}



/*Медиа запросы*/
@media screen and (max-width:1536px) {
   .fotogalereya figure {
      display: flex;
      flex-basis: 33.3333%;
   }
}

@media screen and (max-width:1024px

   /* 939px */
) {
   header {
      background-size: 17.53653444676409vw auto, 28.183716075156575vw auto, auto 100%;
   }

   header>span::after {
      font-size: 5.741127348643007vw;
      margin-left: -12.526096033402922vw
   }

   body {
      grid-template:
         " header header"10.438413361169102vw
         /*100px*/
         " nav nav"minmax(min-content, max-content)
         /*28.8px*/
         " main section"auto
         /**/
         " aside aside"min-content
         /**/
         " footer footer"100px/4fr 1fr;
   }

   main {
      padding-left: 4px;
   }

   aside {

      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(73.17px, min-content));
      place-content: center;
      grid-template-rows: repeat(1, auto);
      justify-content: space-evenly;
   }

   aside, .video {
      background: #FAE7B5;
   }

   .Qcontainer {
      height: 109.8px
         /*225px*/
      ;
      width: 73.17px;
   }

   .back {
      font-size: 80%;
   }

   h1 {
      font-size: 28px;
   }

   h2 {
      font-size: 20px;
   }
}

@media screen and (max-width:768px) {
   body {
      grid-template:
         "header"10.438413361169102vw
         /*100px*/
         "nav"minmax(min-content, max-content) "main"auto
         /*28.8px*/

         /**/
         "section"min-content
         /**/
         "aside"max-content
         /*max-content*/
         "footer"100px/1fr;
   }

   aside {
      display: flex;
      flex-wrap: wrap;
   }

   aside, .video {
      background: #FAE7B5;
      ;
   }

   .video>figure {
      margin: 10px;
   }

   main {
      padding-left: 4px;
   }

   footer a {
      font-size: 1.1em;
   }

   h1 {
      font-size: 24px;
   }
}

@media screen and (max-width:480px) {
   .fotogalereya figure {
      display: flex;
      flex-basis: 50%;
   }
}

@media screen and (min-width:320px) and (max-width:425px) {
   body>nav ul {
      display: grid;
      grid-template-columns: repeat(2, 155px);
      margin-right: 2.5px;
      grid-gap: 2.5px;
   }

   body>nav ul li a, .current {
      width: 155px;
   }

   main {
      padding-left: 0;
   }

   main>article>div>p>img {
      width: 96%;
   }
}

/*УВЕДОМЛЕНИЕ О ЯНДЕКС МЕТРИКЕ*/

#cookie_notification {
   display: none;
   justify-content: center;
   align-items: flex-end;
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 23px;
   background: #b22222;
   z-index: 1000;
   color: white;
}

#cookie_notification p {
   margin: 0;
   margin-right: 10px;
   font-size: 0.85rem;
   text-align: center;
}

#cookie_notification p a {
   color: hsl(56, 100%, 50%)
}

@media (min-width: 576px) {
   #cookie_notification.show {
      display: flex;
   }

}

@media (max-width: 575px) {
   #cookie_notification.show {
      display: block;
      text-align: center;
   }

}