/*
Theme Name: Beaver-V5 Child
Theme URI: https://ritheme.com/
Description: Beaver-V5的子主题
Author: Your Name
Author URI: https://your-site.com/
Version: 1.0.0
*/

@font-face {
font-family: 'Custom Font';
src: local('Microsoft YaHei'), local('微软雅黑'), local('PingFang SC'), local('SimSun');
font-display: swap;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
}

@font-face {
font-family: 'customfont';
src: none !important;
}

* {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-size: 12px;
text-decoration: unset;
}

img {
max-width: 100%;
height: auto;
display: block;
}

html {
scroll-behavior: smooth;
}

.text {
display: flex;
align-items: center;
justify-content: center;
top: 0;
}

.button-wrapper,.text,.icon {
width: 100%;
height: 100%;
left: 0;
color: #fff;
}

.text,.icon {
transition: top 0.5s;
}

.icon svg {
width: 24px;
height: 24px;
}

@keyframes spin {

0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }

}

.tag-list {
display: flex;
gap: 4px;
flex-wrap: wrap;
align-items: center;
}

.tag-link {
color: var(--this-color);
background: var(--this-bg);
padding: .25em .4em;
border-radius: 5px;
font-size: .8em;
text-decoration: none;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
box-shadow: var(--this-shadow);
vertical-align: middle;
line-height: 1.2;
--this-color: #676464;
--this-bg: rgb(147 147 147 / 22%);
--this-border: transparent;
--this-shadow: none;
--this-hover-color: #444;
--this-hover-bg: rgba(136, 136, 136, .2);
}

.tag-link:hover {
background: var(--this-hover-bg);
color: var(--this-hover-color);
}

.io-slider-tab {
margin-bottom: 1rem;
position: relative;
}

.col-20 {
width: 20%;
padding: 0 15px;
float: left;
margin-bottom: 20px;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}

@media (max-width: 1200px) {
.col-20 {
width: 25%;
}

.movie-card .card-head {
aspect-ratio: 2/3;
}
}

@media (max-width: 992px) {
.col-20 {
width: 33.333%;
}

.col-lg-1-5 {
width: 33.333333%;
}

.cardbb {
width: 100%;
height: 350px;
margin: 5px 0;
}

.time {
font-size: 2.5rem;
}

.date {
font-size: 0.875rem;
top: calc(25% + 30px);
}

.hello {
width: 90%;
left: 50%;
transform: translateX(-50%);
}

.movie-card .card-head {
aspect-ratio: 2/3;
}

.movie-card .bookmark, .movie-card .rating {
padding: 5px;
}
}

@media (max-width: 768px) {
.col-20 {
width: 50%;
padding: 0 8px;
}

.container11 {
padding: 0 7px;
}

.io-slider-tab {
flex-direction: column;
}

.slider-tab {
margin-top: 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.video-info-main {
padding: 15px;
}

.video-info-title {
font-size: 1.5em;
}

.sidebar-column {
margin-bottom: 20px;
padding-right: 15px;
}

.main-content-column {
padding-left: 15px;
}

.content-block {
margin-bottom: 15px;
}

.badge2, .douban-badge-inner1 {
padding: 3px 6px;
}

.douban-badge-inner1 .douban-score {
font-size: 12px;
}

.categoryGvroup {
padding: 1rem;
margin-top: -80px;
margin-left: 15px;
margin-right: 15px;
border-radius: 12px;
}

.wrapper {
flex-wrap: wrap;
gap: 10px;
}

.vcard {
width: 80px;
height: 120px;
}

.vcard-image {
width: 60px;
height: 60px;
}

.vcard-title {
font-size: 12px;
}

.vcard-views {
font-size: 10px;
padding: 4px 8px;
}

.related-movies-section {
padding: 15px;
}

.related-movies-section .row-sm {
margin: 0 -5px;
}

.related-movies-section [class*="col-"] {
padding: 0 5px;
}

.books {
width: 175px;
height: 265px;
}

.item-title .version-tag, .app-meta .status-tag {
font-size: 11px;
padding: 0 4px;
margin-left: 4px;
}

.movie-card .card-head {
aspect-ratio: 2/3;
}

.movie-card .bookmark, .movie-card .rating {
top: 10px;
padding: 4px;
}

.movie-card .bookmark {
left: 10px;
width: 28px;
height: 28px;
}

.movie-card .rating {
right: 10px;
padding: 4px 6px;
}

.movie-card .rating span {
font-size: 12px;
}

.movie-card .card-title {
font-size: 14px;
}

.movie-card .genre, .movie-card .year {
font-size: 12px;
padding: 1px 4px;
}
}

@media (max-width: 576px) {
.col-20 {
width: 50%;
padding: 5px 5px;
}

.container11 {
padding: 5px 5px;
}

.item-title {
font-size: 12px;
}

.app-category, .app-info {
font-size: 10px;
}

.time {
font-size: 2rem;
}

.date {
font-size: 0.75rem;
top: calc(25% + 25px);
}
}

.stats-info {
position: absolute;
top: 5px;
right: 5px;
display: flex;
gap: 8px;
z-index: 2;
padding: 2px;
}

.stats-info .info-item {
display: flex;
align-items: center;
gap: 3px;
color: rgba(255, 255, 255, 0.27);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.stats-info .info-item i {
font-size: 12px;
}

.stats-info .info-item span {
font-size: 12px;
}

.item-title {
line-height: 1.4;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.item-title a {
color: #fff;
text-decoration: none;
font-weight: 500;
}

.item-title a:hover {
color: #007bff;
}

.app-content {
margin-top: 5px;
}

.app-category {
color: #666;
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.app-info {
display: flex;
color: #888;
font-size: 12px;
gap: 10px;
}

.info-item {
display: flex;
align-items: center;
}

.info-item i {
margin-right: 4px;
}

.lazy {
opacity: 1 !important;
-webkit-filter: blur(0) !important;
filter: blur(0) !important;
}

.item-excerpt {
margin: 5px 0;
line-height: 1.5;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.app-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}

.slider-li {
position: relative;
padding: 4px 12px;
margin: 0 4px;
cursor: pointer;
font-size: 14px;
white-space: nowrap;
transition: all 0.3s ease;
}

.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
display: none;
}

.text-xs {
font-size: 12px;
}

.text-muted1 {
color: #6c757d;
font-weight: 300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.text-muted2 {
color: #6c757d;
font-weight: 300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.mb-1 {
margin-bottom: 0.25rem;
}

.mb-2 {
margin-bottom: 0.5rem;
}

.me-1 {
margin-right: 0.25rem;
}

.ms-2 {
margin-left: 0.5rem;
}

.meta-right {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}

.item-media img.fill-cover {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}

.posts-item:hover {
transform: translateY(-2px);
}

.app-meta .status-tag.official {
color: #d5ba78;
background: rgb(213 174 120 / 10%);
}

.app-meta .status-tag.cracked {
color: #d578cf;
background: rgb(213 120 184 / 10%);
}

.app-meta .status-tag.lite {
color: #7b78d5;
background: rgb(135 120 213 / 10%);
}

#random-banner {
flex: 1;
min-width: 300px;
background: var(--anzhiyu-card-bg);
border-radius: 12px;
padding: 1rem;
display: flex;
width: 100%;
height: auto;
margin-bottom: 0.5rem;
border: var(--style-border);
overflow: hidden;
position: relative;
-webkit-box-shadow: var(--anzhiyu-shadow-border);
box-shadow: var(--anzhiyu-shadow-border);
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
will-change: transform;
}

#top-group-swiper {
width: 100%;
height: 100%;
border-radius: 12px;
overflow: hidden;
}

.swiper-slide {
width: 100%;
height: 100%;
}

.video-info-main {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.video-info-itemtitle {
font-size: 1.2em;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}

.video-info-item {
margin-bottom: 15px;
}

.video-info-content {
line-height: 1.6;
color: #555;
}

.video-info-share {
margin-top: 20px;
}

.video-info-share a {
background-color: #007bff;
color: white;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
}

.video-info-share a:hover {
background-color: #0056b3;
}

.video-info-header {
margin-bottom: 15px;
}

.video-info-title {
font-size: 2em;
font-weight: bold;
color: #333;
}

.video-info-footer {
margin-top: 20px;
}

.content-movie-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}

.box.view-heading {
width: 100%;
margin: 0;
padding: 15px;
box-sizing: border-box;
}

.video-cover {
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
background-image: linear-gradient(to bottom, #f9f9f9, #fff);
background-attachment: fixed;
background-size: 100% 200px;
background-position: 0 0;
transition: background-position 1s ease-out;
}

.video-cover .module-item-pic {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.video-cover .module-item-pic img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}

.video-cover:hover .module-item-pic img {
transform: scale(1.1);
}

.custom-layout {
padding: 30px 0;
}

.sidebar-column {
padding-right: 20px;
}

.sidebar-inner {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
padding: 20px;
height: 100%;
}

.main-content-column {
padding-left: 0;
}

.main-content-top {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
padding: 20px;
margin-bottom: 20px;
}

.content-blocks {
margin-bottom: 20px;
}

.content-block {
background-color: #f9f9f9;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 15px rgba(0,0,0,0.03);
}

.footer-content {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
padding: 20px;
}

.posts-item.app-item {
left: 0;
right: 0;
margin: auto;
border-radius: 16px;
backdrop-filter: blur(4px);
display: flex;
flex-direction: column;
justify-content: end;
}

.app-item.magical {
--circle-size: 600px;
--inset: 1px;
--border: 12px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border);
}

.glowing-border {
--size-glowing-border: calc(100% + 1px);
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--size-glowing-border);
height: var(--size-glowing-border);
background-color: transparent;
border-radius: 999px;
z-index: -1;
}

.glowing-border::before {
content: "";
position: absolute;
top: 10%;
left: 50%;
transform: rotate(0deg);
transform-origin: left;
width: 100%;
height: 2rem;
background-color: rgba(255,255,255,0.8);
mask: linear-gradient(transparent 0%, #fff 120%);
animation: rotate 2.5s linear infinite;
}

.normal-btn {
--circle-size: 100px;
--border: 9999px;
border-radius: 9999px;
padding: 7px 20px;
top: 68px;
right: 51px;
cursor: pointer;
}

.normal-btn a {
font-size: 13px;
line-height: 22px;
font-weight: 500;
color: #E8E8F6;
text-decoration: none;
}

.btnc-s {
padding: 4px 16px;
}

.btnc-s a {
font-size: 12px;
line-height: 20px;
}

.tag {
font-size: 12px;
line-height: 100%;
font-weight: 500;
padding: 6px 10px;
border-radius: 9999px;
white-space: nowrap;
}

.magical::before,.magical::after {
content: '';
position: absolute;
width: calc(100% + var(--inset)*2);
height: calc(100% + var(--inset)*2);
border-radius: var(--border);
inset: calc(0 - var(--inset));
}

.magical::before {
background: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.3), transparent 40%);
z-index: -1;
}

.magical::after {
background: linear-gradient(180deg, rgba(78,78,100,0.48) 0%, rgba(78,78,100,0.2) 100%);
z-index: -2;
}

.magical.show {
width: 100%;
height: 100%;
position: absolute;
border-radius: var(--border);
opacity: 0;
pointer-events: none;
background: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.01), transparent 40%);
}

.btnc {
--border: 9999px;
background-image: linear-gradient(90deg, #A29CD3 0%, #E8BFAC 100%);
color: #fff;
}

.btnc::before {
background: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.4), transparent 40%);
}

.btnc::after {
background: linear-gradient(180deg, rgba(78,78,100,0.68) 0%, rgba(78,78,100,0.2) 100%);
}

.icon {
font-size: 0;
}

.menu-card-3 .card {
background-color: rgba(36, 40, 50, 1);
background-image: linear-gradient(139deg, rgb(84 84 84 / 39%) 0%, rgb(15 28 46 / 58%) 0%, rgb(15 29 47 / 75%) 100%);
padding: 1.5rem;
border-radius: 1rem;
}

.menu-card-4 .card {
background-color: rgba(36, 40, 50, 1);
background-image: linear-gradient(139deg, rgb(84 84 84 / 39%) 0%, rgb(15 28 46 / 58%) 0%, rgb(15 29 47 / 75%) 100%);
padding: 1.5rem;
border-radius: 1rem;
}

.menu-card-5 .card {
background-color: rgba(36, 40, 50, 1);
background-image: linear-gradient(139deg, rgb(84 84 84 / 39%) 0%, rgb(15 28 46 / 58%) 0%, rgb(15 29 47 / 75%) 100%);
padding: 1.5rem;
border-radius: 1rem;
}

.posts-warp {
padding: 20px;
}

.module-main .mm-card {
margin-top: 40px;
}

.entry-media .format-icon {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.6);
color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
z-index: 2;
}

.badge2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
padding: 5px 10px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
color: #fff;
font-size: 13px;
display: flex;
align-items: center;
gap: 5px;
}

.badge2 svg {
width: 14px;
height: 14px;
opacity: 0.8;
}

.badge2 span {
font-weight: 500;
line-height: 1;
}

.douban-badge-inner1 {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
padding: 4px 8px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.douban-badge-inner1 .douban-score {
color: #fff;
font-size: 13px;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.douban-badge-inner1 .douban-score strong {
font-weight: 400;
margin-right: 2px;
opacity: 0.9;
}

.apps-grid-card.col-20 {
width: 25%;
padding: 0 10px;
float: none;
}

.page-numbers {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
margin: 2rem 0;
gap: 0.5rem;
}

.page-numbers li {
margin: 0;
}

.page-numbers a, .page-numbers span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
color: #4a5568;
background-color: #f7fafc;
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
}

.page-numbers a:hover {
background-color: #edf2f7;
color: #2d3748;
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
animation: pageNumberHover 0.3s ease;
}

.page-numbers .current {
background-color: #4299e1;
color: white;
border-color: #4299e1;
font-weight: 600;
}

.page-numbers .dots {
background-color: transparent;
border: none;
color: #a0aec0;
}

.page-numbers .prev, .page-numbers .next {
padding: 0 16px;
}

.page-numbers .prev i, .page-numbers .next i {
font-size: 16px;
}

@media (prefers-color-scheme: dark) {
.page-numbers a, .page-numbers span:not(.current) {
background-color: #2d3748;
color: #e2e8f0;
border-color: #4a5568;
}

.page-numbers a:hover {
background-color: #4a5568;
color: #f7fafc;
}

.page-numbers .current {
background-color: #4299e1;
color: white;
border-color: #4299e1;
}

.page-numbers .dots {
color: #718096;
}
}

@media (max-width: 640px) {
.page-numbers {
flex-wrap: wrap;
gap: 0.25rem;
}

.page-numbers a, .page-numbers span {
min-width: 32px;
height: 32px;
padding: 0 8px;
font-size: 12px;
}

.page-numbers .prev, .page-numbers .next {
padding: 0 12px;
}
}

@keyframes pageNumberHover {

    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }

}

.categoryGvroup {
padding: 1.5rem;
z-index: 999;
border-radius: 16px;
margin-top: -90px;
margin-left: 30px;
margin-right: 30px;
transition: ease-out 0.35s, backdrop-filter 0.25s 0.1s, -webkit-backdrop-filter 0.25s 0.1s;
background: rgb(157 157 157 / 20%) !important;
-webkit-backdrop-filter: saturate(2) blur(15px);
backdrop-filter: saturate(2) blur(30px);
}

.vcard-svg {
position: relative;
width: 80px;
height: 80px;
border-radius: 30%;
overflow: visible;
}

.vcard-svg-container {
position: relative;
width: 80px;
height: 80px;
border-radius: 30%;
overflow: hidden;
}

.vcard-svg-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(20px);
background: rgba(255, 255, 255, 0.1);
pointer-events: none;
z-index: -1;
}

.wrapper {
display: flex;
gap: 15px;
}

.vcard {
position: relative;
width: 100px;
height: 150px;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 1.4),  			 box-shadow 0.3s ease-out;
}

.vcard:hover {
transform: translateY(-30px);
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.2);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 1.4),  			 box-shadow 0.2s ease-out;
}

.vcard-image {
position: relative;
width: 80px;
height: 80px;
border-radius: 30%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: visible;
}

.vcard-svg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 150px;
margin-top: -106px;
margin-left: -10px;
filter: saturate(2) blur(30px);
-webkit-backdrop-filter: saturate(2) blur(15px);
background: inherit;
background-size: cover;
pointer-events: none;
z-index: -1;
}

.vcard-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 150px;
margin-top: -90px;
margin-left: -10px;
filter: saturate(16) blur(35px);
-webkit-backdrop-filter: saturate(2) blur(15px);
background: inherit;
background-size: cover;
pointer-events: none;
z-index: -1;
}

.vcard-title {
margin-top: 10px;
color: #fff;
font-size: 14px;
font-weight: 500;
}

.vcard-views {
margin-top: 5px;
padding: 5px 10px;
color: #fff;
border-radius: 20px;
font-size: 12px;
display: flex;
align-items: center;
gap: 5px;
visibility: visible;
}

.vcard-views i {
font-size: 14px;
}

@media (max-width: 480px) {
.categoryGvroup {
padding: 0.5rem;
margin-top: -60px;
margin-left: 10px;
margin-right: 10px;
border-radius: 8px;
}

.wrapper {
gap: 5px;
}

.vcard {
width: 60px;
height: 100px;
}

.vcard-image {
width: 50px;
height: 50px;
}

.vcard-title {
font-size: 10px;
}

.vcard-views {
font-size: 8px;
padding: 3px 6px;
}
}

@media (min-width: 1000px) and (max-width: 1500px) {
.categoryGvroup {
padding: 1.2rem;
}

.vcard {
width: 90px;
height: 135px;
}

.vcard-image {
width: 100%;
height: 100%;
max-width: 70px;
max-height: 70px;
}

.vcard-title {
font-size: 13px;
}

.vcard-views {
font-size: 11px;
padding: 4px 8px;
}
}

.magical {
--circle-size: 600px;
--inset: 1px;
--border: 24px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border);
background-color: #141419;
}

.banners-title {
top: 2.9rem;
left: 3rem;
position: absolute;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
animation: slide-in 0.6s 0.3s backwards;
}

.banners-title-big {
font-size: 36px;
line-height: 1;
font-weight: bold;
margin-bottom: 8px;
}

.banners-title-small {
font-size: 12px;
line-height: 1;
color: var(--anzhiyu-secondtext);
margin-top: 8px;
margin-bottom: 0.5rem;
}

#random-banner:hover {
-webkit-box-shadow: var(--anzhiyu-shadow-main);
box-shadow: var(--anzhiyu-shadow-main);
}

#random-banner:hover #random-hover {
opacity: 1;
-ms-filter: none;
filter: none;
padding-left: 2rem;
background: var(--anzhiyu-theme-op-deep);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
background-size: 200%;
cursor: pointer;
}

#random-banner #skills-tags-group-all .tags-group-wrapper {
margin-top: 7rem;
}

#random-banner #skills-tags-group-all {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}

#random-banner #random-hover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: var(--anzhiyu-theme);
color: var(--anzhiyu-white);
padding-left: 0.5rem;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s;
-moz-transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s;
-o-transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s;
-ms-transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s;
transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s;
font-size: 60px;
}

#random-banner #random-hover .bannerText {
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

#random-banner #random-hover i {
font-size: 80px;
margin-left: 10px;
line-height: 1;
}

@media screen and (max-width: 1200px) {
#random-banner {
display: none;
}

div#bannerGroup {
height: auto;
width: auto;
}
}

div#bannerGroup {
display: flex;
flex-direction: row;
justify-content: space-between;
}

#skills-tags-group-all {
display: flex;
transform: rotate(0);
transition: 0.3s;
}

#skills-tags-group-all .tags-group-wrapper {
margin-top: 40px;
display: flex;
flex-wrap: nowrap;
animation: rowup var(--lunbo-carousel-speed, 60s) linear infinite;
}

#skills-tags-group-all .tags-group-icon-pair {
margin-left: 1rem;
}

#skills-tags-group-all .tags-group-icon {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 66px;
font-weight: 700;
box-shadow: var(--anzhiyu-shadow-blackdeep);
width: 120px;
height: 120px;
border-radius: 30px;
}

#skills-tags-group-all .tags-group-icon img {
width: 60px;
margin: 0 auto !important;
}

[data-theme="dark"] #skills-tags-group-all .tags-group-icon img {
filter: none;
}

#skills-tags-group-all .tags-group-icon-pair .tags-group-icon:nth-child(even) {
margin-top: 1rem;
transform: translate(-60px);
}

#skills-tags-group-all .etc {
margin-right: 10px;
margin-top: 10px;
}

@keyframes rowup {

    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  
}

@-moz-keyframes slide-in {

    0% {
      -webkit-transform: translateY(20px);
      -moz-transform: translateY(20px);
      -o-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
    }
    100% {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -o-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
      -ms-filter: none;
      filter: none;
    }
  
}

@keyframes slide-in {

    0% {
      transform: translateY(20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  
}

.sidebar .sidebar-posts-list .post-item1.item-list1 .entry-media {
width: 50px;
height: 50px;
border-radius: 7px;
}

.post-item1.item-list1 {
display: flex;
overflow: hidden;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
padding: .5rem;
margin-bottom: 0.5rem;
transition: .3s;
}

.post-item1 {
padding: 12px;
height: 100%;
--card-padding: 6px;
--card-radius: 10px;
cursor: pointer;
position: relative;
width: 100%;
transition: .5s;
border-radius: .5em .5em 0.5em;
background: linear-gradient(#ffffffa8, #c5f6ba52);
box-shadow: 0 5px 8px #c8c8c87a, 0 0 0 1px #ffffff4d inset, 0 1px #fff6 inset;
}

.post-item1:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
width: inherit;
height: inherit;
background: radial-gradient(400px circle at center, rgba(152, 27, 172, .3), transparent 70%);
opacity: 0;
transition: opacity var(--transition-normal);
will-change: opacity;
-webkit-transform: translateZ(0);
transform: translateZ(0);
border-radius: var(--radius);
border-top-left-radius: 0;
}

.post-item1 .entry-desc,.post-item1 .entry-title {
margin: 0;
display: flex;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
-webkit-line-clamp: 1;
text-decoration: none;
white-space: nowrap;
align-items: center;
color: #f368e2;
text-shadow: 0 1px var(--white-opacity-6);
cursor: pointer;
height: inherit;
transition: .3s;
}

.post-item1.item-list1:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
z-index: 10;
}

.post-item1 .entry-media .media-img.lazy.loaded {
-webkit-animation: lazy_blur .6s;
animation: lazy_blur .6s;
padding: 6px;
paddingr: .3rem;
border-radius: 4px;
}

.post-item1 .entry-media1 .media-img.lazy.loaded {
-webkit-animation: lazy_blur .6s;
animation: lazy_blur .6s;
width: 46px;
border-radius: 40px;
}

.list-item1-wrapper {
border-bottom: 1px solid #eee;
transition: all 0.3s;
}

.post-item1.item-list1 .entry-media1 {
border-radius: .25rem;
max-width: 53px;
margin-right: 1rem;
}

.list-item-wrapper:hover {
background: #f8f9fa;
}

@media (max-width: 767px) {
.list-item-wrapper {
flex-direction: column;
}

.list-item-wrapper .media-part {
width: 100%;
margin-right: 0;
margin-bottom: 1rem;
}
}

@media (min-width: 768px) {
.list-item-wrapper {
display: flex;
align-items: center;
}

.list-item-wrapper .media-part {
width: 40%;
margin-right: 1rem;
}

.list-item-wrapper .content-part {
width: 60%;
}
}

.post-item1.item-list1 .entry-desc {
-webkit-line-clamp: 0;
}

.post-item1 .entry-desc {
color: #b171a9;
margin-top: 4px;
font-size: .75rem;
line-height: 1.25;
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px var(--white-default);
}

.post-item1.item-list1 .entry-wrapper {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-width: 0;
}

.go1 {
cursor: pointer;
right: 9px;
bottom: 10px;
padding: .25em 1em;
font-size: 15px;
width: 89px;
height: 31px;
background: linear-gradient(#ffacf5, #f555e1);
color: #fff;
border-radius: 9em;
border: 1px solid #f7a1ec;
box-shadow: 0 5px 8px #ffa5f3, 0 0 0 1px #ffffff4d inset, 0 1px #fff6 inset;
}

.post-item2.item-list .entry-desc {
-webkit-line-clamp: 0;
}

.post-item2 .entry-desc {
margin-top: 4px;
font-size: .75rem;
line-height: 1.25;
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #707070;
text-shadow: 0 1px #ffffffc4;
}

.post-item2.item-list .entry-wrapper {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-width: 0;
}

.sidebar .sidebar-posts-list .post-item2.item-list .entry-media {
width: 50px;
height: 50px;
border-radius: 7px;
}

.post-item2.item-list {
display: flex;
overflow: hidden;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
margin-bottom: 0.5rem;
transition: .3s;
}

.post-item2:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
width: inherit;
height: inherit;
background: radial-gradient(400px circle at center, rgba(152, 27, 172, .3), transparent 70%);
opacity: 0;
transition: opacity var(--transition-normal);
will-change: opacity;
-webkit-transform: translateZ(0);
transform: translateZ(0);
border-radius: var(--radius);
border-top-left-radius: 0;
}

.post-item2 .entry-media .media-img.lazy.loaded {
-webkit-animation: lazy_blur .6s;
animation: lazy_blur .6s;
padding: 6px;
paddingr: .3rem;
border-radius: 0.5em 0.5em 0em 0em;
}

.post-item2 .entry-media {
display: block;
position: relative;
overflow: hidden;
}

.post-item2 .entry-media .media-img {
border-radius: inherit;
background-color: #e7e7e7;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

.post-item2.item-grid .entry-wrapper {
padding: 5px;
}

.post-item2 .entry-title {
font-size: .95rem;
font-weight: 600;
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
-webkit-line-clamp: 1;
text-shadow: 0 1px rgb(255 255 255 / 50%);
cursor: pointer;
height: inherit;
transition: .3s;
color: #3e3e3f;
text-decoration: none;
}

.post-item2:hover {
transform: translateY(-5px);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
padding: 5px;
border-radius: 0.5em .5em 0.5em;
background: linear-gradient(#ffffffa8, #c5f6ba52);
box-shadow: 0 5px 8px #c8c8c87a, 0 0 0 1px #ffffff4d inset, 0 1px #fff6 inset;
}

.slider-tabv {
display: flex;
list-style: none;
margin: 0;
padding: 4px;
transition: background-color 0.3s;
background: radial-gradient(at top left, rgb(204 199 255 / 63%), rgb(142 130 255 / 63%));
border-radius: 9em;
box-shadow: inset 3px 3px 6px rgb(204 199 255 / 63%), inset -3px -2px 5px rgb(255 255 255 / 60%);
border: 1px solid rgb(204 199 255 / 63%);
}

.post-item2 {
backdrop-filter: blur(13.5px);
transition: .5s;
border-radius: 0.5em .5em 0.5em;
background: linear-gradient(#ffffffb5, #ffffff47);
}

@media (max-width: 767.98px) {
.post-item2.item-grid .entry-wrapper {
padding: 5px;
}

.post-item2.item-grid .entry-title {
font-size: 0.875rem;
margin: 5px 0;
-webkit-line-clamp: 1;
}

.post-item2.item-grid .entry-desc {
font-size: 0.75rem;
margin-bottom: 5px;
-webkit-line-clamp: 1;
}

.post-item2.item-grid .entry-meta {
padding-top: 5px;
font-size: 0.75rem;
}

.post-item2.item-grid .entry-meta .meta-right {
display: none;
}

.row.g-3 {
--bs-gutter-x: 0.5rem;
--bs-gutter-y: 0.5rem;
}
}

.row.g-3 {
--bs-gutter-x: 0.75rem;
--bs-gutter-y: 0.75rem;
}

.buttonc {
--h-button: 48px;
--w-button: 102px;
--round: 0.75rem;
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.25s ease;
background: radial-gradient(       65.28% 65.28% at 50% 100%,       rgba(223, 113, 255, 0.8) 0%,       rgba(223, 113, 255, 0) 100%     ),     linear-gradient(0deg, #7a5af8, #7a5af8);
border-radius: var(--round);
border: none;
outline: none;
padding: 12px 18px;
}

.buttonc::before, .buttonc::after {
content: "";
position: absolute;
inset: var(--space);
transition: all 0.5s ease-in-out;
border-radius: calc(var(--round) - var(--space));
z-index: 0;
}

.buttonc::before {
--space: 1px;
background: linear-gradient(     177.95deg,     rgba(255, 255, 255, 0.19) 0%,     rgba(255, 255, 255, 0) 100%   );
}

.buttonc::after {
--space: 2px;
background: radial-gradient(       65.28% 65.28% at 50% 100%,       rgba(223, 113, 255, 0.8) 0%,       rgba(223, 113, 255, 0) 100%     ),     linear-gradient(0deg, #7a5af8, #7a5af8);
}

.buttonc:active {
transform: scale(0.95);
}

.fold {
z-index: 1;
position: absolute;
top: 0;
right: 0;
height: 1rem;
width: 1rem;
display: inline-block;
transition: all 0.5s ease-in-out;
background: radial-gradient(     100% 75% at 55%,     rgba(223, 113, 255, 0.8) 0%,     rgba(223, 113, 255, 0) 100%   );
box-shadow: 0 0 3px black;
border-bottom-left-radius: 0.5rem;
border-top-right-radius: var(--round);
}

.fold::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 150%;
height: 150%;
transform: rotate(45deg) translateX(0%) translateY(-18px);
background-color: #e8e8e8;
pointer-events: none;
}

.buttonc:hover .fold {
margin-top: -1rem;
margin-right: -1rem;
}

.points_wrapper {
overflow: hidden;
width: 100%;
height: 100%;
pointer-events: none;
position: absolute;
z-index: 1;
}

.points_wrapper .point {
bottom: -10px;
position: absolute;
animation: floating-points infinite ease-in-out;
pointer-events: none;
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 9999px;
}

@keyframes floating-points {

  0% {
    transform: translateY(0);
  }
  85% {
    opacity: 0;
  }
  100% {
    transform: translateY(-55px);
    opacity: 0;
  }

}

.points_wrapper .point:nth-child(1) {
left: 10%;
opacity: 1;
animation-duration: 2.35s;
animation-delay: 0.2s;
}

.points_wrapper .point:nth-child(2) {
left: 30%;
opacity: 0.7;
animation-duration: 2.5s;
animation-delay: 0.5s;
}

.points_wrapper .point:nth-child(3) {
left: 25%;
opacity: 0.8;
animation-duration: 2.2s;
animation-delay: 0.1s;
}

.points_wrapper .point:nth-child(4) {
left: 44%;
opacity: 0.6;
animation-duration: 2.05s;
}

.points_wrapper .point:nth-child(5) {
left: 50%;
opacity: 1;
animation-duration: 1.9s;
}

.points_wrapper .point:nth-child(6) {
left: 75%;
opacity: 0.5;
animation-duration: 1.5s;
animation-delay: 1.5s;
}

.points_wrapper .point:nth-child(7) {
left: 88%;
opacity: 0.9;
animation-duration: 2.2s;
animation-delay: 0.2s;
}

.points_wrapper .point:nth-child(8) {
left: 58%;
opacity: 0.8;
animation-duration: 2.25s;
animation-delay: 0.2s;
}

.points_wrapper .point:nth-child(9) {
left: 98%;
opacity: 0.6;
animation-duration: 2.6s;
animation-delay: 0.1s;
}

.points_wrapper .point:nth-child(10) {
left: 65%;
opacity: 1;
animation-duration: 2.5s;
animation-delay: 0.2s;
}

.inner {
z-index: 2;
gap: 6px;
position: relative;
width: 100%;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
transition: color 0.2s ease-in-out;
}

.inner svg.icon {
width: 18px;
height: 18px;
transition: fill 0.1s linear;
}

.buttonc:focus svg.icon {
fill: white;
}

.buttonc:hover svg.icon {
fill: transparent;
animation: dasharray 1s linear forwards,     filled 0.1s linear forwards 0.95s;
}

@keyframes dasharray {

  from {
    stroke-dasharray: 0 0 0 0;
  }
  to {
    stroke-dasharray: 68 68 0 0;
  }

}

@keyframes filled {

  to {
    fill: white;
  }

}

.cardbb {
width: 210px;
height: 400px;
background: black;
border-radius: 35px;
border: 2px solid rgb(40, 40, 40);
padding: 7px;
position: relative;
box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.486);
margin: 10px auto;
}

.cardbb-int {
background-size: 200% 200%;
background-position: 0% 0%;
height: 100%;
border-radius: 25px;
transition: all 0.6s ease-out;
overflow: hidden;
position: relative;
}

.cardbb-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.cardbb-media .media-img {
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.cardbb:hover .cardbb-int {
background-position: 100% 100%;
}

.top {
position: absolute;
top: 0px;
right: 50%;
transform: translate(50%, 0%);
width: 35%;
height: 18px;
background-color: black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index: 3;
}

.time {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3.5rem;
color: white;
margin: 0;
z-index: 2;
font-weight: 300;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.date {
position: absolute;
top: calc(25% + 40px);
left: 50%;
transform: translate(-50%, -50%);
font-size: 1rem;
color: white;
margin: 0;
z-index: 2;
font-weight: 300;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.speaker {
position: absolute;
top: 2px;
right: 50%;
transform: translate(50%, 0%);
width: 40%;
height: 2px;
border-radius: 2px;
background-color: rgb(20, 20, 20);
}

.camera {
position: absolute;
top: 6px;
right: 84%;
transform: translate(50%, 0%);
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.048);
}

.int {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
background-color: rgba(0, 0, 255, 0.212);
}

.btn1, .btn2, .btn3, .btn4 {
position: absolute;
width: 2px;
}

.btn1, .btn2, .btn3 {
height: 45px;
top: 30%;
right: -4px;
background-image: linear-gradient(to right, #111111, #222222, #333333, #464646, #595959);
}

.btn2, .btn3 {
transform: scale(-1);
left: -4px;
height: 30px;
}

.btn2 {
top: 26%;
}

.btn3 {
top: 36%;
}

.hello {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
color: white;
line-height: 35px;
height: 37px;
transition: 0.5s ease-in-out;
position: relative;
z-index: 2;
opacity: 0;
width: 186px;
backdrop-filter: saturate(2) blur(24px);
border: 1px solid #ffffff94;
border-radius: 25px;
top: 200px;
margin-left: 3px;
}

.hello a {
color: white;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
padding: 0 10px;
}

.hidden {
display: block;
opacity: 0;
transition: all 0.3s ease-in;
color: white;
font-size: 1rem;
}

.cardbb:hover .hidden {
opacity: 1;
}

.cardbb:hover .hello {
opacity: 1;
}

.tips-badge {
z-index: 3;
}

.col-lg-1-5 {
width: 20%;
padding: 0 5px;
}

.Btn {
width: 50px;
height: 50px;
border: 1px solid #ffffff36;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
transition-duration: .3s;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
z-index: 3;
opacity: 0;
backdrop-filter: saturate(4) blur(16px);
color: rgb(255 255 255);
}

.cardbb:hover .Btn {
opacity: 1;
}

.svgIcon {
fill: rgb(255 255 255);
}

.icon2 {
width: 18px;
height: 5px;
border-bottom: 2px solid rgb(255 255 255);
border-left: 2px solid rgb(255 255 255);
border-right: 2px solid rgb(255 255 255);
}

.Btn:hover .tooltip {
opacity: 1;
transition-duration: .3s;
}

.Btn:hover {
backdrop-filter: saturate(1) blur(10px);
border: 1px solid #ffffff;
transition-duration: .3s;
}

.Btn:hover .icon2 {
border-bottom: 2px solid rgb(235, 235, 235);
border-left: 2px solid rgb(235, 235, 235);
border-right: 2px solid rgb(235, 235, 235);
}

.Btn:hover .svgIcon {
fill: rgb(255, 255, 255);
animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-top {

    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }

}

.book-cell {
position: relative;
display: flex;
padding: 20px;
width: 100%;
height: auto;
margin-bottom: 20px;
border-radius: 0.5em .5em 0.5em;
cursor: pointer;
overflow: visible;
background: linear-gradient(#ffffffa8, #c5f6ba52);
box-shadow: 0 5px 8px #c8c8c87a, 0 0 0 1px #ffffff4d inset, 0 1px #fff6 inset;
}

.book-img {
position: relative;
width: 140px;
flex-shrink: 0;
height: 200px;
margin-right: 20px;
transform-origin: left center;
transition: transform 1s ease 0s;
z-index: 2;
margin-top: -32px;
}

.book-img:hover {
transform: perspective(800px) rotateY(-5deg) translateZ(50px);
}

.book-cell + .book-cell {
margin-top: 40px;
}

.book-photo {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
box-shadow: -6px 6px 10px -2px rgba(0,0,0,0.3),               0px 2px 20px 0px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}

.book-photo:hover {
transform: scale(1.03);
}

.book-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: 5px 0;
}

.book-title {
font-size: 20px;
font-weight: 700;
color: #656565;
margin-bottom: 8px;
font-family: "Roboto", sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.book-author {
font-size: 14px;
opacity: 0.8;
font-family: "Roboto", sans-serif;
}

.rate {
display: flex;
align-items: center;
}

fieldset, label {
margin: 0;
padding: 0;
}

.rating {
border: none;
}

.rating > input {
display: none;
}

.rating > label:before {
margin-right: 5px;
font-size: 0.9em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}

.rating > label {
color: #fff;
float: right;
}

.rating > input:checked ~ label, .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label {
color: #FFD700;
}

.rating > input:checked + label:hover, .rating > input:checked ~ label:hover, .rating > label:hover ~ input:checked ~ label, .rating > input:checked ~ label:hover ~ label {
color: #FFD700;
}

.book-voters {
vertical-align: sub;
font-size: 13px;
margin-left: 7px;
white-space: nowrap;
margin-bottom: 10px;
font-family: "Roboto", sans-serif;
}

.book-sum {
font-size: 14px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-family: "Roboto", sans-serif;
opacity: 0.8;
white-space: nowrap;
text-overflow: ellipsis;
}

.book-see {
margin-top: 10px;
text-align: center;
background-color: #fff;
font-weight: 600;
padding: 8px;
font-size: 14px;
width: 80px;
border-radius: 20px;
cursor: pointer;
font-family: "Roboto", sans-serif;
}

@media (max-width: 1103px) {
.book-cell {
width: 100%;
}

.book-img {
width: 140px;
}

.book-title {
font-size: 20px;
}
}

.books, .books img, .books::after, .books::before {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

.list-inline {
padding-left: 0;
list-style: none;
}

.list-inline > li {
display: inline-block;
margin-left: 2em;
}

.list-inline > li:first-child {
margin-left: 0;
}

.books {
cursor: pointer;
display: block;
width: 200px;
height: 300px;
position: relative;
background: white;
border-radius: .5em .5em 0.5em;
z-index: 1;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 9px 20px 0 rgba(0, 0, 0, 0.25);
overflow: hidden;
transition: box-shadow 0.3s linear;
}

.books a {
display: block;
width: 100%;
height: 100%;
}

.books img {
width: inherit;
height: inherit;
transform-origin: 0 50%;
transform: rotateY(0);
transition: all 0.45s ease;
display: block;
}

.books:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 0 9px 20px 0 rgba(0, 0, 0, 0.45);
}

.books:hover img {
transform: rotateY(-25deg);
box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.2);
}

.books::after, .books::before {
content: "";
display: block;
width: inherit;
height: inherit;
position: absolute;
z-index: -1;
top: 0;
background: white;
border: 1px solid #d9d9d9;
}

.books::before {
left: -3px;
}

.books::after {
left: -6px;
}

:root {
--live-indicator-shadow: hsla(0, 79%, 63%, .5);
--rich-blank-fogra-30: hsl(219, 32%, 10%);
--rich-blank-fogra-29: hsl(222, 25%, 10%);
--live-indicator: hsl(0, 79%, 63%);
--oxford-blue-50: hsla(218, 39%, 14%, .8);
--oxford-blue: hsl(218, 39%, 14%);
--light-azure: hsl(214, 84%, 56%);
--off-white: hsl(0, 0%, 88%);
--yellow: hsl(45, 100%, 54%);
--white: hsl(0, 0%, 100%);
--azure: hsl(211, 100%, 50%);
--primary-100: #d4eaf7;
--primary-200: #b6ccd8;
--primary-300: #3b3c3d;
--accent-100: #71c4ef;
--accent-200: #00668c;
--text-100: #1d1c1c;
--text-200: #313d44;
--bg-100: #fffefb;
--bg-200: #f5f4f1;
--bg-300: #cccbc8;
}

.movie-card {
position: relative;
overflow: hidden;
border-radius: 8px;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
margin-bottom: 30px;
will-change: transform, box-shadow;
}

.movie-card .card-head {
position: relative;
aspect-ratio: 2/3;
width: 100%;
height: auto;
overflow: hidden;
border-radius: 8px;
}

@keyframes shimmer {

    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }

}

@keyframes fadeIn {

    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }

}

.movie-card .card-img.loaded ~ .card-head::before {
animation: none;
opacity: 0;
}

.movie-card .card-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: fadeIn 0.5s ease forwards;
background-color: transparent;
z-index: 1;
will-change: transform;
}

.movie-card .card-img.loaded {
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
will-change: transform;
}

.movie-card:hover .card-img.loaded {
transform: scale(1.05);
}

.movie-card .card-overlay {
position: absolute;
inset: 0;
opacity: 0.3;
border-radius: 8px;
transition: opacity 0.5s ease;
z-index: 2;
}

.movie-card:hover .card-overlay {
opacity: 1;
}

.movie-card .bookmark, .movie-card .rating {
position: absolute;
top: 15px;
padding: 6px;
border-radius: 10px;
color: var(--light-azure);
transform: scale(var(--scale));
transition: transform 0.5s ease;
z-index: 3;
cursor: pointer;
opacity: 1;
}

.movie-card .bookmark {
background: var(--oxford-blue);
left: 15px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.movie-card .bookmark.active {
color: var(--yellow);
}

.movie-card .bookmark:hover {
color: var(--yellow);
transform: scale(1.1);
}

.movie-card .rating {
display: flex;
align-items: center;
right: 15px;
background: var(--oxford-blue-50);
padding: 6px 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.movie-card .rating ion-icon {
margin-right: 2px;
color: var(--yellow);
}

.movie-card .rating span {
color: var(--white);
font-size: 13px;
font-weight: 500;
margin-left: 5px;
}

.movie-card ion-icon {
font-size: 16px;
display: block;
--ionicon-stroke-width: 50px;
}

.movie-card .card-title {
font-size: var(--font-size-medium);
font-weight: 500;
margin-bottom: 5px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
}

.movie-card:hover .card-title {
color: var(--light-azure);
}

.movie-card .card-info {
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: var(--font-size-extra-small);
font-weight: 500;
padding: 0 5px;
margin-top: revert-layer;
}

.movie-card .genre, .movie-card .year {
padding: 2px 5px;
border-radius: 4px;
background: var(--oxford-blue-50);
}


.logo.regular {
min-width: 46px;
max-height: 46px;
width: auto;
}

.card-mini {
border-radius: 0.4rem 0.4rem 0rem 0rem;
display: block;
overflow: hidden;
position: relative;
box-shadow: 1px 5px 5px 0px rgba(0,0,0,0.32);
}



.card-mini__game img {
width: 100%;
}

.card-mini__game::after {
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 8;
position: absolute;
background-color: rgba(0,0,0,0);
transition: .3s ease-in-out;
}

.card-mini__game video {
width: 100%;
position: absolute;
top: -14px;
left: 0;
transform: translate(0,110%);
z-index: 10;
transition: .3s ease-in-out;
}

.card-mini__game:hover video {
transform: translate(0,0);
}

.card-mini__game:hover::after {
background-color: rgba(0,0,0,.7);
}

.card-mini__info {
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px;
}

.card-mini__title {
font-size: 1.2em;
white-space: nowrap;
color: #cee8ff;
overflow: hidden;
text-overflow: ellipsis;
}

.card-mini__genres {
margin-bottom: 5px;
}

.genre-item {
display: inline-block;
margin-right: 5px;
font-size: 0.9em;
align-items: center;
color: #cee8ff;
background: #4d648d;
vertical-align: middle;
border-radius: 5px;
padding: .01em 0.2em;
}

.card-mini__description {
font-size: 0.9em;
color: #5a6d8c;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

.card-mini__game1 {
background-color: #0F1C2E;
gap: 16px;
border-radius: 5px;
overflow: hidden;
}

.app-item.style-app-max .item-header {
margin-right: 0;
margin-top: 20px;
}

.posts-item.app-item.style-app-default, .posts-item.app-item.style-app-max {
flex-direction: column;
align-items: center;
}

.app-item {
padding: 10px;
height: 100%;
position: relative;
transform: translateY(0);
will-change: transform;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.posts-item.app-item .item-media {
width: 70px;
height: 0;
padding-bottom: 100%;
border-radius: 20%;
background: --media-bg;
transition: transform .6sease 0s;
box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
}

.item-image img.png-image {
padding: 10px;
}

.item-media img {
position: absolute;
}

.app-item.style-app-max .item-body {
width: 100%;
align-items: center;
}

.app-item.style-app-max .app-content {
width: 100%;
text-align: center;
}

.app-item.style-app-max .app-meta {
margin-top: 10px;
justify-content: center;
}

.tab-more.btn-more.text-xs {
color: #fff;
}

.post-item .entry-desc {
color: #6180a891;
margin-top: 14px;
font-size: .75rem;
line-height: 1.25;
white-space: normal;
}

.top-light {
position: absolute;
left: 0;
right: 0;
top: -7px;
z-index: 1;
margin: auto;
width: 50%;
height: 6px;
border-radius: 10px;
background: #fffef9;
box-shadow: 0 0px 1px 1px #ffc78e, 0 1px 2px 1px #ff942977, 0 2px 6px 1px #e98b2d77, 0 4px 31px 0px #ff9e3d99, 0 38px 40px 26px #ff800044;
}

.clients-section {
position: relative;
z-index: 1;
padding: 0.5rem;
}

.client-item {
position: relative;
display: block;
width: 8rem;
height: 8rem;
border-radius: 1rem;
padding: 1.125rem;
transition: all 0.3s ease;
}

.client-item::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid #1d1d1d;
border-radius: 1rem;
}

.client-item:hover {
background: rgba(229, 229, 229, 0.5);
}

.client-logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
transition: transform 0.3s ease;
}

.client-logo img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 11px;
}

.client-logo::after {
content: '';
position: absolute;
width: 89px;
height: 91px;
filter: blur(42px);
background: inherit;
background-size: 100%;
}

.client-item:hover .client-logo {
transform: translateY(-1.5rem);
}

.link-icon {
position: absolute;
left: calc(50% - 12px);
bottom: 0.5rem;
width: 1.25rem;
height: 1.25rem;
opacity: 0;
transform: translate(-1rem, 1rem);
transition: all 0.3s ease;
}

.client-item:hover .link-icon {
opacity: 1;
transform: translate(0, 0);
}

.link-icon path {
stroke: #b7b7b7;
stroke-linecap: round;
stroke-linejoin: round;
}

.info-popup {
position: absolute;
bottom: calc(100% - -14px);
left: 50%;
transform: translateX(-50%);
width: max-content;
background: rgba(12, 12, 12, 0.82);
backdrop-filter: blur(6px);
border-radius: 0.75rem;
padding: 0.625rem 1.25rem;
opacity: 0;
filter: blur(8px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}

.client-item:hover .info-popup {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}

.info-popup::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
}

.info-popup h3 {
font-family: serif;
font-size: 1.5rem;
color: #fafafa;
margin-bottom: 0.25rem;
}

.info-popup p {
font-family: monospace;
font-size: 0.875rem;
color: #d4d4d4;
text-transform: uppercase;
}

.client-item.colored-img {
border-radius: 30%;
}

.client-item.colored-img::before {
border-radius: 30%;
}

.client-item.colored-img .client-logo img {
border-radius: 30%;
}

.related-posts .col-20 {
width: 25%;
padding: 0 10px;
float: none;
}

.item-title .version-tag {
display: inline-block;
font-size: 12px;
padding: 1px 5px;
border-radius: 3px;
margin-left: 5px;
font-weight: normal;
line-height: 1.4;
vertical-align: middle;
color: #D59A78;
background: rgba(213, 154, 120, 0.1);
}

.app-meta .status-tag {
font-size: 12px;
padding: 1px 5px;
border-radius: 3px;
margin-left: 5px;
font-weight: normal;
line-height: 1.4;
vertical-align: middle;
}

.meta-left {
display: flex;
align-items: center;
border-radius: 3px;
padding: 1px 5px;
margin-top: 1px;
margin-bottom: 1px;
color: #6F98FF;
background: rgba(111, 152, 255, 0.1);
}

.category-link, .tag-link {
text-decoration: none;
display: inline-block;
font-weight: normal;
font-size: .8em;
line-height: 1.2;
padding: .25em .4em;
min-width: .8em;
min-height: .8em;
vertical-align: .1em;
border-radius: 4px;
border-width: 0;
}

.category-link:hover, .tag-link:hover {
color: #007bff;
}

.item-media {
height: 150px;
display: block;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}

.app-item:hover {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.io-slider-tab .tab-title {
color: #fff;
}

@keyframes loading {

    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }

}

.movie-card .card-img.loaded, .post-item1 .media-img.lazy.loaded, .post-item2 .media-img.lazy.loaded {
opacity: 1;
animation: fadein 0.5s;
}

.movie-card .card-head::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
z-index: 1;
border-radius: 8px;
transition: opacity 0.3s ease-in-out;
}

.movie-card .card-head.image-loaded::before, .movie-card .card-img.loaded ~ .card-head::before {
opacity: 0;
visibility: hidden;
}

@keyframes skeleton-loading {

    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }

}

@keyframes fadein {

    from { opacity: 0; }
    to   { opacity: 1; }

}

.posts-item {
border: 1px solid rgba(255, 195, 130, .5);
}