* {
    margin: 0px;
    padding: 0px;
    
}


@font-face {
    font-family: 'ComicSansMS'; /* Имя шрифта, которое вы будете использовать в CSS */
    src: url('../fonts/ComicSansMS.ttf') format('truetype'); /* Путь к файлу шрифта */
    
}


body {
    background-color: #0d0b0c;
cursor: url('../cursor/cursor-default.cur'), auto; 
font-family: 'ComicSansMS';
}

a {
    text-decoration: none;
    cursor: url('../cursor/cursor-hover.cur'), auto;
}



/* Стили для магазина - мобильная версия */
@media (max-width: 1279px) {
    .store-container {
        padding-top: 10px;
    }
    
    .store-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0 -6px;
        margin-right: -12px;
        margin-left: 0px;
        align-items: stretch;
    }
    
    .store-card {
        width: calc(50% - 12px);
        display: flex;
        flex-direction: column;
    }
    
    .store-image {
        width: 100%;
        background-color: #000;
        border-radius: 0px;
        overflow: hidden;
        flex-shrink: 0;
        position: relative; /* Добавляем относительное позиционирование */
        height: 0;
        padding-top: 100%; /* Создаем квадрат через padding-top */
    }
    
    .store-image img {
        position: absolute; /* Абсолютное позиционирование внутри контейнера */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Занимаем всю высоту контейнера */
        object-fit: cover;
        display: block;
    }
    
    .store-info {
        padding: 6px 4px 0 4px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        min-height: 150px; /* Фиксируем минимальную высоту для текстового блока */
    }
    
    .store-price {
        text-align: center;
        font-family: 'ComicSansMS';
        font-size: 18px;
        font-weight: 800;
        color: #f39190;
        line-height: 1.1;
        margin: 0;
        min-height: 22px;
    }
    
    .store-title {
        text-align: center;
        margin-top: 3px;
        font-family: 'ComicSansMS';
        font-size: 16px;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.2;
        min-height: 40px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding: 0 2px;
    }
    
    .store-description {
        text-align: center;
        margin-top: 3px;
        font-family: 'ComicSansMS';
        font-size: 13px;
        font-weight: 400;
        color: #888888;
        line-height: 1.3;
        min-height: 52px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        padding: 0 2px;
        flex-grow: 1;
    }
    
    .store-button {
        width: 100%;
        height: 46px;
        background-color: #f39190;
        color: #000000;
        border: none;
        border-radius: 0px;
        font-family: 'ComicSansMS';
        font-size: 16px;
        font-weight: 600;
        margin-top: 5px;
        cursor: url('../cursor/cursor-hover.cur'), auto;
        transition: background-color 0.3s;
        flex-shrink: 0;
    }
    
    .store-button:hover {
        background-color: #e58281;
    }
}

/* Стили для магазина - ноутбуки */
@media (min-width: 1280px) and (max-width: 1366px) {
    .store-container {
        padding-top: 10px;
    }
    
    .store-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0 -6px;
        margin-right: -14px;
        margin-left: 0px;
    }
    
    .store-card {
        width: calc(25% - 12px); /* 4 карточки в ряд */
    }
    
    .store-image {
        width: 100%;
        background-color: #000;
        border-radius: 0px;
        overflow: hidden;
        transition: transform 0.3s;
    }
    
    .store-image:hover {
        transform: scale(1.02);
    }
    
    .store-image img {
        width: 100%;
        height: auto;
        display: block;
        aspect-ratio: 1/1; /* Квадратное изображение */
        object-fit: cover;
    }
    
    .store-info {
        padding: 8px 6px 0 6px;
    }
    
    .store-price {
        text-align: center;
        font-family: 'ComicSansMS';
        font-size: 20px;
        font-weight: 800;
        color: #f39190;
        line-height: 1.1;
        margin: 0;
    }
    
    .store-title {
        text-align: center;
        margin-top: 4px;
        font-family: 'ComicSansMS';
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.2;
        min-height: 44px;
        padding: 0 4px;
    }
    
    .store-description {
        text-align: center;
        margin-top: 4px;
        font-family: 'ComicSansMS';
        font-size: 14px;
        font-weight: 400;
        color: #888888; /* Более темный серый цвет */
        line-height: 1.3;
        min-height: 74px;
        padding: 0 4px;
    }
    
    .store-button {
        width: 100%;
        height: 46px;
        background-color: #f39190;
        color: #000000;
        border: none;
        border-radius: 0px;
        font-family: 'ComicSansMS';
        font-size: 16px;
        font-weight: 600;
        margin-top: 6px;
        cursor: url('../cursor/cursor-hover.cur'), auto;
        transition: all 0.3s;
    }
    
    .store-button:hover {
        background-color: #e58281;
    }
}

/* Стили для магазина - компьютерная версия */
@media (min-width: 1367px) {
    .store-container {
        padding-top: 10px;
    }
    
    .store-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0 -6px;
        margin-right: -12px;
        margin-left: 0px;
    }
    
    .store-card {
        width: calc(20% - 12px); /* 5 карточек в ряд */
    }
    
    .store-image {
        width: 100%;
        background-color: #000;
        border-radius: 0px;
        overflow: hidden;
        transition: transform 0.3s;
    }
    
    .store-image:hover {
        transform: scale(1.03);
    }
    
    .store-image img {
        width: 100%;
        height: auto;
        display: block;
        aspect-ratio: 1/1; /* Квадратное изображение */
        object-fit: cover;
    }
    
    .store-info {
        padding: 10px 8px 0 8px;
    }
    
    .store-price {
        text-align: center;
        font-family: 'ComicSansMS';
        font-size: 22px;
        font-weight: 800;
        color: #f39190;
        line-height: 1.1;
        margin: 0;
    }
    
    .store-title {
        text-align: center;
        margin-top: 5px;
        font-family: 'ComicSansMS';
        font-size: 20px;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.2;
        min-height: 48px;
        padding: 0 6px;
    }
    
    .store-description {
        text-align: center;
        margin-top: 5px;
        font-family: 'ComicSansMS';
        font-size: 16px;
        font-weight: 400;
        color: #888888; /* Более темный серый цвет */
        line-height: 1.4;
        min-height: 90px;
        padding: 0 6px;
    }
    
    .store-button {
        width: 100%;
        height: 46px;
        background-color: #f39190;
        color: #000000;
        border: none;
        border-radius: 0px;
        font-family: 'ComicSansMS';
        font-size: 16px;
        font-weight: 600;
        margin-top: 8px;
        cursor: url('../cursor/cursor-hover.cur'), auto;
        transition: all 0.3s;
    }
    
    .store-button:hover {
        background-color: #e58281;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }
}













/*Мобильная версия*/
@media (max-width: 1279px) {
 
.header {
width: 100%;
height: 65px;
background-color: #000000;
}

#logo {

width: 117px;
  height: 58px;
}

.logo {
position: relative;
width: 117px;
height: 58px;
top: 3px;
left: 35px;
}

.mobileMenu {
  display: block;
}

.mobileMenu:hover .sidebar {
  display: block;
}


.line {
width: 100%;
height: 3px;
background-color: #f39190;


}

.line2 {
width: 100%;
height: 3px;
background-color: #f39190;
display: none;


}



.master {


}

.sidebar {
display: none;

width: 84%;
height: 276px;
padding-left: 8%;
padding-right: 8%;

background-color: #0d0b0c;


}

#vk_groups {
  display: none;
}

.menuButtonTap {
font-family: 'ComicSansMS';
font-size: 20px;
text-align: center;
font-weight: 600;
padding-top: 4px;
margin-top: 11px;
margin-bottom: 0px;
width: 100%;
height: 36px;
background-color: #f39190;
color: #000000; 
}

.menuButtonTop {
text-align: center;

padding-top: 6px;
font-family: 'ComicSansMS';
font-size: 20px;
margin-top: 24px;
margin-bottom: 0px;
width: 100%;
height: 34px;
background-color: #000000;
color: #FFFFFF; 


}

.menuButtonTop:hover {
text-align: center;

padding-top: 6px;
margin-top: 24px;
margin-bottom: 0px;
width: 100%;
height: 34px;
box-shadow: inset 0 0 0 1px #f39190;
color: #FFFFFF;   



}

.menuButtonCenter {
text-align: center;

padding-top: 6px;
font-family: 'ComicSansMS';
font-size: 20px;
margin-top: 11px;
margin-bottom: 0px;
width: 100%;
height: 36px;
background-color: #000000;
color: #FFFFFF; 
}

.menuButtonCenter:hover {
text-align: center;  

padding-top: 6px;
margin-top: 11px;
margin-bottom: 0px;
width: 100%;
height: 36px;
box-shadow: inset 0 0 0 1px #f39190;
color: #FFFFFF;   

}

.menuButtonBottom {
text-align: center;  

padding-top: 6px;
font-family: 'ComicSansMS';
font-size: 20px;
margin-top: 11px;
margin-bottom: 15px;
width: 100%;
height: 36px;
background-color: #000000;
color: #FFFFFF; 
}

.menuButtonBottom:hover {
text-align: center;  

padding-top: 6px;
margin-top: 11px;
margin-bottom: 15px;
width: 100%;
height: 36px;
box-shadow: inset 0 0 0 1px #f39190;
color: #FFFFFF;   
}

.paw_tap {
width: 41px;
height: 41px;
position: relative;
top: 4px;
right: 12px;  
float: right;
margin-left: -45px;
}










.content {
padding-top: 10px;
padding-left: 14px;
padding-right: 14px;
color: #FFFFFF;
background-color: #111111;



 


}


.date {
position: relative;
top: 7px;

margin-left: 6px;
color: #ffffff;
font-weight: bold;
font-size: 14px;
}

.likeNum {
width: 25px; /* Ширина блока */
            height: 25px; /* Высота блока */
 position: relative;
        top: -13px;
        left: calc(100% - 70px); 
        color: #f39190;
        font-weight: bold;
        font-size: 14px;
}

.like {
font-weight: bold;

            width: 20px; /* Ширина блока */
            height: 20px; /* Высота блока */
            background-image: url('../img/like_mobile.png'); /* Путь к изображению */
            background-size: cover; /* Масштабирование изображения */
            
            background-repeat: no-repeat; /* Запрет повторения изображения */
        position: relative;
        top: -38px;
        left: calc(100% - 25px);


        
            
       

        
            background-size: 100% 100%; /* Установка конкретного размера */
  cursor: url('../cursor/cursor-hover.cur'), auto;     

}


.like:active {
            background-image: url('../img/like_tap.png'); /* Путь к изображению */
            cursor: url('../cursor/cursor-hover.cur'), auto; 
        }









#lll {
    cursor: url('../cursor/cursor-hover.cur'), auto;
  display: block;
  position: relative;
  top: 0px;
  margin-bottom: 0px;
  width: 100%; height: 36px; background-color: #000000; position: relative; top: 0px; margin-bottom: 0px; 
}
.grid-item:hover .imgGallery {
  background-color: #f78f8b; /* Цвет наложения */
            opacity: 0.6;
}






.grid {
            display: flex;
            flex-wrap: wrap;
            margin-left: 0px;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-right: -10px;

        }
        .grid-item {
            width: 50%; /* Устанавливаем ширину в 25% для 4 столбцов */
            box-sizing: border-box; /* Учитываем отступы и границы в ширину */
            padding-right: 10px; /* Убираем отступы */
            
            margin-bottom: 8px;
        }
        .imgGallery {
            width: 100%; /* Изображения будут занимать всю ширину родительского элемента */
            height: auto; /* Сохраняем пропорции изображения */
            display: block; /* Убираем отступы под изображением */
            margin: 0; /* Убираем отступы у изображения */
            cursor: url('../cursor/cursor-hover.cur'), auto;
        }



 .imgContact {
display: none;
} 
.pContactPrivet {
display: none;
}  

.contactButton {


font-family: 'ComicSansMS';
font-size: 22px;

width: 61.5%;
height: 42px;
background-color: #000000;
color: #FFFFFF; 
border: none;


}


.footer {
width: 100%;
height: 55px;
background-color: #f39190;
text-align: center;
color: #ffffff;
line-height: 55px;
} 




/* Стили для комиксов - мобильная версия */
.comics-container {
    padding-top: 10px;
}

.comics-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 -6px;
    margin-right: -12px;
    margin-left: 0px;
}

.comics-card {
    width: calc(50% - 12px);
    
    transition: transform 0.2s ease;
}



.comics-card:hover {
    transform: translateY(-5px);
}

.comics-image {
    width: 100%;
    background-color: #000;
    border-radius: 0px;
    overflow: hidden;
}

.comics-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3/4; /* Вертикальный прямоугольник */
    object-fit: cover;
}

.comics-button {
    width: 100%;
    height: 46px;
    background-color: #f39190;
    color: #000000;
    border: none;
    border-radius: 0px;
    font-family: 'ComicSansMS';
    font-size: 16px;
    font-weight: 600;
    margin-top: 7px;
    cursor: url('../cursor/cursor-hover.cur'), auto;
    transition: background-color 0.3s;
}

.comics-button:hover {
    background-color: #e58281;
}

}



/*Версия для ноутбуков*/
@media (min-width: 1280px) and (max-width: 1366px) {

.header {
width: 100%;
height: 70px;
background-color: #000000;

}



#logo {
    width: 121px;
    height: 60px;
}
.logo {
position: relative;
width: 151px;
height: 75px;
top: 5px;
left: 85px;
}

.mobileMenu {
  display: none;
}


.line {
width: 100%;
height: 4px;
background-color: #f39190;

}


.master {


}

.sidebar {
  display: block;
width: 235px;
height: auto;
min-height: 750px;
background-color: #0d0b0c;
float: left;
padding-left: 14px;
}



.menuButtonTap {
font-family: 'ComicSansMS';
font-size: 22px;
padding-left: 15px;
padding-top: 8px;
margin-top: 11px;
margin-bottom: 0px;
width: 205px;
height: 38px;
background-color: #f39190;
color: #000000; 
font-weight: 600;
}

.menuButtonTop {
padding-left: 15px;
padding-top: 8px;
font-family: 'ComicSansMS';
font-size: 22px;
margin-top: 24px;
margin-bottom: 0px;
width: 205px;
height: 38px;
background-color: #000000;
color: #FFFFFF; 


}

.menuButtonTop:hover {
padding-left: 15px;
padding-top: 8px;
margin-top: 24px;
margin-bottom: 0px;
width: 205px;
height: 38px;
box-shadow: inset 0 0 0 1px #f39190;
color: #FFFFFF;     



}

.menuButtonCenter {
padding-left: 15px;
padding-top: 8px;
font-family: 'ComicSansMS';
font-size: 22px;
margin-top: 11px;
margin-bottom: 0px;
width: 205px;
height: 38px;
background-color: #000000;
color: #FFFFFF; 
}

.menuButtonCenter:hover {
padding-left: 15px;
padding-top: 8px;
margin-top: 11px;
margin-bottom: 0px;
width: 205px;
height: 38px;
box-shadow: inset 0 0 0 1px #f39190;
color: #FFFFFF;     

}

.menuButtonBottom {
padding-left: 15px;
padding-top: 8px;
font-family: 'ComicSansMS';
font-size: 22px;
margin-top: 11px;
margin-bottom: 15px;
width: 205px;
height: 38px;
background-color: #000000;
color: #FFFFFF; 
}

.menuButtonBottom:hover {
padding-left: 15px;
padding-top: 8px;
margin-top: 11px;
margin-bottom: 15px;
width: 205px;
height: 38px;
box-shadow: inset 0 0 0 1px #f39190;
color: #FFFFFF;     
}

.paw_tap {
width: 45px;
height: 45px;
position: relative;
top: 4px;
right: 12px;    
float: right;
}



.content {
width: calc(100% - 285px);
height: auto;
min-height: 750px;
background-color: #111111;
float: right;
color: #FFFFFF;

padding-top: 14px;
padding-left: 17px;
padding-right: 19px;

}


.grid-item:hover #lll {
display: block;
cursor: url('../cursor/cursor-hover.cur'), auto;
    }
#lll {
  display: none;
  width: 100%; height: 40px; background-color: #d845439e; position: relative; top: -40px; margin-bottom: -40px; 
  cursor: url('../cursor/cursor-hover.cur'), auto;
}

.grid-item:hover .imgGallery {
background-color: rgba(255, 105, 180, 0.75);
    }



.galleryImage {

  margin: 5px; 
  flex: 1 0 auto;
  overflow: hidden;
  min-width: 200px;
  max-width: 380px;
}
.likeDate {
  display: none;
  position: relative;
  top: 160px;
  left: 0px;
  width: 100%;
  height: 40px;
  background-color: #d845439e;
  margin-bottom: -40px;
}

.galleryImage:hover .likeDate {
  display: block; /* Показываем элемент при наведении на родителя */

}


.date {
position: relative;
top: 6px;
left: 15px;
color: #ffffff;
font-weight: bold;
font-size: 18px;
}

.likeNum {
width: 25px; /* Ширина блока */
            height: 25px; /* Высота блока */
 position: relative;
        top: -20px;
        left: calc(100% - 97px); 
        color: #ffffff;
        font-weight: bold;
        font-size: 18px;
}

.like {
font-weight: bold;

            width: 25px; /* Ширина блока */
            height: 25px; /* Высота блока */
            background-image: url('../img/like.png'); /* Путь к изображению */
            background-size: cover; /* Масштабирование изображения */
            
            background-repeat: no-repeat; /* Запрет повторения изображения */
        position: relative;
        top: -44px;
        left: calc(100% - 37px);

cursor: url('../cursor/cursor-hover.cur'), auto;
        
            
       

        
            background-size: 100% 100%; /* Установка конкретного размера */
       

}


.like:active {
            background-image: url('../img/like_tap.png'); /* Путь к изображению */
            cursor: url('../cursor/cursor-hover.cur'), auto; 
        }





.grid {
            display: flex;
            flex-wrap: wrap;
            margin-left: 0px;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-right: -10px;
        }
        .grid-item {
            width: 25%; /* Устанавливаем ширину в 25% для 4 столбцов */
            box-sizing: border-box; /* Учитываем отступы и границы в ширину */
            padding-right: 8px; /* Убираем отступы */
            
            margin-bottom: 8px;
        }



 .imgContact {
width: 310px;
height: auto;  
margin-left: 25px;  
margin-right: 40px; 
margin-top: 10px;
margin-bottom: 25px;
} 
.pContact {
margin-top: 4px;
font-size: 17px;
}    
.pContactPrivet {
margin-top: 4px;
font-size: 17px;
}  
.container { display: none; }  
.text-block { display: none; }
.image-block { display: none; } 




        .imgGallery {
            width: 100%; /* Изображения будут занимать всю ширину родительского элемента */
            height: auto; /* Сохраняем пропорции изображения */
            display: block; /* Убираем отступы под изображением */
            margin: 0; /* Убираем отступы у изображения */
            cursor: url('../cursor/cursor-hover.cur'), auto;
        }












.contactButton {


font-family: 'ComicSansMS';
font-size: 22px;

width: 51.5%;
height: 46px;
background-color: #000000;
color: #FFFFFF; 
border: none;



}





.footer {
width: 100%;
height: 55px;
background-color: #f39190;
text-align: center;
color: #ffffff;
line-height: 55px;
} 




/* Стили для комиксов - ноутбуки */
.comics-container {
  padding-top: 10px;  
}

.comics-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 -6px;
margin-right: -14px;
margin-left: 0px;
}

.comics-card {
    width: calc(25% - 12px); /* 4 карточки в ряд */
    transition: transform 0.2s ease;
}



.comics-card:hover {
    transform: translateY(-5px);
}

.comics-image {
    width: 100%;
    background-color: #000;
    border-radius: 0px;
    overflow: hidden;
    transition: transform 0.3s;
}

.comics-image:hover {
    
}

.comics-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3/4;
    object-fit: cover;
}

.comics-button {
    width: 100%;
    height: 46px;
    background-color: #f39190;
    color: #000000;
    border: none;
    border-radius: 0px;
    font-family: 'ComicSansMS';
    font-size: 16px;
    font-weight: 600;
    margin-top: 7px;
    cursor: url('../cursor/cursor-hover.cur'), auto;
    transition: all 0.3s;
}

.comics-button:hover {
    background-color: #e58281;
    
}




}







/*Компьютерная версия*/



@media (min-width: 1367px) {
 

.header {
width: 100%;
height: 95px;
background-color: #000000;

}



#logo {
    width: 151px;
    height: 75px;
}
.logo {
position: relative;
width: 151px;
height: 75px;
top: 10px;
left: 95px;
}

.mobileMenu {
  display: none;
}

.line {
width: 100%;
height: 4px;
background-color: #f39190;

}





.master {
width: 100%;
height: auto;

}

.sidebar {
  display: block;
width: 293px;
height: 100%;
min-height: 950px;
background-color: #0d0b0c;
float: left;
padding-left: 17px;

}

.menuButtonTap {
font-family: 'ComicSansMS';
font-size: 22px;
padding-left: 25px;
padding-top: 10px;
margin-top: 12px;
margin-bottom: 0px;
width: 250px;
height: 40px;
background-color: #f39190;
color: #000000; 
font-weight: 600;
}

.menuButtonTop {
padding-left: 25px;
padding-top: 10px;
font-family: 'ComicSansMS';
font-size: 22px;
margin-top: 26px;
margin-bottom: 0px;
width: 250px;
height: 40px;
background-color: #000000;
color: #FFFFFF; 


}

.menuButtonTop:hover {
padding-left: 25px;
padding-top: 10px;
margin-top: 26px;
margin-bottom: 0px;
width: 250px;
height: 40px;
box-shadow: inset 0 0 0 1px #f39190;
color: #FFFFFF;     



}

.menuButtonCenter {
padding-left: 25px;
padding-top: 10px;
font-family: 'ComicSansMS';
font-size: 22px;
margin-top: 12px;
margin-bottom: 0px;
width: 250px;
height: 40px;
background-color: #000000;
color: #FFFFFF; 
}

.menuButtonCenter:hover {
padding-left: 25px;
padding-top: 10px;
margin-top: 12px;
margin-bottom: 0px;
width: 250px;
height: 40px;
box-shadow: inset 0 0 0 1px #f39190;
color: #FFFFFF;     

}

.menuButtonBottom {
padding-left: 25px;
padding-top: 10px;
font-family: 'ComicSansMS';
font-size: 22px;
margin-top: 12px;
margin-bottom: 15px;
width: 250px;
height: 40px;
background-color: #000000;
color: #FFFFFF; 
}

.menuButtonBottom:hover {
padding-left: 25px;
padding-top: 10px;
margin-top: 12px;
margin-bottom: 15px;
width: 250px;
height: 40px;
box-shadow: inset 0 0 0 1px #f39190;
color: #FFFFFF;     
}

.paw_tap {
width: 46px;
height: 46px;
position: relative;
top: 5px;
right: 15px;    
float: right;
}






.content {
width: calc(100% - 350px);
height: auto;
min-height: 950px;
background-color: #111111;
float: right;
padding-top: 16px;
padding-left: 20px;
padding-right: 20px;
color: #FFFFFF;
}



.grid-item:hover #lll {
    cursor: url('../cursor/cursor-hover.cur'), auto;
display: block;
    }
#lll {
    cursor: url('../cursor/cursor-hover.cur'), auto;
  display: none;
  width: 100%; height: 40px; background-color: #d845439e; position: relative; top: -40px; margin-bottom: -40px; 
}

.grid-item:hover .imgGallery {
background-color: rgba(255, 105, 180, 0.75);
filter: brightness(0.9);
    }


.galleryImage {

  margin: 5px; 
  flex: 1 0 auto;
  overflow: hidden;
  min-width: 200px;
  max-width: 300px;
}
.likeDate {
  display: none;
  position: relative;
  top: 160px;
  left: 0px;
  width: 100%;
  height: 40px;
  background-color: #d845439e;
  margin-bottom: -40px;
}

.galleryImage:hover .likeDate {
  display: block; /* Показываем элемент при наведении на родителя */

}


.date {
position: relative;
top: 6px;
left: 15px;
color: #ffffff;
font-weight: bold;
font-size: 18px;
}

.likeNum {
width: 25px; /* Ширина блока */
            height: 25px; /* Высота блока */
 position: relative;
        top: -20px;
        left: calc(100% - 98px); 
        color: #ffffff;
        font-weight: bold;
        font-size: 18px;
}

.like {
font-weight: bold;

            width: 25px; /* Ширина блока */
            height: 25px; /* Высота блока */
            background-image: url('../img/like.png'); /* Путь к изображению */
            background-size: cover; /* Масштабирование изображения */
            
            background-repeat: no-repeat; /* Запрет повторения изображения */
        position: relative;
        top: -43px;
        left: calc(100% - 38px);

cursor: url('../cursor/cursor-hover.cur'), auto;
        
            
       

        
            background-size: 100% 100%; /* Установка конкретного размера */
       

}


.like:active {
            background-image: url('../img/like_tap.png'); /* Путь к изображению */
            cursor: url('../cursor/cursor-hover.cur'), auto; 
        }



.grid {
            display: flex;
            flex-wrap: wrap;
            margin-left: 0px;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-right: -10px;
        }
        .grid-item {
            width: 25%; /* Устанавливаем ширину в 25% для 4 столбцов */
            box-sizing: border-box; /* Учитываем отступы и границы в ширину */
            padding-right: 10px; /* Убираем отступы */
            
            margin-bottom: 10px;
        }
        .imgGallery {
            width: 100%; /* Изображения будут занимать всю ширину родительского элемента */
            height: auto; /* Сохраняем пропорции изображения */
            display: block; /* Убираем отступы под изображением */
            margin: 0; /* Убираем отступы у изображения */
            cursor: url('../cursor/cursor-hover.cur'), auto;
        }




.contactButton {


font-family: 'ComicSansMS';
font-size: 22px;

width: 41%;
height: 50px;
background-color: #000000;
color: #FFFFFF; 
border: none;



}




/* Стили для комиксов - компьютерная версия */
.comics-container {
   padding-top: 10px;
}

.comics-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 -6px;
    margin-right: -12px;
    margin-left: 0px;
}

.comics-card {
    width: calc(20% - 12px); /* 5 карточек в ряд */
    
    transition: transform 0.2s ease;
}



.comics-card:hover {
    transform: translateY(-5px);
}

.comics-image {
    width: 100%;
    background-color: #000;
    border-radius: 0px;
    overflow: hidden;
    transition: transform 0.3s;
}

.comics-image:hover {
    
}

.comics-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3/4;
    object-fit: cover;
}

.comics-button {
    width: 100%;
    height: 46px;
    background-color: #f39190;
    color: #000000;
    border: none;
    border-radius: 0px;
    font-family: 'ComicSansMS';
    font-size: 16px;
    font-weight: 600;
    margin-top: 7px;
    cursor: url('../cursor/cursor-hover.cur'), auto;
    transition: all 0.3s;
}

.comics-button:hover {
    background-color: #e58281;
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

// BASIC

body{
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 3vmin;
   list-style-type: none; /* Убирает маркеры у списка */
    padding: 0; /* Убирает отступы списка */
    margin: 0; /* Убирает внешние отступы списка */
}

li {
  height: 30vh;
  flex-grow: 1;
  margin: 1vmin;
}

li:last-child {
  // There's no science in using "10" here. In all my testing, this delivered the best results.
  flex-grow: 10;
}

.imgGalery {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
  cursor: url('../cursor/cursor-hover.cur'), auto;
}

// ADVANCED

// Portrait

@media (max-aspect-ratio: 1/1) {
  li {
    height: 80vh;
  }
}

// Short screens

@media (max-height: 480px) {
  li {
    height: 30vh;
  }
}

// Smaller screens in portrait

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
  ul {
    flex-direction: row;
  }

  li {
    height: auto;
    width: 100%;
  }
 .imgGalery {
    width: 100%;
    max-height: 75vh;
    min-width: 0;
    cursor: url('../cursor/cursor-hover.cur'), auto;
  }
}




.imgContact {
width: 358px;
height: auto;  
margin-left: 30px;  
margin-right: 50px; 
margin-top: 10px;
margin-bottom: 30px;
} 
.pContact {
margin-top: 4px;
font-size: 20px;
}

.pContactPrivet {
margin-top: 4px;
font-size: 20px;
}
.container { display: none; }  
.text-block { display: none; }
.image-block { display: none; } 















.footer {
width: 100%;
height: 55px;
background-color: #f39190;
text-align: center;
color: #ffffff;
line-height: 55px;
} 


}



/* Стили для проектов */
.projects-container {
    padding-top: 10px;
}

.projects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 -10px;
}

.project-card {
    display: flex;
    flex-direction: column;
    
}

.project-image {
    width: 100%;
    background-color: #000;
    border-radius: 0px;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/9; /* Лежачий прямоугольник */
    object-fit: cover;
}

.project-button {
    width: 100%;
    height: 46px;
    background-color: #f39190;
    color: #000000;
    border: none;
    border-radius: 0px;
    font-family: 'ComicSansMS';
    font-size: 16px;
    font-weight: 600;
    margin-top: 7px;
    cursor: url('../cursor/cursor-hover.cur'), auto;
    transition: background-color 0.3s;
}

.project-button:hover {
    background-color: #e58281;
}

/* Мобильная версия */
@media (max-width: 1279px) {
    .project-card {
        width: 100%; /* 1 проект в строке */
       transition: transform 0.2s ease;
            cursor: pointer;
        }
        
        .project-card:hover {
            transform: translateY(-5px);
        }
    
    .projects-grid {
        
        margin: 0;
    }
}

/* Версия для ноутбуков */
@media (min-width: 1280px) and (max-width: 1366px) {
    .project-card {
        width: calc(33.333% - 11px); /* 3 проекта в строке */
       transition: transform 0.2s ease;
            cursor: pointer;
        }
        
        .project-card:hover {
            transform: translateY(-5px);
        }
    
    .projects-grid {
        margin-right: -11px;
        margin-left: 0px;
    }
}

/* Компьютерная версия */
@media (min-width: 1367px) {
    .project-card {
        width: calc(33.333% - 12px); /* 3 проекта в строке */
       transition: transform 0.2s ease;
            cursor: pointer;
        }
        
        .project-card:hover {
            transform: translateY(-5px);
        }
    
    .projects-grid {
        margin-right: -12px;
        margin-left: 0px;
    }
}