html {
   background: #fff;
 }

 html.dark {
   background: #151515;
   color-scheme: dark;
 }

 html.dark body {
   background: #151515;
 }

 body {
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   font-weight: 400;
   color: #212631;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Roboto', sans-serif;
   font-weight: 700;
   color: var(--headers);
   margin: 0px 0px 15px;
 }

 h1 {
   font-size: 34px;
 }

 h2 {
   font-size: 28px;
 }

 h3 {
   font-size: 23px;
 }

 h4 {
   font-size: 16px;
 }

 a {
   font-weight: 600;
   color: var(--text);
   text-decoration: none;
 }

 a:hover {
   color: var(--fontcolor, #4BB92F);
   text-decoration: underline;
   outline: none;
 }

 p {
   margin: 0px 0px 20px;
   color: var(--text);   
 }

 ol,
 ul {
   margin-top: 0;
   margin-bottom: 20px;
   margin-left: -12px;
 }

 ul.list-style,
 ol.list-style {
   padding-left: 15px;
   margin-bottom: 10px;
 }

 ul.list-style {
   list-style-type: disc;
 }

 ol.list-style {
   list-style-type: decimal;
 }

 blockquote.blockquote {
   position: relative;
   border-left: 0;
   font-weight: 600;
   margin-bottom: 20px;
   padding: 20px;
 }

 blockquote.blockquote:before {
   content: "``";
   font-family: 'Roboto', sans-serif;
   display: block;
   position: absolute;
   left: -5px;
   top: 5px;
   font-size: 240px;
   line-height: 200px;
   color: #eceef2;
   letter-spacing: -30px;
   z-index: -2;
 }

 blockquote {
   color: var(--text);   
   padding: 10px 20px;
   margin: 0 0 20px;
   font-size: 17.5px;
   font-style: italic;
   background: var(--quote); 
   width: 100%;
   border-width: 0 0 0 4px;
   border-style: dashed;
   border-radius: 0 5px 5px 0;
   border-color: var(--fontcolor, #4BB92F);
 }

 figure.figure-img {
   margin-bottom: 20px;
 }

 figure.figure-img figcaption {
   padding-top: 5px;
   font-size: 13px;
   font-weight: 600;
 }

 .input {
   height: 40px;
background: var(--inputs);	
border: 2px solid var(--border) !important;
   width: 100%;
   padding: 0px 15px;
   -webkit-transition: 0.2s border;
   transition: 0.2s border;
 }

 .input:focus {
   border-color: #3d455c;
 }

 textarea.input {
   height: auto;
   padding: 15px;
 }

 .primary-button {
   padding: 9px 45px;
   border: none;
   background-color: var(--categories);
   font-weight: 600;
   text-transform: uppercase;
   font-size: 13px;
   color: var(--buttons);
   -webkit-transition: 0.2s opacity;
   transition: 0.2s opacity;
 }

 .primary-button:hover,
 .primary-button:focus {
   color: #fff;
   opacity: 0.9;
 }

 .section {
   padding-top: 40px;
 }

 .section.section-grey {
   background-color: var(--sections);
   border-bottom: 1px solid var(--sectionborders);
   border-top: 1px solid var(--sectionborders);
   --fade-pattern-color: var(--secondheadcolor);
   --fade-pattern-color-2: var(--newheadcolor);
   --fade-pattern-color-3: var(--thirdheadcolor);
 }

 .section .section-title {
   margin-bottom: 40px;
 }

 .section .section-title h2 {
   font-size: 28px;
 }

 .section-row {
   margin-bottom: 40px;
 }

 img {
   border-radius: 10px;
 }

 /*=========================================================
	NAVIGATION
===========================================================*/
 #nav {
   height: 70px;
 }

 #nav:after {
   content: "";
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   background-color: rgba(33, 38, 49, 0.5);
   z-index: 90;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: 0.2s all;
   transition: 0.2s all;
 }

 #nav.shadow-active:after {
   opacity: 1;
   visibility: visible;
 }

 #nav-fixed {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   z-index: 90;
   -webkit-box-shadow: 0px -1px 0px 0px #eceef2 inset;
   box-shadow: 0px -1px 0px 0px var(--border) inset;
   background-color: var(--bgcolor);
 }

 #nav-fixed.slide-down {
   -webkit-animation: slide-down 0.3s;
   animation: slide-down 0.3s;
 }

 #nav-fixed.slide-up {
   -webkit-animation: slide-up 0.3s;
   animation: slide-up 0.3s;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
 }

 @-webkit-keyframes slide-down {
   from {
     -webkit-transform: translateY(-100%);
     transform: translateY(-100%);
   }

   to {
     -webkit-transform: translateY(0%);
     transform: translateY(0%);
   }
 }

 @keyframes slide-down {
   from {
     -webkit-transform: translateY(-100%);
     transform: translateY(-100%);
   }

   to {
     -webkit-transform: translateY(0%);
     transform: translateY(0%);
   }
 }

 @-webkit-keyframes slide-up {
   from {
     -webkit-transform: translateY(0%);
     transform: translateY(0%);
   }

   to {
     -webkit-transform: translateY(-100%);
     transform: translateY(-100%);
   }
 }

 @keyframes slide-up {
   from {
     -webkit-transform: translateY(0%);
     transform: translateY(0%);
   }

   to {
     -webkit-transform: translateY(-100%);
     transform: translateY(-100%);
   }
 }

 #nav .container {
   position: relative;
 }

 /*----------------------------*\
	logo
\*----------------------------*/
 .nav-logo {
   float: left;
 }

 .nav-logo .logo {
   line-height: 70px;
   display: inline-block;
 }

 .nav-logo .logo>img {
   width: 100%;
   max-height: 70px;
   filter: none;   
 }

 /*----------------------------*\
	menu
\*----------------------------*/
 .nav-menu {
   margin-left: 20px;
 }

 .nav-menu>li {
   position: relative;
 }

 .nav-menu>li>a {
   position: relative;
   padding: 25px 20px;
   -webkit-box-shadow: -1px 0px 0px 0px #eceef2 inset;
   box-shadow: -1px 0px 0px 0px var(--border) inset;
   -webkit-transition: 0.2s color;
   transition: 0.2s color;
 }

 .nav-menu>li:first-child>a {
   border-left: 1px solid var(--border);
 }

 .nav-menu>li>a:after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0px;
   width: 100%;
   height: 4px;
   -webkit-transition: 0.2s width;
   transition: 0.2s width;
 }

 .nav-menu>li.cat-1>a:after {
   background-color: var(--fontcolor, #4BB92F);
 }

 .nav-menu>li.cat-2>a:after {
   background-color: #ff8700;
 }

 .nav-menu>li.cat-3>a:after {
   background-color: #0078ff;
 }

 .nav-menu>li.cat-4>a:after {
   background-color: #8d00ff;
 }

 .nav-menu>li>a:hover,
 .nav-menu>li>a:focus {
   background-color: transparent;
   text-decoration: none;
 }

 .nav-menu>li.cat-1>a:hover,
 .nav-menu>li.cat-1>a:focus {
   color: var(--fontcolor, #4BB92F);
 }

 .nav-menu>li.cat-2>a:hover,
 .nav-menu>li.cat-2>a:focus {
   color: #ff8700;
 }

 .nav-menu>li.cat-3>a:hover,
 .nav-menu>li.cat-3>a:focus {
   color: #0078ff;
 }

 .nav-menu>li.cat-4>a:hover,
 .nav-menu>li.cat-4>a:focus {
   color: #8d00ff;
 }

 .nav-menu>li>a .menu-caret {
   display: inline-block;
   margin-left: 1px;
   color: var(--fontcolor, #4BB92F);
   font-size: 20px;
   font-weight: 800;
   line-height: 1;
   vertical-align: middle;
   transform: translateY(-1px);
 }

 .nav-submenu {
   position: absolute;
   left: 0;
   top: 100%;
   min-width: 240px;
   margin: 0;
   padding: 8px 0;
   list-style: none;
   background: var(--bg);
   border: 1px solid var(--border);
   box-shadow: 0 12px 30px rgba(33, 38, 49, 0.12);
   opacity: 0;
   visibility: hidden;
   transform: translateY(6px);
   transition: opacity 0.2s ease, transform 0.2s ease;
   z-index: 120;
 }

 .nav-menu>li.has-submenu:hover>.nav-submenu,
 .nav-menu>li.has-submenu:focus-within>.nav-submenu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }

 .nav-submenu li {
   width: 100%;
 }

 .nav-submenu li a {
   display: block;
   padding: 10px 16px;
   font-weight: 600;
   line-height: 1.35;
   box-shadow: none;
   border: none;
   white-space: nowrap;
 }

 .nav-submenu li a:after {
   display: none;
 }

 .nav-submenu li a:hover,
 .nav-submenu li a:focus {
   color: var(--fontcolor, #4BB92F);
   background-color: var(--navigation);
 }

 /*----------------------------*\
	search
\*----------------------------*/
 .nav-btns {
   float: right;
 }

 .nav-btns>button {
   padding: 25px 10px;
   border: none;
   line-height: 20px;
   background: transparent;
 }

 .nav-btns .search-form {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0px;
   padding: 0px 15px;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: 0.3s all;
   transition: 0.3s all;
 }

 .nav-btns .search-form.active {
   opacity: 1;
   visibility: visible;
 }

 .nav-btns .search-form .search-input {
   height: 100%;
   width: 100%;
   border: none;
   background: var(--bgcolor);
   padding: 0px;
   font-weight: 600;
   padding-left: 10px;
   box-shadow: 0px -1px 0px 0px var(--border) inset;
 }

 .nav-btns .search-form .search-close {
   position: absolute;
   top: 50%;
   right: 15px;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   border: none;
   background: transparent;
   line-height: 20px;
   color: var(--text);
   font-size: 22px;

 }

 /*----------------------------*\
	nav aside
\*----------------------------*/
 #nav-aside {
   position: fixed;
   right: 0;
   top: 0;
   bottom: 0;
   background-color: var(--bg);
   max-width: 360px;
   width: 100%;
   padding: 80px 20px;
   overflow-y: scroll;
   z-index: 99;
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   -webkit-transition: 0.3s all;
   transition: 0.3s all;
 }

 #nav-aside.active {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
 }

 .nav-aside-menu li a {
   font-family: 'Roboto', sans-serif;
   font-weight: 700;
   font-size: 23px;
 }

 .nav-aside-social li {
   display: inline-block;
 }

 .nav-aside-social li>a {
   display: block;
   width: 30px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   background-color: #212631;
   color: #FFF;
   border-radius: 2px;
   margin-right: 5px;
   -webkit-transition: 0.2s opacity;
   transition: 0.2s opacity;
 }

 .nav-aside-social li>a:hover,
 .nav-aside-social li>a:focus {
   opacity: 0.9;
 }

 .nav-aside-close {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 70px;
   width: 70px;
   line-height: 70px;
   text-align: center;
   background-color: transparent;
   color: var(--text);
   border: none;
   font-size: 22px;
   border-radius: 50%;
   padding: 0;
 }

 /*=========================================================
	HEADER
===========================================================*/
 .page-header {
   position: relative;
   margin: 0;
   padding-top: 60px;
   padding-bottom: 60px;
   background-color: #fbfbfd;
   border-bottom: 2px solid #F4f4f9;
 }

 .page-header .background-img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-position: center;
   background-size: cover;
 }

 .page-header .background-img:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(33, 38, 49, 0.3)), to(transparent));
   background-image: linear-gradient(to top, rgba(33, 38, 49, 0.3) 0%, transparent 100%);
 }

 #post-header.page-header {
   padding-top: 120px;
 }

 .page-header h1 {
   text-transform: capitalize;
   margin-bottom: 0px;
 }

 #post-header.page-header h1 {
   color: #FFF;
 }

 .page-header .post-meta {
   margin: 15px 0px;
 }

 .page-header .post-meta .post-date {
   color: #eceef2;
 }

 .page-header .page-header-breadcrumb {
   margin: 15px 0px;
 }

 .page-header .page-header-breadcrumb li {
   display: inline-block;
 }

 .page-header .page-header-breadcrumb li,
 .page-header .page-header-breadcrumb li a {
   font-size: 13px;
   text-transform: capitalize;
   color: #a7b3c6;
 }

 .page-header .page-header-breadcrumb li a {
   -webkit-transition: 0.2s color;
   transition: 0.2s color;
 }

 .page-header .page-header-breadcrumb li a:hover,
 .page-header .page-header-breadcrumb li a:focus {
   color: #0b0f28;
   text-decoration: none;
 }

 .page-header .page-header-breadcrumb li+li:before {
   content: '/';
   display: inline-block;
   margin: 0px 10px;
 }

 /*=========================================================
	POST
===========================================================*/
 /*----------------------------*\
	post
\*----------------------------*/
 .post {
   margin-bottom: 40px;   
 }

 .post .post-img {
   display: block;
   -webkit-transition: 0.2s opacity;
   transition: 0.2s opacity;
 }

 .post .post-img:hover,
 .post .post-img:focus {
   opacity: 0.9;
 }

 .post .post-img>img {
   width: 100%;
 }

 .post .post-meta {
   margin-top: 15px;
   margin-bottom: 10px;
 }

 .post .post-meta:not(:empty) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
 }

 .post-meta .post-category {
   font-size: 13px;
   text-transform: uppercase;
   padding: 3px 10px;
   font-weight: 500;
   border-radius: 5px;
   /* margin-right: 15px; */
   color: var(--names);
   background-color: var(--categorytheme);
   -webkit-transition: 0.2s opacity;
   transition: 0.2s opacity;
   white-space: nowrap;
   letter-spacing: 0.7px;
 }

 .post-meta .post-category:hover,
 .post-meta .post-category:focus {
   text-decoration: none;
   opacity: 0.9;
 }

 .post-meta .post-category.cat-1 {
   background-color: var(--categorytheme, #4BB92F);
 }

 .post-meta .post-category.cat-2 {
   background-color: #ff8700;
 }

 .post-meta .post-category.cat-3 {
   background-color: #8d00ff;
 }

 .post-meta .post-category.cat-4 {
   background-color: #0078ff;
 }

 .post-meta .post-date {
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
 }
 
.post-meta .post-date-2 {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 9px;
    color: var(--dates);
    background: var(--datatheme);
    letter-spacing: 0.4px;
    clip-path: polygon(
        6px 0,
        100% 0,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        0 100%,
        0 6px
    );    
}

.post-meta .post-date-3 { 
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 10px;
    color: var(--dates);
    background: var(--datatheme);
    letter-spacing: 0.4px;
    clip-path: polygon(
        7px 0,
        100% 0,
        100% 100%,
        7px 100%,
        0 50%
    );
    padding-left: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

.post-meta .post-date-4 {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 10px 3px 13px;
    color: var(--dates);
    background: var(--datatheme);
    letter-spacing: 0.4px;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%,
        7px 50%
    );
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
 
.post-meta .post-date-5 { 
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 10px;
    color: var(--dates);
    background: var(--datatheme);
    border-radius: 5px;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

.post-meta .post-date-5::before {
    content: "";
    position: relative;
    top: -0.7px;	
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    flex-shrink: 0;
} 

.post-meta .post-date-6 {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 8px 3px 23px;
    color: var(--dates);
    background: var(--datatheme);
    border-radius: 5px;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

.post-meta .post-date-6::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 9px;
    height: 9px;
    background: var(--primary-color);
    border-radius: 2px;
    transform:
        translateY(-50%)
        rotate(45deg);
    box-shadow:
        0 0 6px
        color-mix(
            in srgb,
            var(--primary-color) 35%,
            transparent
        );
}

.post-meta .post-date-6::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 7px;
    height: 2px;
    background: var(--datatheme);
    transform:
        translateY(-50%)
        rotate(-45deg);
    border-radius: 2px;
}

.post-meta .post-date-7 { 
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 6px;
    color: var(--text);
    background: var(--bg);
    border-radius: 5px;
    letter-spacing: 0.4px;
	border: 1px solid var(--newhomeborders);
}
.post-meta .post-date-7::before {
    content: "";
    position: relative;
    top: -0.6px;	
    width: 8px;
    height: 8px;
    background: transparent;
    border: 2px solid var(--categorytheme);
    border-radius: 50%;
    flex-shrink: 0;
}


.post-meta .post-date-8 {
    position: relative;
    display: inline-block;
    padding: 2px 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 1.2px;
    color: var(--categorytheme);
    background: transparent;
    border: 1px solid var(--categorytheme);
    border-radius: 2px;
    transform: rotate(-2deg);
    text-transform: uppercase;
    box-shadow:
        inset 0 0 0 2px var(--bg);
    transition: transform 0.2s ease;
}
.post-meta .post-date-8:hover {
    transform: rotate(0deg) scale(1.03);
}

.post-meta .post-date-9 {
    position: relative;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    color: var(--dates);
    background: var(--datatheme);
    clip-path: polygon(
        6px 0,
        calc(100% - 6px) 0,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0 calc(100% - 6px),
        0 6px
    );
}

.post-meta .post-date-10 {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.5px;
    padding: 4px 11px;
    color: var(--dates);
    background: var(--datatheme);
    border-radius: 999px;
}

.post-meta .post-date-11 { 
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 6px;
    color: var(--text);
    background: color-mix(in srgb, var(--sections) 60%, var(--bg));
    border-radius: 5px;
    letter-spacing: 0.4px;
	border: 1px solid var(--newhomeborders);
}
.post-meta .post-date-11::before {
    content: "";
    position: relative;
    top: -0.6px;	
    width: 8px;
    height: 8px;
    background: transparent;
    border: 2px solid var(--categorytheme);
    border-radius: 50%;
    flex-shrink: 0;
}

 .post .post-title {
   font-size: 18px;
   margin-bottom: 7px;
 }

 .post-tags li {
   display: inline-block;
   margin-right: 3px;
   margin-bottom: 5px;
 }

 .post-tags li a {
   display: block;
   color: #fff;
   background-color: #212631;
   padding: 3px 10px;
   font-weight: 600;
   border-radius: 2px;
   -webkit-transition: 0.2s opacity;
   transition: 0.2s opacity;
 }

 /*----------------------------*\
	post thumb
\*----------------------------*/
 .post.post-thumb {
   position: relative;
 }

 .post.post-thumb .post-img:after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
 }

 .post.post-thumb .post-body {
   position: absolute;
   bottom: 0px;
   padding: 20px 15px;
 }

 .post.post-thumb .post-meta .post-date {
   color: var(--dates);
 }

 .post.post-thumb .post-title {
   font-size: 22px;
 }

 .post.post-thumb .post-title>a {
   color: var(--titles);
 }

 /*----------------------------*\
	post widget
\*----------------------------*/
 .post.post-widget:after {
   content: '';
   display: block;
   clear: both;
 }

 .post.post-widget .post-img {
   width: 90px;
   float: left;
   margin-right: 15px;
 }

 .post.post-widget .post-img img {
   width: 100%;
 }

 .post.post-widget .post-title {
   font-size: 18px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 /*----------------------------*\
	post row
\*----------------------------*/
 .post.post-row:after {
   content: '';
   display: block;
   clear: both;
 }

 .post.post-row .post-img {
   width: 40%;
   float: left;
 }

 .post.post-row .post-body {
   margin-left: calc(40% + 30px);
 }
 
 .post.post-row .post-body-2 {
   margin-left: calc(40% + 10px);
 } 

 .post.post-row .post-meta {
   margin-top: 0px;
 }

 .post.post-row .post-title {
   margin-bottom: 15px;
 }

 /*=========================================================
	POST PAGE
===========================================================*/
 .sticky-container {
   position: relative;
   font-family: 'Roboto', sans-serif;
   font-size: 18px;
   color: #212631;
   font-weight: 400;
   letter-spacing: 0.06rem;
 }

 .sticky-container a {
   color: var(--fontcolor, #4BB92F);
 }

 .article-content a {
   color: var(--fontcolor, #4BB92F);
   text-decoration: underline;
 } 

 .sticky-container span>a {
   color: black !important;
   text-decoration: underline;
 }

 .sticky-container a:hover {
   text-decoration-thickness: 1px;
 }
 .article-content a:hover {
   text-decoration-thickness: 2px;
 }

 .sticky-container .sticky-shares {
   position: absolute;
   top: 0;
   left: 0;
 }

 .sticky-shares a {
   display: block;
   margin-bottom: 10px;
   width: 40px;
   height: 40px;
   line-height: 40px;
   text-align: center;
   border-radius: 50%;
   background-color: #fbfbfd;
   color: #a7b3c6;
   border: 1px solid #eceef2;
   -webkit-transition: 0.2s all;
   transition: 0.2s all;
 }

 .sticky-shares a:hover {
   -webkit-transform: scale(1.3);
   -ms-transform: scale(1.3);
   transform: scale(1.3);
 }

 .sticky-shares a.share-facebook:hover {
   color: #3b5998;
   border-color: #3b5998;
 }

 .sticky-shares a.share-twitter:hover {
   color: #55acee;
   border-color: #55acee;
 }

 .sticky-shares a.share-google-plus:hover {
   color: #dd4b39;
   border-color: #dd4b39;
 }

 .sticky-shares a.share-pinterest:hover {
   color: #ff0000;
   border-color: #ff0000;
 }

 .sticky-shares a.share-linkedin:hover {
   color: #007bb5;
   border-color: #007bb5;
 }

 /*----------------------------*\
	author
\*----------------------------*/
 .post-author .media .media-left {
   padding-right: 40px;
 }

 .post-author .media .media-left .media-object {
   width: 120px;
   border-radius: 50%;
 }

 .post-author .author-social {
   margin-top: 15px;
 }

 .post-author .author-social li {
   display: inline-block;
   margin-right: 5px;
 }

 .post-author .author-social li>a {
   display: block;
   width: 30px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   background-color: #a7b3c6;
   color: #FFF;
   border-radius: 2px;
   -webkit-transition: 0.2s opacity;
   transition: 0.2s opacity;
 }

 .post-author .author-social li>a:hover,
 .post-author .author-social li>a:focus {
   color: #FFF;
   opacity: 0.9;
 }

 /*----------------------------*\
	comments
\*----------------------------*/
 .post-comments .media {
   padding-top: 15px;
   border-top: 1px solid #eceef2;
 }

 .post-comments .media:nth-child(1) {
   padding-top: 0px;
   border-top: none;
 }

 .post-comments .media .media-left {
   padding-right: 15px;
 }

 .post-comments .media .media-left .media-object {
   width: 70px;
   border-radius: 50%;
 }

 .post-comments .media .media-body .media-heading h4 {
   text-transform: capitalize;
 }

 .post-comments .media .media-body .media-heading .time {
   font-size: 13px;
   margin-right: 15px;
   color: #a7b3c6;
 }

 .post-comments .media .media-body .media-heading .reply {
   font-size: 13px;
   color: #a7b3c6;
   -webkit-transition: 0.2s color;
   transition: 0.2s color;
 }

 .post-comments .media .media-body .media-heading .reply:hover,
 .post-comments .media .media-body .media-heading .reply:focus {
   color: #212631;
   text-decoration: none;
 }

 /*=========================================================
	Aside
===========================================================*/
 .aside-widget {
   margin-bottom: 40px;
 }

 /*----------------------------*\
	category
\*----------------------------*/
 .category-widget ul li {
   display: block;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--border);
 }

 .category-widget ul li+li {
   margin-top: 10px;
 }

 .category-widget ul li>a {
   display: block;
   -webkit-transition: 0.2s color;
   transition: 0.2s color;
 }

 .category-widget ul li>a>span {
   float: right;
   color: #fff;
   background-color: #212631;
   padding: 0px 5px;
   font-weight: 600;
   border-radius: 2px;
 }

 .category-widget ul li>a.cat-1>span {
   background-color: var(--categorytheme, #4BB92F);
   color: var(--details);
 }

 .category-widget ul li>a.cat-2>span {
   background-color: #ff8700;
 }

 .category-widget ul li>a.cat-3>span {
   background-color: #8d00ff;
 }

 .category-widget ul li>a.cat-4>span {
   background-color: #0078ff;
 }

 .category-widget ul li>a:hover,
 .category-widget ul li>a:focus {
   text-decoration: none;
 }

 .category-widget ul li>a.cat-1:hover,
 .category-widget ul li>a.cat-1:focus {
   color: var(--fontcolor, #4BB92F);
 }

 .category-widget ul li>a.cat-2:hover,
 .category-widget ul li>a.cat-2:focus {
   color: #ff8700;
 }

 .category-widget ul li>a.cat-3:hover,
 .category-widget ul li>a.cat-3:focus {
   color: #0078ff;
 }

 .category-widget ul li>a.cat-4:hover,
 .category-widget ul li>a.cat-4:focus {
   color: #8d00ff;
 }

 /*----------------------------*\
	tags
\*----------------------------*/
 .tags-widget ul li {
   display: inline-block;
   margin-right: 3px;
   margin-bottom: 5px;
 }

 .tags-widget ul li span {
   display: block;
   color: var(--buttons);
   background-color: #212631;
   padding: 3px 10px;
   font-weight: 600;
   border-radius: 2px;
   -webkit-transition: 0.2s opacity;
   transition: 0.2s opacity;
 }

 .tags-widget ul li span:hover,
 .tags-widget ul li span:focus {
   opacity: 0.9;
   color: #fff;
   text-decoration: none;
 }

 /*----------------------------*\
	archive
\*----------------------------*/
 .archive-widget ul li {
   display: block;
   padding-bottom: 10px;
   border-bottom: 1px solid #eceef2;
 }

 .archive-widget ul li+li {
   margin-top: 10px;
 }

 .archive-widget ul li>a {
   display: block;
 }

 /*=========================================================
	FOOTER
===========================================================*/
 #footer {
   padding-bottom: 40px;

 }

 #footer .container {
   padding-top: 50px;
   border-top: 1px solid var(--border);
 }

 .footer-widget {
   margin-bottom: 40px;
 }

 .footer-widget .footer-title {
   margin-bottom: 40px;
   text-transform: capitalize;
   font-size: 18px;
   color: var(--text);
   font-weight: 700;
 }

 .footer-widget a {
   color: #51617b;
   -webkit-transition: 0.2s color;
   transition: 0.2s color;
 }

 .footer-widget a:hover,
 .footer-widget a:focus {
   text-decoration: none;
   color: var(--fontcolor, #4BB92F);
 }

 .footer-logo {
   margin-bottom: 20px;
 }
 
 .footer-logo .logo>img {
   filter: none;
 }

 .footer-nav li {
   display: inline-block;
   margin-right: 15px;
 }

 .footer-links li+li {
   margin-top: 5px;
 }

 .footer-copyright {
   margin-top: 20px;
   color: #51617b;
   font-size: 13px;
 }

 .footer-newsletter form {
   position: relative;
 }

 .footer-newsletter form>input.input {
   padding-right: 55px;
 }

 .footer-newsletter form>.newsletter-btn {
   position: absolute;
   top: 0;
   right: 0;
   height: 40px;
   line-height: 40px;
   width: 40px;
   text-align: center;
   color: #a7b3c6;
   background: transparent;
   border: none;
   border-radius: 0px 2px 2px 0px;
   -webkit-transition: 0.2s opacity;
   transition: 0.2s opacity;
 }

 .footer-newsletter form>.newsletter-btn:hover {
   opacity: 0.9;
 }

 .footer-social {
   margin-top: 20px;
   margin-left: 0px;
 }

 .footer-social li {
   display: inline-block;
   margin-right: 5px;
 }

 .footer-social li>a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   line-height: 30px;
   background-color: var(--fontcolor, #4BB92F);
   color: #FFF;
   border-radius: 2px;
   -webkit-transition: 0.2s opacity;
   transition: 0.2s opacity;
 }

 .footer-social li>a:hover,
 .footer-social li>a:focus {
   color: #FFF;
   opacity: 0.9;
 }

 /*=========================================================
	RESPONSIVE
===========================================================*/
 @media only screen and (max-width: 991px) {
   #nav .nav-menu {
     display: none;
   }

 }

 @media only screen and (max-width: 767px) {
   .page-header h1 {
     font-size: 28px;
   }

   .post.post-row .post-img {
     width: 100%;
     float: none;
   }

   .post.post-row .post-body {
     margin-left: 0px;
   }
   
   .post.post-row .post-body-2 {
     margin-left: 0px;
   }   

   .post.post-row .post-meta {
     margin-top: 15px;
   }

   .post.post-row .post-body p {
     display: none;
   }
   
   .post-2.post-row .post-img {
     width: 100%;
     float: none;
   }

   .post-2.post-row .post-body {
     margin-left: 0px;
   }
   
   .post-2.post-row .post-body-2 {
     margin-left: 0px;
   }   

   .post-2.post-row .post-meta {
     margin-top: 15px;
   }

   .post-2.post-row .post-body p {
     display: none;
   }
   .post-3.post-row .post-img {
     width: 100%;
     float: none;
   }

   .post-3.post-row .post-body {
     margin-left: 0px;
   }
   
   .post-3.post-row .post-body-2 {
     margin-left: 0px;
   }   

   .post-3.post-row .post-meta {
     margin-top: 15px;
   }

   .post-3.post-row .post-body p {
     display: none;
   }
   .post.post-row-2 .post-img {
        width: 100%;
        float: none;
    }

    .post.post-row-2 .post-body {
        margin-left: 0;
        padding: 15px 5px 5px;
    }
 }

 @media only screen and (min-width: 991px) {
   .aside-btn {
     display: none;
   }

   #vertically {
     position: absolute;
     top: 45%;
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
   }

   #vertically2 {
     position: absolute;
     top: 50%;
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
   }

   #vertically3 {
     position: absolute;
     top: 40%;
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
   }
 }

 #linki a:hover {
   color: var(--hovers);
   text-decoration: underline;
 } 

 
 #linki3 a:hover {
   color: var(--hovers);
   text-decoration: underline;
 }
 
 #linki3 {
 margin-bottom: 15px;
 margin-top: 20px;
 }

 #odstep {
   margin-top: 10px;
 }

 #odstep2 {
   margin-top: 10px;
   color: var(--words);
 }

 #odstep3 {
   margin-left: 5px;
   color: var(--buttons);
 }

 #odstep4 {
   margin-left: 5px;
    color: var(--authors);
 }

 #odstep5 {
   margin-left: 5px;
   margin-right: 15px;
   color: var(--authors);
 }

 #autor {
   border-radius: 50%;
   width: 32px;
   border: 2px solid var(--categorytheme);
 }
 
 #autor2 {
   width: 90px;
 }

 #ciemne {
   filter: brightness(70%);
 }

 #ciemne2 {
   filter: brightness(70%);
 }

 #ciemne3 {
   filter: brightness(70%);
 }

 #wysokosc10 {
   filter: brightness(70%);
 }

 #wysokosc11 {
   filter: brightness(70%);
 }

 @media only screen and (min-width: 991px) {

   #ciemne {
     height: 40vh;
     object-fit: cover;
   }

   #ciemne2 {
     height: 26vh;
     object-fit: cover;
   }

   #margines {
     padding-top: 15px;
   }

   #margines2 {
     padding-top: 10px;
   }

   #wysokosc {
     height: 26vh;
     object-fit: cover;
   }

   #wysokosc2 {
     height: 40vh;
     object-fit: cover;
   }

   #wysokosc3 {
     height: 19vh;
     object-fit: cover;
   }

   #wysokosc4 {
     height: 9.5vh;
     object-fit: cover;
   }

   #wysokosc5 {
     height: 26vh;
     object-fit: cover;
   }

   #wysokosc6 {
     height: 33vh;
     object-fit: cover;
   }
   
   #wysokosc15 {
     height: 26vh;
     object-fit: cover;
   }
   
   #wysokosc16 {
     height: 11.5vh;
     object-fit: cover;
   }
   
   #wysokosc17 {
     height: 12vh;
     object-fit: cover;
   } 

   #wysokosc18 {
     height: 14vh;
     object-fit: cover;
   }
   
    #wysokosc19 {
     height: 36vh;
     object-fit: cover;
   }
   
    #wysokosc20 {
     height: 35vh;
     object-fit: cover;
   }
   #wysokosc21 {
     height: 42vh;
     object-fit: cover;
   }   
   #wysokosc22 {
     height: 36.5vh;
     object-fit: cover;
   }  
   #wysokosc23 {
     height: 41.5vh;
     object-fit: cover;
   } 

.smaller-title {
font-size: 17px !important;
}
.smaller-title-2 {
font-size: 18px !important;
}
.smaller-title-3 {
font-size: 17px !important;
margin-right: 5px;
}
.smaller-title-4 {
font-size: 20px !important;
}			
.smaller-body {
padding-top: 13px !important;
}
.smaller-body-2 {
padding-top: 5px !important;
}
.smaller-body-3 {
padding-top: 3px !important;
padding-left: 15px !important;
}
.smaller-body-4 {
padding-top: 5px !important;
margin-bottom: 5px !important;
}


   #wysokosc7 {
     height: 25vh;
     object-fit: cover;
   }

   #wysokosc8 {
     height: 16vh;
     object-fit: cover;
   }

   #wysokosc9 {
     height: 10vh;
     object-fit: cover;
   }

   #wysokosc10 {
     height: 50vh;
     object-fit: cover;
   }

   #wysokosc11 {
     height: 26vh;
     object-fit: cover;
   }

   #wysokosc12 {
     height: 12vh;
     object-fit: cover;
   }

   #lewa {
     width: 70%;
   }

   #prawa {
     width: 30%;
     position: sticky;
     align-self: flex-start;
   }

   #wysokosc13 {
     height: 24vh;
     object-fit: cover;
   }

 }

 @media only screen and (max-width: 991px) {
   #prawa {
     position: static;
   }
 }

 .headings-inline {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .headings-inline h2 {
   margin: 0;
   font-size: 1.5rem;
   color: var(--headers);
 }

 .divider {
   flex: 1;
   height: 11px;
   background-color: var(--dividers, #4BB92F);
 }

 .section-grey .divider {
   background-color: var(--greydivider, #4BB92F);
 }

 #wstep {
   text-align: center;
   margin-bottom: 15px;
   font-size: 16px;
 }

 #tagi span {
   text-decoration: none;
   font-size: 16px;
 }

 #czytaj {
   background-color: var(--quote);
   border-radius: 5px;
   margin: 2rem 0 1rem;
   padding: 1.5rem;
   border-left: 4px solid var(--fontcolor, #4BB92F);
 }

 #bezlisty {
   margin: 0;
   padding: 0;
   list-style: none
 }

 #bezlisty2 {
   padding: 0;
   list-style: none
 }
 
 #bezlisty3 {
   padding: 0px 2px 0px 12px;
   list-style: none
 } 

 table {
   border: 1px solid #212631;
   font-size: 1.8rem;
   max-width: 100%;
   margin-bottom: 20px;
   color: var(--text);	
 }

 th,
 td {
   line-height: 1.4;
   padding: 0.5em;
 }

 th {
   text-align: center;
   background-color: var(--tables);
 }

 #ocena {
   margin-bottom: 40px !important;
 }

 #ciemne3 {
   height: 24vh;
   object-fit: cover;
 }

 #boczne {
   padding: 0px 5px 0px 0px;
 }

 #search-bar {
   height: 46px;
   border: 0.5px solid lightgrey;
   width: 100%;
   padding-right: 40px;
   padding-left: 10px;
   background: var(--inputs);
   border: 2px solid var(--border);	   
 }

 #search-btn {
   height: 45px;
   padding: 10px 20px 10px 20px;
   font-size: 1.1em;
   position: absolute;
   right: 15px;
   background-color: var(--fontcolor, #4BB92F);
   color: var(--details);
   border: none;
 }

 #spis a {
   font-weight: 400;
   color: var(--text);  
   text-decoration: none;
 }

 #spis a:hover {
   color: var(--fontcolor, #4BB92F);
   text-decoration: underline;
   outline: none;
 }


 #posrodku {
   display: flex;
   justify-content: center;
 }

 #pagination {
   margin-top: 50px;
   margin-bottom: 50px;
   background-color: var(--fontcolor, #4BB92F);
   color: var(--details);
 }

 #pagination {
   margin-left: 2px;
   margin-right: 2px;
 }

 #kategoria {
   color: var(--fontcolor, #4BB92F);
 }

 .article-funfact-block>p {
   margin-bottom: 0px !important;
 }

 .article-content img {
   max-width: 100%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
   border-radius: 8px;
   margin-bottom: 20px;
 }

 .article-content .article-table-scroll {
   width: 100%;
   max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   margin-bottom: 0;
   border: 2px solid var(--tableborders);
   border-radius: 12px;
   background-color: var(--bg);
 }

 .article-content .article-table-scroll table {
   width: fit-content;
   min-width: 100%;
   margin: 0;
   margin-left: auto;
   margin-right: auto;
   border: 0;
   border-radius: 0;
   border-collapse: collapse;
   border-spacing: 0;
 }

 .article-content .article-table-scroll th,
 .article-content .article-table-scroll td {
   border: 1px solid var(--tableborders);
 }

 /* Keep only one outer stroke (wrapper border) and use cell borders for inner grid */
 .article-content .article-table-scroll table tr> :first-child {
   border-left: 0;
 }

 .article-content .article-table-scroll table tr> :last-child {
   border-right: 0;
 }

 .article-content .article-table-scroll table>tr:first-child> :is(th, td),
 .article-content .article-table-scroll table> :is(thead, tbody, tfoot)>tr:first-child> :is(th, td) {
   border-top: 0;
 }

 .article-content .article-table-scroll table>tr:last-child> :is(th, td),
 .article-content .article-table-scroll table> :is(thead, tbody, tfoot)>tr:last-child> :is(th, td) {
   border-bottom: 0;
 }

 .article-content div {
   margin-bottom: 20px;
 }

 /* Zagnieżdżone listy */
 ol>li>ol {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
   margin-left: -40px;
 }

 ul>li>ol {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
   margin-left: -40px;
 }

 ol>li>ul {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
   margin-left: -30px;
 }
 
  ul>li>ul {
   margin-top: 1.2rem;
   margin-bottom: 1.5rem;
   margin-left: -10px;
 }

 .article-content div ul:not(li ul) {
   margin-bottom: 0 !important;
 }

 .article-content div li {
   margin-bottom: 7px;
 }

 .article-content div li>p {
   margin: 0 !important;
 }

 .article-content div ul li {
   margin-bottom: 14px !important;
 }

 .article-content div ol li {
   margin-bottom: 20px !important;
 }

 .article-content div ul li ol li,
 .article-content div ol li ol li {
   margin-bottom: 7px !important;
 }
 
 .article-content div ul li ul li {
   margin-bottom: 0px !important;
 }
 
 .article-content div ol li ul li{
   margin-bottom: 0px !important;
 }

 .article-content .article-summary ul li {
   margin-bottom: 7px !important;
 }

 .article-content .article-summary ol li {
   margin-bottom: 7px !important;
 }

 .article-content .article-summary table ul li {
   margin-bottom: 7px !important;
 }

 .article-content .article-summary table ol li {
   margin-bottom: 7px !important;
 }

 .article-content table ul li {
   margin-bottom: 7px !important;
 }

 .article-content table ol li {
   margin-bottom: 7px !important;
 }

 .article-content div ul li::marker {
   color: var(--fontcolor, #4BB92F);
 }

 .article-content div ol li::marker {
   color: var(--fontcolor, #4BB92F);
   font-weight: 700;
 }

 #spistresci {
   font-size: 23px;
   font-weight: 700;
   margin-bottom: 15px;
 }

 #wysokosc14 {
   height: 9.5vh;
   object-fit: cover;
   margin-left: 15px;
 }
 

 #sekcjakomentarzy {
   margin-top: 70px;
 }

 #malygorny {
   margin-top: 10px;
 }

 #malygornyodpowiedz {
   padding-left: 50px;
 }

 #obrazekautora {
   width: 60px;
   border-radius: 23%;
 }

 #datakomentarza {
   margin-left: 10px;
   font-weight: 400;
   font-size: 15px;
 }

 #godzinakomentarza {
   margin-left: 10px;
   font-weight: 400;
   font-size: 15px;
   color: #a6a6a6;
 }

 #czcionkaautora {
   font-size: 20px;
   font-weight: 700;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 5px;
   word-break: break-word;
 }

 #malyprawy {
   padding-right: 20px;
   padding-top: 10px;
 }

 #komentarz {
   font-size: 18px;
   word-wrap: break-word;
   overflow-wrap: break-word;
 }

 #czcionkaautora a {
   font-size: 16px;
   color: #4BB92F;
   margin-left: 10px;
   font-weight: 400;
   white-space: nowrap;
 }

 #wodpowiedzi {
   margin-left: 10px;
   color: #a6a6a6;
   word-break: break-word;
 }

 #mediaodpowiedz {
   margin-top: 5px;
   overflow: hidden;
 }

 /* Responsive styles for mobile comments */
 @media (max-width: 767px) {
   #czcionkaautora {
     font-size: 16px;
     gap: 3px;
   }

   #ciemne3 {
   height: 32vh;
   object-fit: cover;
 }

   #datakomentarza,
   #godzinakomentarza {
     font-size: 13px;
     margin-left: 5px;
   }

   #czcionkaautora a {
     font-size: 14px;
     margin-left: 5px;
   }

   #komentarz {
     font-size: 16px;
   }

   #malygornyodpowiedz {
     padding-left: 20px;
   }

   #malyprawy {
     padding-right: 10px;
   }

   #obrazekautora {
     width: 50px;
   }
 }

 .related-posts {
   margin-bottom: 4rem;
 }

 .related-posts p strong {
   font-size: 18px;
 }

 /* .related-posts ol {
  margin-top: 8px;
} */

 .related-posts ol li {
   font-size: 18px;
   /* margin-bottom: 6px; */
 }
 
ol {
  counter-reset: item;
  list-style: none;
  margin-left: -38px;
}

ol>li {
  counter-increment: item;
  margin-bottom: 6px;
  padding-left: 38px;
  position: relative;
}

ol>li::before {
  content: counter(item);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  margin-right: 7px;
  background: #fff;
  color: var(--fontcolor, #4BB92F);
  background-color: var(--numbers, #4BB92F);
  font-weight: bold;
  border: 1px solid var(--fontcolor, #4BB92F);
  border-radius: 4px;
  position: absolute;
  left: 0;
  top: 0;
  padding-left: 2px;
  padding-top: 2px;
}

ul li::marker {
  font-size: 24px;
  color: var(--fontcolor, #4BB92F);
}

:root {
  --bg: #fff;
  --text: #212631;
  --border: #e1e4ea;
  --link: #212631;
  --headers: #212631;
  --inputs: #fff;
  --authors: #000;
  --bgcolor: color-mix(in srgb, var(--primary-color) 10%, white);
  --numbers: color-mix(in srgb, var(--primary-color, #4BB92F) 5%, white);
  --quote: #f5f5f5;
  --tables: color-mix(in srgb, var(--primary-color, #4BB92F) 10%, white);
  --tableborders: color-mix(in srgb, var(--primary-color, #4BB92F) 85%, black);
  --navigation: color-mix(in srgb, var(--primary-color, #4BB92F) 8%, white);
  --sections: color-mix(in srgb, var(--primary-color, #4BB92F) 50%, white);
  --hovers: #212631; 
  --details: #fff;
  --buttons: #fff;
  --dates: #eceef2; 
  --words: #fff;
  --titles: #fff;
  --categories: #212631;
  --dividers: color-mix(in srgb, var(--primary-color, #4BB92F) 60%, white);
  --greydivider: color-mix(in srgb, var(--primary-color) 15%, white);
  --genre: var(--primary-color, #4BB92F); 
  --names: #fff;
  --fontcolor: color-mix(in srgb, var(--primary-color, #4BB92F) 90%, black);
  --newhovers: #212631;
  --headcolor: color-mix(in srgb, var(--primary-color) 20%, white); 
  --secondheadcolor: color-mix(in srgb, var(--primary-color) 30%, white);
  --thirdheadcolor: color-mix(in srgb, var(--primary-color) 22%, white);
  --fourthheadcolor: color-mix(in srgb, var(--primary-color) 24%, white);
  --categorytheme: color-mix(in srgb, var(--primary-color, #4BB92F) 90%, black); 
  --sectionborders: color-mix(in srgb, var(--primary-color, #4BB92F) 40%, white);
  --homeborders: color-mix(in srgb, var(--primary-color) 32%, white); 
  --datatheme: color-mix(in srgb, var(--primary-color, #4BB92F) 25%, black);  
  --newhomeborders: color-mix(in srgb, var(--primary-color) 50%, white); 
  --corners: color-mix(in srgb, var(--primary-color, #4BB92F) 65%, white);
  --newbackground: color-mix(in srgb, var(--primary-color, #4BB92F) 50%, white);  
  --otherbackground: color-mix(in srgb, var(--primary-color, #4BB92F) 40%, white); 
  --newheadcolor: color-mix(in srgb, var(--primary-color) 38%, white);  
}
body.dark,
html.dark body {
  --bg: #151515;
  --text: #c4c4c4;
  --border: #333333;
  --link: #fff;
  --headers: #cccccc;
  --inputs: #1f1f1f;
  --authors: #c4c4c4;
  --bgcolor: color-mix(in srgb, var(--primary-color, #4BB92F) 15%, black);
  --numbers: color-mix(in srgb, var(--primary-color, #4BB92F) 15%, black);  
  --quote: #262626;
  --tables: color-mix(in srgb, var(--primary-color, #4BB92F) 20%, black); 
  --tableborders: color-mix(in srgb, var(--primary-color, #4BB92F) 30%, black);
  --navigation: color-mix(in srgb, var(--primary-color, #4BB92F) 20%, black);
  --sections: color-mix(in srgb, var(--primary-color, #4BB92F) 30%, black); 
  --hovers: #c4c4c4;
  --details: #000; 
  --buttons: #c4c4c4;
  --dates: #c4c4c4;
  --words: #c4c4c4;
  --titles: #e6e6e6;
  --categories: #47536b;
  --dividers: color-mix(in srgb, var(--primary-color, #4BB92F) 50%, black); 
  --greydivider: #737373;
  --genre: color-mix(in srgb, var(--primary-color, #4BB92F) 80%, black);
  --names: #000;
  --fontcolor: color-mix(in srgb, var(--primary-color) 80%, black);
  --newhovers: color-mix(in srgb, var(--primary-color) 80%, black);
  --headcolor: color-mix(in srgb, var(--primary-color, #4BB92F) 10%, black);
  --secondheadcolor: color-mix(in srgb, var(--primary-color, #4BB92F) 10%, black);
  --thirdheadcolor: color-mix(in srgb, var(--primary-color, #4BB92F) 10%, black);
  --fourthheadcolor: color-mix(in srgb, var(--primary-color, #4BB92F) 10%, black);
  --categorytheme: color-mix(in srgb, var(--primary-color, #4BB92F) 80%, black);
  --sectionborders: color-mix(in srgb, var(--primary-color, #4BB92F) 30%, black); 
  --homeborders: color-mix(in srgb, var(--primary-color, #4BB92F) 10%, black); 
  --datatheme: color-mix(in srgb, var(--primary-color, #4BB92F) 25%, black); 
  --newhomeborders: color-mix(in srgb, var(--primary-color, #4BB92F) 50%, black);
  --corners: transparent;
  --newbackground: color-mix(in srgb, var(--primary-color, #4BB92F) 10%, black);
  --otherbackground: color-mix(in srgb, var(--primary-color, #4BB92F) 10%, black);
  --newheadcolor: color-mix(in srgb, var(--primary-color) 30%, white);  
}
body {
  background: var(--bg);
  color: var(--text);  
}

body.dark .article-summary,
html.dark body .article-summary {
  background-color: color-mix(in srgb, var(--primary-color, #4BB92F) 15%, black) !important;
  color: #c4c4c4;
  border: 3px solid color-mix(in srgb, var(--primary-color, #4BB92F) 25%, black) !important;
}

body.dark .article-funfact-block,
html.dark body .article-funfact-block {
  background-color: color-mix(in srgb, var(--primary-color, #4BB92F) 18%, black) !important;
  color: #c4c4c4;
}
strong {
  color: var(--text);	
}
b {
  color: var(--text);	
}
small {
  color: var(--text);	
}
ul,ol {
color: var(--text);		
}
textarea {
background: var(--inputs);
border: 2px solid var(--border) !important;	
}
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding-left: 7px; 
  color: #222;
}

/* w dark mode zmień kolor ikonki */
body.dark #theme-toggle,
html.dark body #theme-toggle {
  color: #c4c4c4;
}

/* ukrywanie ikon */
#icon-sun {
  display: none;
}

body.dark #icon-moon,
html.dark body #icon-moon {
  display: none;
}

body.dark #icon-sun,
html.dark body #icon-sun {
  display: inline;
}

body.dark .search-modal,
html.dark body .search-modal {
  background-color: var(--bg) !important;
}

body.dark .modal-header,
html.dark body .modal-header {
  border-bottom: 1px solid var(--border) !important;
}

.dark img {
  filter: brightness(0.85);
}

.dark .post-2 {
box-shadow: none;
}

#panel {
font-size: 19px;	
font-weight: 700;
color: var(--headers);
margin: 0px 0px -20px;	
}

#podobne {
font-size: 22px;	
font-weight: 700;
color: var(--headers);	
}

#autorzy {
font-size: 23px;	
font-weight: 700;
color: var(--headers);
margin: 0px 0px 10px;	
}

#komentarze {
font-size: 25px;
font-weight: 700;
color: var(--headers);
margin: 0px 0px 15px;	
}

#przyciski {
margin-bottom: 50px;
margin-top: 30px;	
}

#kategorie {
font-size: 17px;
}
#lewy {
float: left;
margin-right: 15px;
margin-top: 5px;
}
#prawy {
float: right;
margin-left: 10px;
margin-top: 5px;
}
#prawy2 {
float: right;
margin-left: 10px;
margin-top: 5px;
width: 180px;
}
@media only screen and (max-width: 991px) {
#lewy {
width: 30%;	
}
#prawy {
width: 30%;	
}
#prawy2 {
width: 30%;	
}
}
#linki2 a:hover {
   color: var(--newhovers);
   text-decoration: underline;
   outline: none;
}
 #kolor {
   color: var(--words);
}
.article-fade {
  background: linear-gradient(
    to bottom,
    var(--headcolor),
    var(--bg) 70vh
  ) !important;
}
.fade-top {
  background: linear-gradient(
    to bottom,
    var(--headcolor),
    var(--bg) 40vh
  );
}
.fade-top-2 {
  position: relative;  
}
.fade-top-2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    var(--secondheadcolor) 2px,
    transparent 1px
  );
  background-size: 17px 17px;
  mask-image: linear-gradient(
    to bottom,
    black 0,
    transparent 50vh
  );
}
.fade-top-3 {
  position: relative;  
}
.fade-top-3::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      var(--secondheadcolor) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--secondheadcolor) 1px,
      transparent 1px
    );
  background-size:
    30px 30px,
    30px 30px;
  mask-image: linear-gradient(
    to bottom,
    black,
    transparent 50vh
  );
}
.fade-top-4 {
  position: relative;
}

.fade-top-4::before {
  content: "";
  position: absolute;
  inset: 0;

  background: var(--fade-pattern-color, var(--otherbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='260' viewBox='0 0 300 260'%3E%3Cg fill='none' stroke='black' stroke-width='0.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 28 L52 44 L78 30 L112 48 L136 34'/%3E%3Cpath d='M78 30 L70 66 L92 84'/%3E%3Cpath d='M112 48 L130 72 L162 68'/%3E%3Cpath d='M162 68 L184 42 L222 52 L246 32'/%3E%3Cpath d='M184 42 L198 18'/%3E%3Cpath d='M246 32 L270 54 L286 42'/%3E%3Cpath d='M26 112 L58 92 L88 108 L108 96'/%3E%3Cpath d='M58 92 L48 126 L72 144'/%3E%3Cpath d='M88 108 L118 130 L146 116 L166 134'/%3E%3Cpath d='M146 116 L154 88'/%3E%3Cpath d='M166 134 L196 114 L224 132 L254 114'/%3E%3Cpath d='M224 132 L238 158'/%3E%3Cpath d='M18 206 L46 184 L76 198 L104 182'/%3E%3Cpath d='M76 198 L84 224 L110 238'/%3E%3Cpath d='M104 182 L132 202 L158 186 L180 204'/%3E%3Cpath d='M158 186 L170 160'/%3E%3Cpath d='M180 204 L212 188 L240 206 L270 190'/%3E%3Cpath d='M240 206 L252 232'/%3E%3Cpath d='M52 44 L38 64'/%3E%3Cpath d='M130 72 L142 92'/%3E%3Cpath d='M196 114 L188 142'/%3E%3Cpath d='M46 184 L34 164'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='14' cy='28' r='2.2'/%3E%3Ccircle cx='52' cy='44' r='2.2'/%3E%3Ccircle cx='78' cy='30' r='2.2'/%3E%3Ccircle cx='112' cy='48' r='2.2'/%3E%3Ccircle cx='162' cy='68' r='2.2'/%3E%3Ccircle cx='184' cy='42' r='2.2'/%3E%3Ccircle cx='222' cy='52' r='2.2'/%3E%3Ccircle cx='246' cy='32' r='2.2'/%3E%3Ccircle cx='26' cy='112' r='2.2'/%3E%3Ccircle cx='58' cy='92' r='2.2'/%3E%3Ccircle cx='88' cy='108' r='2.2'/%3E%3Ccircle cx='146' cy='116' r='2.2'/%3E%3Ccircle cx='166' cy='134' r='2.2'/%3E%3Ccircle cx='224' cy='132' r='2.2'/%3E%3Ccircle cx='18' cy='206' r='2.2'/%3E%3Ccircle cx='76' cy='198' r='2.2'/%3E%3Ccircle cx='104' cy='182' r='2.2'/%3E%3Ccircle cx='158' cy='186' r='2.2'/%3E%3Ccircle cx='180' cy='204' r='2.2'/%3E%3Ccircle cx='240' cy='206' r='2.2'/%3E%3Ccircle cx='38' cy='64' r='1.7'/%3E%3Ccircle cx='142' cy='92' r='1.7'/%3E%3Ccircle cx='188' cy='142' r='1.7'/%3E%3Ccircle cx='34' cy='164' r='1.7'/%3E%3Ccircle cx='252' cy='232' r='1.7'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black,
      transparent 50vh
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='260' viewBox='0 0 300 260'%3E%3Cg fill='none' stroke='black' stroke-width='0.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 28 L52 44 L78 30 L112 48 L136 34'/%3E%3Cpath d='M78 30 L70 66 L92 84'/%3E%3Cpath d='M112 48 L130 72 L162 68'/%3E%3Cpath d='M162 68 L184 42 L222 52 L246 32'/%3E%3Cpath d='M184 42 L198 18'/%3E%3Cpath d='M246 32 L270 54 L286 42'/%3E%3Cpath d='M26 112 L58 92 L88 108 L108 96'/%3E%3Cpath d='M58 92 L48 126 L72 144'/%3E%3Cpath d='M88 108 L118 130 L146 116 L166 134'/%3E%3Cpath d='M146 116 L154 88'/%3E%3Cpath d='M166 134 L196 114 L224 132 L254 114'/%3E%3Cpath d='M224 132 L238 158'/%3E%3Cpath d='M18 206 L46 184 L76 198 L104 182'/%3E%3Cpath d='M76 198 L84 224 L110 238'/%3E%3Cpath d='M104 182 L132 202 L158 186 L180 204'/%3E%3Cpath d='M158 186 L170 160'/%3E%3Cpath d='M180 204 L212 188 L240 206 L270 190'/%3E%3Cpath d='M240 206 L252 232'/%3E%3Cpath d='M52 44 L38 64'/%3E%3Cpath d='M130 72 L142 92'/%3E%3Cpath d='M196 114 L188 142'/%3E%3Cpath d='M46 184 L34 164'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='14' cy='28' r='2.2'/%3E%3Ccircle cx='52' cy='44' r='2.2'/%3E%3Ccircle cx='78' cy='30' r='2.2'/%3E%3Ccircle cx='112' cy='48' r='2.2'/%3E%3Ccircle cx='162' cy='68' r='2.2'/%3E%3Ccircle cx='184' cy='42' r='2.2'/%3E%3Ccircle cx='222' cy='52' r='2.2'/%3E%3Ccircle cx='246' cy='32' r='2.2'/%3E%3Ccircle cx='26' cy='112' r='2.2'/%3E%3Ccircle cx='58' cy='92' r='2.2'/%3E%3Ccircle cx='88' cy='108' r='2.2'/%3E%3Ccircle cx='146' cy='116' r='2.2'/%3E%3Ccircle cx='166' cy='134' r='2.2'/%3E%3Ccircle cx='224' cy='132' r='2.2'/%3E%3Ccircle cx='18' cy='206' r='2.2'/%3E%3Ccircle cx='76' cy='198' r='2.2'/%3E%3Ccircle cx='104' cy='182' r='2.2'/%3E%3Ccircle cx='158' cy='186' r='2.2'/%3E%3Ccircle cx='180' cy='204' r='2.2'/%3E%3Ccircle cx='240' cy='206' r='2.2'/%3E%3Ccircle cx='38' cy='64' r='1.7'/%3E%3Ccircle cx='142' cy='92' r='1.7'/%3E%3Ccircle cx='188' cy='142' r='1.7'/%3E%3Ccircle cx='34' cy='164' r='1.7'/%3E%3Ccircle cx='252' cy='232' r='1.7'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black,
      transparent 50vh
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.fade-top-5 {
  position: relative;  
}
.fade-top-5::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    transparent 7px,
    var(--secondheadcolor) 6px,
    var(--secondheadcolor) 7px,
    transparent 9px
  );
  background-size: 35px 35px;
  mask-image: linear-gradient(
    to bottom,
    black,
    transparent 50vh
  );
}
.fade-top-6 {
  position: relative;
  
}
.fade-top-6::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fade-pattern-color-2, var(--thirdheadcolor));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M10,10 L10,50 L50,50 L50,90 L100,90 L100,30 L140,30'/%3E%3Ccircle cx='50' cy='50' r='3' fill='black'/%3E%3Ccircle cx='50' cy='90' r='3' fill='black'/%3E%3Ccircle cx='100' cy='90' r='3' fill='black'/%3E%3Ccircle cx='100' cy='30' r='3' fill='black'/%3E%3Cpath d='M10,110 L60,110 L60,140 L110,140 L110,120 L150,120'/%3E%3Ccircle cx='60' cy='110' r='3' fill='black'/%3E%3Ccircle cx='60' cy='140' r='3' fill='black'/%3E%3Ccircle cx='110' cy='140' r='3' fill='black'/%3E%3Ccircle cx='110' cy='120' r='3' fill='black'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 50vh);
  -webkit-mask-composite: source-in;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M10,10 L10,50 L50,50 L50,90 L100,90 L100,30 L140,30'/%3E%3Ccircle cx='50' cy='50' r='3' fill='black'/%3E%3Ccircle cx='50' cy='90' r='3' fill='black'/%3E%3Ccircle cx='100' cy='90' r='3' fill='black'/%3E%3Ccircle cx='100' cy='30' r='3' fill='black'/%3E%3Cpath d='M10,110 L60,110 L60,140 L110,140 L110,120 L150,120'/%3E%3Ccircle cx='60' cy='110' r='3' fill='black'/%3E%3Ccircle cx='60' cy='140' r='3' fill='black'/%3E%3Ccircle cx='110' cy='140' r='3' fill='black'/%3E%3Ccircle cx='110' cy='120' r='3' fill='black'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 50vh);
  mask-composite: intersect;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-repeat: repeat, no-repeat;
}
.fade-top-7 {
  position: relative;  
}
.fade-top-7::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 12% 5%,
      transparent 0 32px,
      var(--fade-pattern-color-2, var(--thirdheadcolor)) 33px 34px,
      transparent 35px 55px,
      var(--fade-pattern-color-2, var(--thirdheadcolor)) 56px 57px,
      transparent 58px 82px,
      var(--fade-pattern-color-2, var(--thirdheadcolor)) 83px 84px,
      transparent 85px
    ),
    radial-gradient(
      circle at 58% -8%,
      transparent 0 48px,
      var(--fade-pattern-color-2, var(--thirdheadcolor)) 49px 50px,
      transparent 51px 78px,
      var(--fade-pattern-color-2, var(--thirdheadcolor)) 79px 80px,
      transparent 81px 112px,
      var(--fade-pattern-color-2, var(--thirdheadcolor)) 113px 114px,
      transparent 115px
    ),
    radial-gradient(
      circle at 91% 11%,
      transparent 0 25px,
      var(--fade-pattern-color-2, var(--thirdheadcolor)) 26px 27px,
      transparent 28px 47px,
      var(--fade-pattern-color-2, var(--thirdheadcolor)) 48px 49px,
      transparent 50px 72px,
      var(--fade-pattern-color-2, var(--thirdheadcolor)) 73px 74px,
      transparent 75px
    );
  background-size: 720px 240px;
  background-repeat: repeat;
  mask-image: linear-gradient(
    to bottom,
    black 0,
    black 9vh,
    transparent 25vh
  );
}
.fade-top-8 {
  position: relative;
}

.fade-top-8::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--secondheadcolor);

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='black' stroke-width='0.8'%3E%3Cline x1='20' y1='20' x2='70' y2='40'/%3E%3Cline x1='70' y1='40' x2='60' y2='90'/%3E%3Cline x1='20' y1='20' x2='60' y2='90'/%3E%3Cline x1='70' y1='40' x2='130' y2='20'/%3E%3Cline x1='130' y1='20' x2='150' y2='70'/%3E%3Cline x1='70' y1='40' x2='150' y2='70'/%3E%3Cline x1='150' y1='70' x2='200' y2='30'/%3E%3Cline x1='200' y1='30' x2='210' y2='90'/%3E%3Cline x1='150' y1='70' x2='210' y2='90'/%3E%3Cline x1='60' y1='90' x2='110' y2='120'/%3E%3Cline x1='110' y1='120' x2='150' y2='70'/%3E%3Cline x1='210' y1='90' x2='190' y2='150'/%3E%3Cline x1='110' y1='120' x2='190' y2='150'/%3E%3Cline x1='20' y1='20' x2='10' y2='120'/%3E%3Cline x1='10' y1='120' x2='60' y2='90'/%3E%3Cline x1='10' y1='120' x2='40' y2='190'/%3E%3Cline x1='110' y1='120' x2='90' y2='190'/%3E%3Cline x1='40' y1='190' x2='90' y2='190'/%3E%3Cline x1='190' y1='150' x2='170' y2='210'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='20' cy='20' r='2.5'/%3E%3Ccircle cx='70' cy='40' r='2.5'/%3E%3Ccircle cx='60' cy='90' r='2.5'/%3E%3Ccircle cx='130' cy='20' r='2.5'/%3E%3Ccircle cx='150' cy='70' r='2.5'/%3E%3Ccircle cx='200' cy='30' r='2.5'/%3E%3Ccircle cx='210' cy='90' r='2.5'/%3E%3Ccircle cx='110' cy='120' r='2.5'/%3E%3Ccircle cx='190' cy='150' r='2.5'/%3E%3Ccircle cx='10' cy='120' r='2.5'/%3E%3Ccircle cx='40' cy='190' r='2.5'/%3E%3Ccircle cx='90' cy='190' r='2.5'/%3E%3Ccircle cx='170' cy='210' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 60vh);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='black' stroke-width='0.8'%3E%3Cline x1='20' y1='20' x2='70' y2='40'/%3E%3Cline x1='70' y1='40' x2='60' y2='90'/%3E%3Cline x1='20' y1='20' x2='60' y2='90'/%3E%3Cline x1='70' y1='40' x2='130' y2='20'/%3E%3Cline x1='130' y1='20' x2='150' y2='70'/%3E%3Cline x1='70' y1='40' x2='150' y2='70'/%3E%3Cline x1='150' y1='70' x2='200' y2='30'/%3E%3Cline x1='200' y1='30' x2='210' y2='90'/%3E%3Cline x1='150' y1='70' x2='210' y2='90'/%3E%3Cline x1='60' y1='90' x2='110' y2='120'/%3E%3Cline x1='110' y1='120' x2='150' y2='70'/%3E%3Cline x1='210' y1='90' x2='190' y2='150'/%3E%3Cline x1='110' y1='120' x2='190' y2='150'/%3E%3Cline x1='20' y1='20' x2='10' y2='120'/%3E%3Cline x1='10' y1='120' x2='60' y2='90'/%3E%3Cline x1='10' y1='120' x2='40' y2='190'/%3E%3Cline x1='110' y1='120' x2='90' y2='190'/%3E%3Cline x1='40' y1='190' x2='90' y2='190'/%3E%3Cline x1='190' y1='150' x2='170' y2='210'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='20' cy='20' r='2.5'/%3E%3Ccircle cx='70' cy='40' r='2.5'/%3E%3Ccircle cx='60' cy='90' r='2.5'/%3E%3Ccircle cx='130' cy='20' r='2.5'/%3E%3Ccircle cx='150' cy='70' r='2.5'/%3E%3Ccircle cx='200' cy='30' r='2.5'/%3E%3Ccircle cx='210' cy='90' r='2.5'/%3E%3Ccircle cx='110' cy='120' r='2.5'/%3E%3Ccircle cx='190' cy='150' r='2.5'/%3E%3Ccircle cx='10' cy='120' r='2.5'/%3E%3Ccircle cx='40' cy='190' r='2.5'/%3E%3Ccircle cx='90' cy='190' r='2.5'/%3E%3Ccircle cx='170' cy='210' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 60vh);
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fade-top-9 {
  position: relative;  
}
.fade-top-9::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      var(--secondheadcolor) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--secondheadcolor) 1px,
      transparent 1px
    );
  background-size:
    15px 15px,
    15px 15px;
  mask-image: linear-gradient(
    to bottom,
    black,
    transparent 50vh
  );
}
.fade-top-10 {
  position: relative;
}

.fade-top-10::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    var(--secondheadcolor) 0 2px,
    transparent 2px 4px
  );

  -webkit-mask-image:
    repeating-radial-gradient(circle at 50% 0%, black 0 30px, transparent 30px 60px),
    linear-gradient(to bottom, black, transparent 50vh);
  mask-image:
    repeating-radial-gradient(circle at 50% 0%, black 0 30px, transparent 30px 60px),
    linear-gradient(to bottom, black, transparent 50vh);

  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fade-top-11 {
  position: relative;
}

.fade-top-11::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--secondheadcolor);

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160' viewBox='0 0 300 160'%3E%3Cdefs%3E%3Cmarker id='ah' markerWidth='6' markerHeight='6' refX='4' refY='3' orient='auto'%3E%3Cpath d='M0,0 L6,3 L0,6 Z' fill='black'/%3E%3C/marker%3E%3C/defs%3E%3Cg stroke='black' stroke-width='1.4' fill='none'%3E%3Cline x1='10' y1='15' x2='30' y2='10' marker-end='url(%23ah)'/%3E%3Cline x1='45' y1='20' x2='68' y2='30' marker-end='url(%23ah)'/%3E%3Cline x1='85' y1='15' x2='105' y2='8' marker-end='url(%23ah)'/%3E%3Cline x1='120' y1='25' x2='140' y2='35' marker-end='url(%23ah)'/%3E%3Cline x1='155' y1='15' x2='178' y2='12' marker-end='url(%23ah)'/%3E%3Cline x1='10' y1='60' x2='32' y2='70' marker-end='url(%23ah)'/%3E%3Cline x1='50' y1='65' x2='70' y2='55' marker-end='url(%23ah)'/%3E%3Cline x1='90' y1='70' x2='112' y2='78' marker-end='url(%23ah)'/%3E%3Cline x1='130' y1='60' x2='150' y2='52' marker-end='url(%23ah)'/%3E%3Cline x1='10' y1='105' x2='30' y2='98' marker-end='url(%23ah)'/%3E%3Cline x1='45' y1='110' x2='68' y2='118' marker-end='url(%23ah)'/%3E%3Cline x1='200' y1='20' x2='220' y2='28' marker-end='url(%23ah)'/%3E%3Cline x1='235' y1='15' x2='258' y2='8' marker-end='url(%23ah)'/%3E%3Cline x1='200' y1='65' x2='222' y2='58' marker-end='url(%23ah)'/%3E%3Cline x1='240' y1='70' x2='260' y2='78' marker-end='url(%23ah)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 50vh);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160' viewBox='0 0 300 160'%3E%3Cdefs%3E%3Cmarker id='ah' markerWidth='6' markerHeight='6' refX='4' refY='3' orient='auto'%3E%3Cpath d='M0,0 L6,3 L0,6 Z' fill='black'/%3E%3C/marker%3E%3C/defs%3E%3Cg stroke='black' stroke-width='1.4' fill='none'%3E%3Cline x1='10' y1='15' x2='30' y2='10' marker-end='url(%23ah)'/%3E%3Cline x1='45' y1='20' x2='68' y2='30' marker-end='url(%23ah)'/%3E%3Cline x1='85' y1='15' x2='105' y2='8' marker-end='url(%23ah)'/%3E%3Cline x1='120' y1='25' x2='140' y2='35' marker-end='url(%23ah)'/%3E%3Cline x1='155' y1='15' x2='178' y2='12' marker-end='url(%23ah)'/%3E%3Cline x1='10' y1='60' x2='32' y2='70' marker-end='url(%23ah)'/%3E%3Cline x1='50' y1='65' x2='70' y2='55' marker-end='url(%23ah)'/%3E%3Cline x1='90' y1='70' x2='112' y2='78' marker-end='url(%23ah)'/%3E%3Cline x1='130' y1='60' x2='150' y2='52' marker-end='url(%23ah)'/%3E%3Cline x1='10' y1='105' x2='30' y2='98' marker-end='url(%23ah)'/%3E%3Cline x1='45' y1='110' x2='68' y2='118' marker-end='url(%23ah)'/%3E%3Cline x1='200' y1='20' x2='220' y2='28' marker-end='url(%23ah)'/%3E%3Cline x1='235' y1='15' x2='258' y2='8' marker-end='url(%23ah)'/%3E%3Cline x1='200' y1='65' x2='222' y2='58' marker-end='url(%23ah)'/%3E%3Cline x1='240' y1='70' x2='260' y2='78' marker-end='url(%23ah)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 50vh);

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fade-top-12 {
  position: relative;
}

.fade-top-12::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fade-pattern-color, var(--secondheadcolor));
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180' viewBox='0 0 240 180'%3E%3Cg fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M14 28 C24 18 34 38 44 28 C54 18 64 38 74 28'/%3E%3Cpath d='M96 20 C104 12 112 28 120 20 C128 12 136 28 144 20'/%3E%3Cpath d='M167 31 C176 20 185 42 194 31 C203 20 212 42 221 31'/%3E%3Cpath d='M36 78 C46 66 56 90 66 78 C76 66 86 90 96 78'/%3E%3Cpath d='M126 70 C134 61 142 79 150 70 C158 61 166 79 174 70'/%3E%3Cpath d='M190 92 C198 82 206 102 214 92'/%3E%3Cpath d='M18 126 C27 116 36 136 45 126 C54 116 63 136 72 126'/%3E%3Cpath d='M95 140 C104 129 113 151 122 140 C131 129 140 151 149 140'/%3E%3Cpath d='M171 125 C180 113 189 137 198 125 C207 113 216 137 225 125'/%3E%3Cpath d='M43 157 H55'/%3E%3Cpath d='M111 101 H123'/%3E%3Cpath d='M205 56 H217'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0,
      black 10vh,
      transparent 32vh
    );
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180' viewBox='0 0 240 180'%3E%3Cg fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M14 28 C24 18 34 38 44 28 C54 18 64 38 74 28'/%3E%3Cpath d='M96 20 C104 12 112 28 120 20 C128 12 136 28 144 20'/%3E%3Cpath d='M167 31 C176 20 185 42 194 31 C203 20 212 42 221 31'/%3E%3Cpath d='M36 78 C46 66 56 90 66 78 C76 66 86 90 96 78'/%3E%3Cpath d='M126 70 C134 61 142 79 150 70 C158 61 166 79 174 70'/%3E%3Cpath d='M190 92 C198 82 206 102 214 92'/%3E%3Cpath d='M18 126 C27 116 36 136 45 126 C54 116 63 136 72 126'/%3E%3Cpath d='M95 140 C104 129 113 151 122 140 C131 129 140 151 149 140'/%3E%3Cpath d='M171 125 C180 113 189 137 198 125 C207 113 216 137 225 125'/%3E%3Cpath d='M43 157 H55'/%3E%3Cpath d='M111 101 H123'/%3E%3Cpath d='M205 56 H217'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0,
      black 10vh,
      transparent 32vh
    );
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}
.fade-top-13 {
  position: relative;
}

.fade-top-13::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fade-pattern-color-3, var(--newbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160' viewBox='0 0 300 160'%3E%3Cg stroke='black' stroke-width='0.7' fill='none'%3E%3Crect x='20' y='20' width='20' height='20' rx='1.5'/%3E%3Crect x='100' y='60' width='20' height='20' rx='1.5'/%3E%3Crect x='200' y='30' width='20' height='20' rx='1.5'/%3E%3Crect x='260' y='100' width='20' height='20' rx='1.5'/%3E%3Crect x='50' y='110' width='20' height='20' rx='1.5'/%3E%3Cpath d='M40,30 H70 V70 H100'/%3E%3Cpath d='M120,70 H150 V40 H200'/%3E%3Cpath d='M220,40 H240 V100 H260'/%3E%3Cpath d='M20,40 V90 H50 V110'/%3E%3Cpath d='M70,120 H0'/%3E%3Cpath d='M280,110 H300'/%3E%3Cpath d='M40,20 V0'/%3E%3Cpath d='M200,30 V0'/%3E%3Cg fill='black'%3E%3Ccircle cx='70' cy='70' r='1.8'/%3E%3Ccircle cx='150' cy='70' r='1.8'/%3E%3Ccircle cx='150' cy='40' r='1.8'/%3E%3Ccircle cx='240' cy='40' r='1.8'/%3E%3Ccircle cx='240' cy='100' r='1.8'/%3E%3Ccircle cx='20' cy='90' r='1.8'/%3E%3Ccircle cx='50' cy='90' r='1.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 50vh);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160' viewBox='0 0 300 160'%3E%3Cg stroke='black' stroke-width='0.7' fill='none'%3E%3Crect x='20' y='20' width='20' height='20' rx='1.5'/%3E%3Crect x='100' y='60' width='20' height='20' rx='1.5'/%3E%3Crect x='200' y='30' width='20' height='20' rx='1.5'/%3E%3Crect x='260' y='100' width='20' height='20' rx='1.5'/%3E%3Crect x='50' y='110' width='20' height='20' rx='1.5'/%3E%3Cpath d='M40,30 H70 V70 H100'/%3E%3Cpath d='M120,70 H150 V40 H200'/%3E%3Cpath d='M220,40 H240 V100 H260'/%3E%3Cpath d='M20,40 V90 H50 V110'/%3E%3Cpath d='M70,120 H0'/%3E%3Cpath d='M280,110 H300'/%3E%3Cpath d='M40,20 V0'/%3E%3Cpath d='M200,30 V0'/%3E%3Cg fill='black'%3E%3Ccircle cx='70' cy='70' r='1.8'/%3E%3Ccircle cx='150' cy='70' r='1.8'/%3E%3Ccircle cx='150' cy='40' r='1.8'/%3E%3Ccircle cx='240' cy='40' r='1.8'/%3E%3Ccircle cx='240' cy='100' r='1.8'/%3E%3Ccircle cx='20' cy='90' r='1.8'/%3E%3Ccircle cx='50' cy='90' r='1.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 50vh);

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fade-top-14 {
  position: relative;
}

.fade-top-14::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fade-pattern-color-3, var(--newbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160' viewBox='0 0 300 160'%3E%3Cg stroke='black' stroke-width='0.7' fill='none'%3E%3Cg transform='translate(50,40)'%3E%3Ccircle r='2.5' fill='black'/%3E%3Cellipse rx='30' ry='12'/%3E%3Cellipse rx='30' ry='12' transform='rotate(60)'/%3E%3Cellipse rx='30' ry='12' transform='rotate(120)'/%3E%3C/g%3E%3Cg transform='translate(180,80)'%3E%3Ccircle r='2.5' fill='black'/%3E%3Cellipse rx='24' ry='9'/%3E%3Cellipse rx='24' ry='9' transform='rotate(60)'/%3E%3Cellipse rx='24' ry='9' transform='rotate(120)'/%3E%3C/g%3E%3Cg transform='translate(270,25)'%3E%3Ccircle r='2' fill='black'/%3E%3Cellipse rx='18' ry='7'/%3E%3Cellipse rx='18' ry='7' transform='rotate(60)'/%3E%3C/g%3E%3Cg transform='translate(90,130)'%3E%3Ccircle r='2' fill='black'/%3E%3Cellipse rx='20' ry='8'/%3E%3Cellipse rx='20' ry='8' transform='rotate(60)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 50vh);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160' viewBox='0 0 300 160'%3E%3Cg stroke='black' stroke-width='0.7' fill='none'%3E%3Cg transform='translate(50,40)'%3E%3Ccircle r='2.5' fill='black'/%3E%3Cellipse rx='30' ry='12'/%3E%3Cellipse rx='30' ry='12' transform='rotate(60)'/%3E%3Cellipse rx='30' ry='12' transform='rotate(120)'/%3E%3C/g%3E%3Cg transform='translate(180,80)'%3E%3Ccircle r='2.5' fill='black'/%3E%3Cellipse rx='24' ry='9'/%3E%3Cellipse rx='24' ry='9' transform='rotate(60)'/%3E%3Cellipse rx='24' ry='9' transform='rotate(120)'/%3E%3C/g%3E%3Cg transform='translate(270,25)'%3E%3Ccircle r='2' fill='black'/%3E%3Cellipse rx='18' ry='7'/%3E%3Cellipse rx='18' ry='7' transform='rotate(60)'/%3E%3C/g%3E%3Cg transform='translate(90,130)'%3E%3Ccircle r='2' fill='black'/%3E%3Cellipse rx='20' ry='8'/%3E%3Cellipse rx='20' ry='8' transform='rotate(60)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 50vh);

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fade-top-15 {
  position: relative;
}

.fade-top-15::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fade-pattern-color-3, var(--newbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160' viewBox='0 0 300 160'%3E%3Cg stroke='black' stroke-width='0.8' fill='none'%3E%3Cg transform='translate(30,30) rotate(20)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(100,60) rotate(-15)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(180,25) rotate(40)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(250,70) rotate(-30)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(60,110) rotate(10)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(150,130) rotate(-25)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(220,120) rotate(15)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 50vh);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160' viewBox='0 0 300 160'%3E%3Cg stroke='black' stroke-width='0.8' fill='none'%3E%3Cg transform='translate(30,30) rotate(20)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(100,60) rotate(-15)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(180,25) rotate(40)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(250,70) rotate(-30)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(60,110) rotate(10)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(150,130) rotate(-25)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3Cg transform='translate(220,120) rotate(15)'%3E%3Cpath d='M0,0 C10,-15 25,-15 30,0 C25,15 10,15 0,0 Z'/%3E%3Cline x1='0' y1='0' x2='30' y2='0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom, black, transparent 50vh);

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fade-top-16 {
  position: relative;
}

.fade-top-16::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50vh;
  background: var(--fade-pattern-color, var(--otherbackground));
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Cg fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cg transform='translate(25 20)'%3E%3Cpath d='M0 0 H34 V28 H8 V8 H26 V20 H16 V14'/%3E%3C/g%3E%3Cg transform='translate(105 28) rotate(90 18 18)'%3E%3Cpath d='M0 0 H36 V34 H8 V8 H28 V26 H16 V14 H22'/%3E%3C/g%3E%3Cg transform='translate(205 18) rotate(180 18 18)'%3E%3Cpath d='M0 0 H34 V30 H6 V6 H28 V24 H14 V12 H22'/%3E%3C/g%3E%3Cg transform='translate(265 65) rotate(270 18 18)'%3E%3Cpath d='M0 0 H36 V32 H10 V10 H28 V24 H16 V16 H22'/%3E%3C/g%3E%3Cg transform='translate(55 100) rotate(180 18 18)'%3E%3Cpath d='M0 0 H34 V30 H8 V8 H26 V22 H14 V14 H20'/%3E%3C/g%3E%3Cg transform='translate(145 115) rotate(90 18 18)'%3E%3Cpath d='M0 0 H36 V34 H6 V6 H30 V26 H14 V12 H24'/%3E%3C/g%3E%3Cg transform='translate(235 120)'%3E%3Cpath d='M0 0 H34 V28 H8 V8 H26 V20 H16 V14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Cg fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cg transform='translate(25 20)'%3E%3Cpath d='M0 0 H34 V28 H8 V8 H26 V20 H16 V14'/%3E%3C/g%3E%3Cg transform='translate(105 28) rotate(90 18 18)'%3E%3Cpath d='M0 0 H36 V34 H8 V8 H28 V26 H16 V14 H22'/%3E%3C/g%3E%3Cg transform='translate(205 18) rotate(180 18 18)'%3E%3Cpath d='M0 0 H34 V30 H6 V6 H28 V24 H14 V12 H22'/%3E%3C/g%3E%3Cg transform='translate(265 65) rotate(270 18 18)'%3E%3Cpath d='M0 0 H36 V32 H10 V10 H28 V24 H16 V16 H22'/%3E%3C/g%3E%3Cg transform='translate(55 100) rotate(180 18 18)'%3E%3Cpath d='M0 0 H34 V30 H8 V8 H26 V22 H14 V14 H20'/%3E%3C/g%3E%3Cg transform='translate(145 115) rotate(90 18 18)'%3E%3Cpath d='M0 0 H36 V34 H6 V6 H30 V26 H14 V12 H24'/%3E%3C/g%3E%3Cg transform='translate(235 120)'%3E%3Cpath d='M0 0 H34 V28 H8 V8 H26 V20 H16 V14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}
.fade-top-17 {
  position: relative;
}

.fade-top-17::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50vh;
  background: var(--fade-pattern-color-3, var(--newbackground));
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='190' viewBox='0 0 340 190'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- comet 1 --%3E%3Cg transform='translate(28 30) rotate(-18)'%3E%3Ccircle cx='36' cy='12' r='3.2' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M31 13 C21 15 11 21 0 31'/%3E%3Cpath stroke-width='1' d='M30 9 C20 8 11 10 3 15'/%3E%3Cpath stroke-width='.8' d='M32 17 C23 22 18 28 13 35'/%3E%3C/g%3E%3C!-- comet 2 --%3E%3Cg transform='translate(120 24) rotate(28)'%3E%3Ccircle cx='42' cy='13' r='2.8' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M37 14 C27 17 15 24 1 36'/%3E%3Cpath stroke-width='1' d='M37 10 C26 9 16 12 7 18'/%3E%3Cpath stroke-width='.8' d='M38 18 C29 24 23 31 19 39'/%3E%3C/g%3E%3C!-- comet 3 --%3E%3Cg transform='translate(236 20) rotate(-42)'%3E%3Ccircle cx='34' cy='11' r='3.5' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M29 12 C20 15 10 21 0 30'/%3E%3Cpath stroke-width='.9' d='M29 8 C19 7 11 9 4 14'/%3E%3Cpath stroke-width='.8' d='M30 16 C22 20 17 26 13 32'/%3E%3C/g%3E%3C!-- comet 4 --%3E%3Cg transform='translate(65 108) rotate(16)'%3E%3Ccircle cx='40' cy='12' r='3' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M35 13 C25 16 13 23 0 35'/%3E%3Cpath stroke-width='1' d='M35 9 C24 8 14 11 5 17'/%3E%3Cpath stroke-width='.8' d='M36 17 C27 22 21 29 16 37'/%3E%3C/g%3E%3C!-- comet 5 --%3E%3Cg transform='translate(168 120) rotate(-26)'%3E%3Ccircle cx='35' cy='12' r='2.7' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M30 13 C21 16 11 22 0 32'/%3E%3Cpath stroke-width='.9' d='M30 9 C21 8 13 10 6 15'/%3E%3Cpath stroke-width='.8' d='M31 17 C24 21 19 27 15 34'/%3E%3C/g%3E%3C!-- comet 6 --%3E%3Cg transform='translate(265 105) rotate(38)'%3E%3Ccircle cx='39' cy='12' r='3.3' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M34 13 C24 16 12 23 0 34'/%3E%3Cpath stroke-width='1' d='M34 9 C24 8 15 10 6 16'/%3E%3Cpath stroke-width='.8' d='M35 17 C27 22 21 28 17 36'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='190' viewBox='0 0 340 190'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- comet 1 --%3E%3Cg transform='translate(28 30) rotate(-18)'%3E%3Ccircle cx='36' cy='12' r='3.2' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M31 13 C21 15 11 21 0 31'/%3E%3Cpath stroke-width='1' d='M30 9 C20 8 11 10 3 15'/%3E%3Cpath stroke-width='.8' d='M32 17 C23 22 18 28 13 35'/%3E%3C/g%3E%3C!-- comet 2 --%3E%3Cg transform='translate(120 24) rotate(28)'%3E%3Ccircle cx='42' cy='13' r='2.8' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M37 14 C27 17 15 24 1 36'/%3E%3Cpath stroke-width='1' d='M37 10 C26 9 16 12 7 18'/%3E%3Cpath stroke-width='.8' d='M38 18 C29 24 23 31 19 39'/%3E%3C/g%3E%3C!-- comet 3 --%3E%3Cg transform='translate(236 20) rotate(-42)'%3E%3Ccircle cx='34' cy='11' r='3.5' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M29 12 C20 15 10 21 0 30'/%3E%3Cpath stroke-width='.9' d='M29 8 C19 7 11 9 4 14'/%3E%3Cpath stroke-width='.8' d='M30 16 C22 20 17 26 13 32'/%3E%3C/g%3E%3C!-- comet 4 --%3E%3Cg transform='translate(65 108) rotate(16)'%3E%3Ccircle cx='40' cy='12' r='3' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M35 13 C25 16 13 23 0 35'/%3E%3Cpath stroke-width='1' d='M35 9 C24 8 14 11 5 17'/%3E%3Cpath stroke-width='.8' d='M36 17 C27 22 21 29 16 37'/%3E%3C/g%3E%3C!-- comet 5 --%3E%3Cg transform='translate(168 120) rotate(-26)'%3E%3Ccircle cx='35' cy='12' r='2.7' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M30 13 C21 16 11 22 0 32'/%3E%3Cpath stroke-width='.9' d='M30 9 C21 8 13 10 6 15'/%3E%3Cpath stroke-width='.8' d='M31 17 C24 21 19 27 15 34'/%3E%3C/g%3E%3C!-- comet 6 --%3E%3Cg transform='translate(265 105) rotate(38)'%3E%3Ccircle cx='39' cy='12' r='3.3' fill='black' stroke='none'/%3E%3Cpath stroke-width='1.3' d='M34 13 C24 16 12 23 0 34'/%3E%3Cpath stroke-width='1' d='M34 9 C24 8 15 10 6 16'/%3E%3Cpath stroke-width='.8' d='M35 17 C27 22 21 28 17 36'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}
.fade-top-18 {
  position: relative;
}

.fade-top-18::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50vh;
  background: var(--fade-pattern-color, var(--otherbackground));
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.1' stroke-linejoin='round'%3E%3C!-- cube 1 --%3E%3Cg transform='translate(24 20)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 2 --%3E%3Cg transform='translate(118 38) scale(.82)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 3 --%3E%3Cg transform='translate(214 16) scale(1.12)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 4 --%3E%3Cg transform='translate(300 66) scale(.68)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 5 --%3E%3Cg transform='translate(58 122) scale(.92)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 6 --%3E%3Cg transform='translate(166 112) scale(.72)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 7 --%3E%3Cg transform='translate(252 124) scale(1.02)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.1' stroke-linejoin='round'%3E%3C!-- cube 1 --%3E%3Cg transform='translate(24 20)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 2 --%3E%3Cg transform='translate(118 38) scale(.82)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 3 --%3E%3Cg transform='translate(214 16) scale(1.12)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 4 --%3E%3Cg transform='translate(300 66) scale(.68)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 5 --%3E%3Cg transform='translate(58 122) scale(.92)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 6 --%3E%3Cg transform='translate(166 112) scale(.72)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C!-- cube 7 --%3E%3Cg transform='translate(252 124) scale(1.02)'%3E%3Cpath d='M24 0 L48 14 L24 28 L0 14 Z'/%3E%3Cpath d='M0 14 V42 L24 56 V28'/%3E%3Cpath d='M48 14 V42 L24 56'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}
.fade-top-19 {
  position: relative;
}

.fade-top-19::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 50vh;

  background: var(--fade-pattern-color, var(--otherbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- astrolabe 1 --%3E%3Cg transform='translate(20 20) rotate(-12 30 30)'%3E%3Ccircle cx='30' cy='30' r='25' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='16' stroke-width='.9'/%3E%3Cpath d='M5 30 H55 M30 5 V55' stroke-width='.9'/%3E%3Cpath d='M12 16 Q30 30 48 16 M12 44 Q30 30 48 44' stroke-width='.8'/%3E%3Ccircle cx='30' cy='30' r='2.4' fill='black' stroke='none'/%3E%3Ccircle cx='30' cy='5' r='1.6' fill='black' stroke='none'/%3E%3Ccircle cx='55' cy='30' r='1.6' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- astrolabe 2 --%3E%3Cg transform='translate(115 40) rotate(22 24 24) scale(.86)'%3E%3Ccircle cx='28' cy='28' r='23' stroke-width='1.2'/%3E%3Ccircle cx='28' cy='28' r='14' stroke-width='.9'/%3E%3Cpath d='M5 28 H51 M28 5 V51' stroke-width='.9'/%3E%3Cpath d='M10 14 Q28 28 46 14 M10 42 Q28 28 46 42' stroke-width='.8'/%3E%3Ccircle cx='28' cy='28' r='2.2' fill='black' stroke='none'/%3E%3Ccircle cx='11' cy='14' r='1.5' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- astrolabe 3 --%3E%3Cg transform='translate(220 14) rotate(-28 32 32) scale(1.05)'%3E%3Ccircle cx='30' cy='30' r='26' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='18' stroke-width='.9'/%3E%3Cpath d='M4 30 H56 M30 4 V56' stroke-width='.9'/%3E%3Cpath d='M10 17 Q30 29 50 17 M10 43 Q30 31 50 43' stroke-width='.8'/%3E%3Cpath d='M15 8 Q30 30 45 8' stroke-width='.7'/%3E%3Ccircle cx='30' cy='30' r='2.5' fill='black' stroke='none'/%3E%3Ccircle cx='30' cy='4' r='1.6' fill='black' stroke='none'/%3E%3Ccircle cx='50' cy='17' r='1.4' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- astrolabe 4 --%3E%3Cg transform='translate(300 72) rotate(31 18 18) scale(.7)'%3E%3Ccircle cx='26' cy='26' r='21' stroke-width='1.2'/%3E%3Ccircle cx='26' cy='26' r='12' stroke-width='.9'/%3E%3Cpath d='M5 26 H47 M26 5 V47' stroke-width='.9'/%3E%3Cpath d='M10 15 Q26 26 42 15 M10 37 Q26 26 42 37' stroke-width='.8'/%3E%3Ccircle cx='26' cy='26' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- astrolabe 5 --%3E%3Cg transform='translate(60 120) rotate(18 26 26) scale(.9)'%3E%3Ccircle cx='28' cy='28' r='23' stroke-width='1.2'/%3E%3Ccircle cx='28' cy='28' r='15' stroke-width='.9'/%3E%3Cpath d='M5 28 H51 M28 5 V51' stroke-width='.9'/%3E%3Cpath d='M11 14 Q28 28 45 14 M11 42 Q28 28 45 42' stroke-width='.8'/%3E%3Ccircle cx='28' cy='28' r='2.2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- astrolabe 6 --%3E%3Cg transform='translate(170 120) rotate(-18 26 26) scale(.8)'%3E%3Ccircle cx='28' cy='28' r='23' stroke-width='1.2'/%3E%3Ccircle cx='28' cy='28' r='14' stroke-width='.9'/%3E%3Cpath d='M5 28 H51 M28 5 V51' stroke-width='.9'/%3E%3Cpath d='M10 15 Q28 28 46 15 M10 41 Q28 28 46 41' stroke-width='.8'/%3E%3Ccircle cx='28' cy='28' r='2.2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- astrolabe 7 --%3E%3Cg transform='translate(265 118) rotate(26 28 28) scale(.95)'%3E%3Ccircle cx='30' cy='30' r='24' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='15' stroke-width='.9'/%3E%3Cpath d='M6 30 H54 M30 6 V54' stroke-width='.9'/%3E%3Cpath d='M12 16 Q30 30 48 16 M12 44 Q30 30 48 44' stroke-width='.8'/%3E%3Ccircle cx='30' cy='30' r='2.3' fill='black' stroke='none'/%3E%3Ccircle cx='30' cy='6' r='1.5' fill='black' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- astrolabe 1 --%3E%3Cg transform='translate(20 20) rotate(-12 30 30)'%3E%3Ccircle cx='30' cy='30' r='25' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='16' stroke-width='.9'/%3E%3Cpath d='M5 30 H55 M30 5 V55' stroke-width='.9'/%3E%3Cpath d='M12 16 Q30 30 48 16 M12 44 Q30 30 48 44' stroke-width='.8'/%3E%3Ccircle cx='30' cy='30' r='2.4' fill='black' stroke='none'/%3E%3Ccircle cx='30' cy='5' r='1.6' fill='black' stroke='none'/%3E%3Ccircle cx='55' cy='30' r='1.6' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(115 40) rotate(22 24 24) scale(.86)'%3E%3Ccircle cx='28' cy='28' r='23' stroke-width='1.2'/%3E%3Ccircle cx='28' cy='28' r='14' stroke-width='.9'/%3E%3Cpath d='M5 28 H51 M28 5 V51' stroke-width='.9'/%3E%3Cpath d='M10 14 Q28 28 46 14 M10 42 Q28 28 46 42' stroke-width='.8'/%3E%3Ccircle cx='28' cy='28' r='2.2' fill='black' stroke='none'/%3E%3Ccircle cx='11' cy='14' r='1.5' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(220 14) rotate(-28 32 32) scale(1.05)'%3E%3Ccircle cx='30' cy='30' r='26' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='18' stroke-width='.9'/%3E%3Cpath d='M4 30 H56 M30 4 V56' stroke-width='.9'/%3E%3Cpath d='M10 17 Q30 29 50 17 M10 43 Q30 31 50 43' stroke-width='.8'/%3E%3Cpath d='M15 8 Q30 30 45 8' stroke-width='.7'/%3E%3Ccircle cx='30' cy='30' r='2.5' fill='black' stroke='none'/%3E%3Ccircle cx='30' cy='4' r='1.6' fill='black' stroke='none'/%3E%3Ccircle cx='50' cy='17' r='1.4' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(300 72) rotate(31 18 18) scale(.7)'%3E%3Ccircle cx='26' cy='26' r='21' stroke-width='1.2'/%3E%3Ccircle cx='26' cy='26' r='12' stroke-width='.9'/%3E%3Cpath d='M5 26 H47 M26 5 V47' stroke-width='.9'/%3E%3Cpath d='M10 15 Q26 26 42 15 M10 37 Q26 26 42 37' stroke-width='.8'/%3E%3Ccircle cx='26' cy='26' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(60 120) rotate(18 26 26) scale(.9)'%3E%3Ccircle cx='28' cy='28' r='23' stroke-width='1.2'/%3E%3Ccircle cx='28' cy='28' r='15' stroke-width='.9'/%3E%3Cpath d='M5 28 H51 M28 5 V51' stroke-width='.9'/%3E%3Cpath d='M11 14 Q28 28 45 14 M11 42 Q28 28 45 42' stroke-width='.8'/%3E%3Ccircle cx='28' cy='28' r='2.2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(170 120) rotate(-18 26 26) scale(.8)'%3E%3Ccircle cx='28' cy='28' r='23' stroke-width='1.2'/%3E%3Ccircle cx='28' cy='28' r='14' stroke-width='.9'/%3E%3Cpath d='M5 28 H51 M28 5 V51' stroke-width='.9'/%3E%3Cpath d='M10 15 Q28 28 46 15 M10 41 Q28 28 46 41' stroke-width='.8'/%3E%3Ccircle cx='28' cy='28' r='2.2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(265 118) rotate(26 28 28) scale(.95)'%3E%3Ccircle cx='30' cy='30' r='24' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='15' stroke-width='.9'/%3E%3Cpath d='M6 30 H54 M30 6 V54' stroke-width='.9'/%3E%3Cpath d='M12 16 Q30 30 48 16 M12 44 Q30 30 48 44' stroke-width='.8'/%3E%3Ccircle cx='30' cy='30' r='2.3' fill='black' stroke='none'/%3E%3Ccircle cx='30' cy='6' r='1.5' fill='black' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.fade-top-20 {
  position: relative;
}

.fade-top-20::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 50vh;

  background: var(--fade-pattern-color-3, var(--newbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- spiral --%3E%3Cg transform='translate(24 24) rotate(-12 18 18)'%3E%3Cpath d='M5 18 C5 8 16 4 24 8 C32 12 31 23 23 27 C15 31 9 25 11 19 C13 14 20 14 22 18'/%3E%3C/g%3E%3C!-- diamond --%3E%3Cg transform='translate(95 34) rotate(18 14 14)'%3E%3Cpath d='M14 0 L28 14 L14 28 L0 14 Z'/%3E%3Cpath d='M14 0 V28 M0 14 H28'/%3E%3C/g%3E%3C!-- zigzag --%3E%3Cg transform='translate(164 18) rotate(-8)'%3E%3Cpath d='M0 20 L8 5 L16 20 L24 5 L32 20'/%3E%3C/g%3E%3C!-- cross --%3E%3Cg transform='translate(242 38) rotate(26 12 12)'%3E%3Cpath d='M12 0 V24 M0 12 H24'/%3E%3C/g%3E%3C!-- semicircle --%3E%3Cg transform='translate(305 26) rotate(-22 16 12)'%3E%3Cpath d='M0 18 Q16 -2 32 18'/%3E%3Cpath d='M5 18 Q16 6 27 18'/%3E%3C/g%3E%3C!-- orbit --%3E%3Cg transform='translate(42 112) rotate(20 18 18)'%3E%3Cellipse cx='18' cy='18' rx='16' ry='8'/%3E%3Cellipse cx='18' cy='18' rx='8' ry='16'/%3E%3Ccircle cx='18' cy='18' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- steps --%3E%3Cg transform='translate(120 118) rotate(-14)'%3E%3Cpath d='M0 24 H10 V16 H20 V8 H30 V0'/%3E%3C/g%3E%3C!-- broken circle --%3E%3Cg transform='translate(194 112) rotate(17 18 18)'%3E%3Cpath d='M5 12 A14 14 0 0 1 28 8'/%3E%3Cpath d='M31 14 A14 14 0 0 1 25 30'/%3E%3Cpath d='M18 32 A14 14 0 0 1 6 24'/%3E%3C/g%3E%3C!-- triangle --%3E%3Cg transform='translate(270 126) rotate(-26 16 14)'%3E%3Cpath d='M16 0 L32 28 H0 Z'/%3E%3Cpath d='M16 0 V18 M5 20 H27'/%3E%3C/g%3E%3C!-- squiggle --%3E%3Cg transform='translate(324 110) rotate(12)'%3E%3Cpath d='M0 10 C6 0 12 20 18 10 C24 0 30 20 36 10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(24 24) rotate(-12 18 18)'%3E%3Cpath d='M5 18 C5 8 16 4 24 8 C32 12 31 23 23 27 C15 31 9 25 11 19 C13 14 20 14 22 18'/%3E%3C/g%3E%3Cg transform='translate(95 34) rotate(18 14 14)'%3E%3Cpath d='M14 0 L28 14 L14 28 L0 14 Z'/%3E%3Cpath d='M14 0 V28 M0 14 H28'/%3E%3C/g%3E%3Cg transform='translate(164 18) rotate(-8)'%3E%3Cpath d='M0 20 L8 5 L16 20 L24 5 L32 20'/%3E%3C/g%3E%3Cg transform='translate(242 38) rotate(26 12 12)'%3E%3Cpath d='M12 0 V24 M0 12 H24'/%3E%3C/g%3E%3Cg transform='translate(305 26) rotate(-22 16 12)'%3E%3Cpath d='M0 18 Q16 -2 32 18'/%3E%3Cpath d='M5 18 Q16 6 27 18'/%3E%3C/g%3E%3Cg transform='translate(42 112) rotate(20 18 18)'%3E%3Cellipse cx='18' cy='18' rx='16' ry='8'/%3E%3Cellipse cx='18' cy='18' rx='8' ry='16'/%3E%3Ccircle cx='18' cy='18' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(120 118) rotate(-14)'%3E%3Cpath d='M0 24 H10 V16 H20 V8 H30 V0'/%3E%3C/g%3E%3Cg transform='translate(194 112) rotate(17 18 18)'%3E%3Cpath d='M5 12 A14 14 0 0 1 28 8'/%3E%3Cpath d='M31 14 A14 14 0 0 1 25 30'/%3E%3Cpath d='M18 32 A14 14 0 0 1 6 24'/%3E%3C/g%3E%3Cg transform='translate(270 126) rotate(-26 16 14)'%3E%3Cpath d='M16 0 L32 28 H0 Z'/%3E%3Cpath d='M16 0 V18 M5 20 H27'/%3E%3C/g%3E%3Cg transform='translate(324 110) rotate(12)'%3E%3Cpath d='M0 10 C6 0 12 20 18 10 C24 0 30 20 36 10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.fade-top-21 {
  position: relative;
}

.fade-top-21::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 50vh;

  background: var(--fade-pattern-color, var(--otherbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- bolt 1 --%3E%3Cg transform='translate(24 20) rotate(-18 18 26)'%3E%3Cpath d='M22 0 L8 24 H18 L10 50 L34 20 H23 Z'/%3E%3C/g%3E%3C!-- bolt 2 --%3E%3Cg transform='translate(108 36) rotate(22 16 24)'%3E%3Cpath d='M18 0 L6 21 H15 L8 46 L31 18 H21 Z'/%3E%3C/g%3E%3C!-- small bolt --%3E%3Cg transform='translate(198 18) rotate(-34 12 18) scale(.78)'%3E%3Cpath d='M16 0 L5 18 H13 L7 38 L27 15 H19 Z'/%3E%3C/g%3E%3C!-- long bolt --%3E%3Cg transform='translate(276 28) rotate(31 18 30) scale(1.08)'%3E%3Cpath d='M23 0 L8 26 H19 L10 58 L37 22 H25 Z'/%3E%3C/g%3E%3C!-- bolt 5 --%3E%3Cg transform='translate(60 118) rotate(16 16 24)'%3E%3Cpath d='M18 0 L6 22 H15 L8 48 L31 19 H21 Z'/%3E%3C/g%3E%3C!-- bolt 6 --%3E%3Cg transform='translate(155 124) rotate(-24 17 25)'%3E%3Cpath d='M20 0 L7 23 H17 L9 50 L33 20 H22 Z'/%3E%3C/g%3E%3C!-- bolt 7 --%3E%3Cg transform='translate(245 116) rotate(37 14 21) scale(.9)'%3E%3Cpath d='M17 0 L5 20 H14 L7 42 L29 17 H20 Z'/%3E%3C/g%3E%3C!-- tiny bolt --%3E%3Cg transform='translate(324 90) rotate(-12 10 15) scale(.68)'%3E%3Cpath d='M14 0 L4 16 H11 L6 32 L24 13 H17 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(24 20) rotate(-18 18 26)'%3E%3Cpath d='M22 0 L8 24 H18 L10 50 L34 20 H23 Z'/%3E%3C/g%3E%3Cg transform='translate(108 36) rotate(22 16 24)'%3E%3Cpath d='M18 0 L6 21 H15 L8 46 L31 18 H21 Z'/%3E%3C/g%3E%3Cg transform='translate(198 18) rotate(-34 12 18) scale(.78)'%3E%3Cpath d='M16 0 L5 18 H13 L7 38 L27 15 H19 Z'/%3E%3C/g%3E%3Cg transform='translate(276 28) rotate(31 18 30) scale(1.08)'%3E%3Cpath d='M23 0 L8 26 H19 L10 58 L37 22 H25 Z'/%3E%3C/g%3E%3Cg transform='translate(60 118) rotate(16 16 24)'%3E%3Cpath d='M18 0 L6 22 H15 L8 48 L31 19 H21 Z'/%3E%3C/g%3E%3Cg transform='translate(155 124) rotate(-24 17 25)'%3E%3Cpath d='M20 0 L7 23 H17 L9 50 L33 20 H22 Z'/%3E%3C/g%3E%3Cg transform='translate(245 116) rotate(37 14 21) scale(.9)'%3E%3Cpath d='M17 0 L5 20 H14 L7 42 L29 17 H20 Z'/%3E%3C/g%3E%3Cg transform='translate(324 90) rotate(-12 10 15) scale(.68)'%3E%3Cpath d='M14 0 L4 16 H11 L6 32 L24 13 H17 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.fade-top-22 {
  position: relative;
}

.fade-top-22::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 50vh;

  background: var(--fade-pattern-color-3, var(--newbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- symbol 1 --%3E%3Cg transform='translate(20 22) rotate(-10 14 14)'%3E%3Cpath d='M2 14 H10 V4 H18 V24 H26 V14'/%3E%3Ccircle cx='14' cy='14' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- symbol 2 --%3E%3Cg transform='translate(78 18) rotate(14 14 14)'%3E%3Cpath d='M14 0 L28 14 L14 28 L0 14 Z'/%3E%3Cpath d='M6 14 H22 M14 6 V22'/%3E%3C/g%3E%3C!-- symbol 3 --%3E%3Cg transform='translate(138 28) rotate(-18 16 14)'%3E%3Cpath d='M0 14 Q8 0 16 14 Q24 28 32 14'/%3E%3Cpath d='M8 14 H24'/%3E%3C/g%3E%3C!-- symbol 4 --%3E%3Cg transform='translate(204 16) rotate(20 14 14)'%3E%3Cpath d='M14 0 V28 M0 14 H28'/%3E%3Ccircle cx='14' cy='14' r='5'/%3E%3C/g%3E%3C!-- symbol 5 --%3E%3Cg transform='translate(278 30) rotate(-26 14 14)'%3E%3Cpath d='M2 4 H26 L18 14 L26 24 H2 L10 14 Z'/%3E%3C/g%3E%3C!-- symbol 6 --%3E%3Cg transform='translate(40 112) rotate(18 14 14)'%3E%3Cpath d='M4 24 V4 H24 V24'/%3E%3Cpath d='M8 18 H20 M10 10 H18'/%3E%3C/g%3E%3C!-- symbol 7 --%3E%3Cg transform='translate(108 120) rotate(-14 14 14)'%3E%3Cpath d='M14 0 L20 10 L28 14 L20 18 L14 28 L8 18 L0 14 L8 10 Z'/%3E%3C/g%3E%3C!-- symbol 8 --%3E%3Cg transform='translate(176 108) rotate(24 16 14)'%3E%3Cpath d='M0 22 L8 6 L16 22 L24 6 L32 22'/%3E%3Ccircle cx='16' cy='22' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- symbol 9 --%3E%3Cg transform='translate(246 116) rotate(-20 14 14)'%3E%3Cpath d='M2 14 H10 L14 6 L18 22 L22 14 H28'/%3E%3C/g%3E%3C!-- symbol 10 --%3E%3Cg transform='translate(314 98) rotate(12 12 16)'%3E%3Cpath d='M12 0 L24 8 L18 16 L24 24 L12 32 L0 24 L6 16 L0 8 Z'/%3E%3Cpath d='M6 16 H18'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(20 22) rotate(-10 14 14)'%3E%3Cpath d='M2 14 H10 V4 H18 V24 H26 V14'/%3E%3Ccircle cx='14' cy='14' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(78 18) rotate(14 14 14)'%3E%3Cpath d='M14 0 L28 14 L14 28 L0 14 Z'/%3E%3Cpath d='M6 14 H22 M14 6 V22'/%3E%3C/g%3E%3Cg transform='translate(138 28) rotate(-18 16 14)'%3E%3Cpath d='M0 14 Q8 0 16 14 Q24 28 32 14'/%3E%3Cpath d='M8 14 H24'/%3E%3C/g%3E%3Cg transform='translate(204 16) rotate(20 14 14)'%3E%3Cpath d='M14 0 V28 M0 14 H28'/%3E%3Ccircle cx='14' cy='14' r='5'/%3E%3C/g%3E%3Cg transform='translate(278 30) rotate(-26 14 14)'%3E%3Cpath d='M2 4 H26 L18 14 L26 24 H2 L10 14 Z'/%3E%3C/g%3E%3Cg transform='translate(40 112) rotate(18 14 14)'%3E%3Cpath d='M4 24 V4 H24 V24'/%3E%3Cpath d='M8 18 H20 M10 10 H18'/%3E%3C/g%3E%3Cg transform='translate(108 120) rotate(-14 14 14)'%3E%3Cpath d='M14 0 L20 10 L28 14 L20 18 L14 28 L8 18 L0 14 L8 10 Z'/%3E%3C/g%3E%3Cg transform='translate(176 108) rotate(24 16 14)'%3E%3Cpath d='M0 22 L8 6 L16 22 L24 6 L32 22'/%3E%3Ccircle cx='16' cy='22' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(246 116) rotate(-20 14 14)'%3E%3Cpath d='M2 14 H10 L14 6 L18 22 L22 14 H28'/%3E%3C/g%3E%3Cg transform='translate(314 98) rotate(12 12 16)'%3E%3Cpath d='M12 0 L24 8 L18 16 L24 24 L12 32 L0 24 L6 16 L0 8 Z'/%3E%3Cpath d='M6 16 H18'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.fade-top-23 {
  position: relative;
}

.fade-top-23::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 50vh;

background: var(--fade-pattern-color, var(--newbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(24 24) rotate(-10 14 16)'%3E%3Cpath d='M4 28 L14 4 L24 28 M9 17 H19'/%3E%3C/g%3E%3Cg transform='translate(88 18) rotate(14 14 16)'%3E%3Cpath d='M14 2 V30 M14 10 L4 4 M14 18 L24 10'/%3E%3C/g%3E%3Cg transform='translate(150 30) rotate(-18 14 14)'%3E%3Cpath d='M4 4 L24 24 M24 4 L4 24'/%3E%3C/g%3E%3Cg transform='translate(212 16) rotate(22 14 16)'%3E%3Cpath d='M4 28 V4 H24 M14 4 V18'/%3E%3C/g%3E%3Cg transform='translate(282 30) rotate(-26 14 16)'%3E%3Cpath d='M4 4 H24 L10 16 L24 28'/%3E%3C/g%3E%3Cg transform='translate(45 112) rotate(18 14 16)'%3E%3Cpath d='M14 2 V30 M4 10 L14 18 L24 10'/%3E%3C/g%3E%3Cg transform='translate(110 120) rotate(-14 14 14)'%3E%3Cpath d='M4 24 L14 4 L24 24 M4 24 H24'/%3E%3C/g%3E%3Cg transform='translate(176 106) rotate(24 14 16)'%3E%3Cpath d='M4 4 V28 M4 16 H24 M24 4 V28'/%3E%3C/g%3E%3Cg transform='translate(244 118) rotate(-20 14 16)'%3E%3Cpath d='M4 4 L14 16 L4 28 M14 16 H24'/%3E%3C/g%3E%3Cg transform='translate(315 96) rotate(12 12 16)'%3E%3Cpath d='M12 2 V30 M3 9 L12 2 L21 9 M3 23 L12 30 L21 23'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(24 24) rotate(-10 14 16)'%3E%3Cpath d='M4 28 L14 4 L24 28 M9 17 H19'/%3E%3C/g%3E%3Cg transform='translate(88 18) rotate(14 14 16)'%3E%3Cpath d='M14 2 V30 M14 10 L4 4 M14 18 L24 10'/%3E%3C/g%3E%3Cg transform='translate(150 30) rotate(-18 14 14)'%3E%3Cpath d='M4 4 L24 24 M24 4 L4 24'/%3E%3C/g%3E%3Cg transform='translate(212 16) rotate(22 14 16)'%3E%3Cpath d='M4 28 V4 H24 M14 4 V18'/%3E%3C/g%3E%3Cg transform='translate(282 30) rotate(-26 14 16)'%3E%3Cpath d='M4 4 H24 L10 16 L24 28'/%3E%3C/g%3E%3Cg transform='translate(45 112) rotate(18 14 16)'%3E%3Cpath d='M14 2 V30 M4 10 L14 18 L24 10'/%3E%3C/g%3E%3Cg transform='translate(110 120) rotate(-14 14 14)'%3E%3Cpath d='M4 24 L14 4 L24 24 M4 24 H24'/%3E%3C/g%3E%3Cg transform='translate(176 106) rotate(24 14 16)'%3E%3Cpath d='M4 4 V28 M4 16 H24 M24 4 V28'/%3E%3C/g%3E%3Cg transform='translate(244 118) rotate(-20 14 16)'%3E%3Cpath d='M4 4 L14 16 L4 28 M14 16 H24'/%3E%3C/g%3E%3Cg transform='translate(315 96) rotate(12 12 16)'%3E%3Cpath d='M12 2 V30 M3 9 L12 2 L21 9 M3 23 L12 30 L21 23'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.fade-top-24 {
  position: relative;
}

.fade-top-24::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 50vh;

  background: var(--fade-pattern-color-3, var(--otherbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- feather 1 --%3E%3Cg transform='translate(24 18) rotate(-18 20 30)'%3E%3Cpath d='M19 0 C6 12 4 30 14 48 C19 57 27 60 34 54 C45 44 46 25 35 10 C30 3 24 -1 19 0 Z'/%3E%3Cpath d='M20 5 C22 20 22 37 20 58'/%3E%3Cpath d='M20 14 L9 22 M21 21 L8 31 M21 29 L10 39 M21 37 L13 46 M22 13 L33 20 M22 21 L36 29 M22 29 L35 38 M21 37 L31 46'/%3E%3C/g%3E%3C!-- feather 2 --%3E%3Cg transform='translate(108 34) rotate(22 18 28) scale(.85)'%3E%3Cpath d='M17 0 C5 11 4 27 12 43 C17 52 24 56 31 50 C41 41 42 23 32 9 C27 2 22 -1 17 0 Z'/%3E%3Cpath d='M18 5 C20 18 20 34 18 54'/%3E%3Cpath d='M18 13 L8 20 M19 20 L7 28 M19 27 L9 36 M19 34 L11 43 M20 12 L30 19 M20 20 L33 27 M20 27 L32 35 M19 34 L28 43'/%3E%3C/g%3E%3C!-- feather 3 --%3E%3Cg transform='translate(205 16) rotate(-30 22 32) scale(1.05)'%3E%3Cpath d='M21 0 C7 13 5 31 15 50 C20 60 29 64 36 57 C48 46 49 27 38 11 C32 3 26 -1 21 0 Z'/%3E%3Cpath d='M22 5 C24 21 24 39 22 62'/%3E%3Cpath d='M22 14 L10 22 M23 22 L9 31 M23 30 L11 40 M23 38 L14 48 M24 13 L35 21 M24 21 L38 30 M24 30 L37 39 M23 38 L33 48'/%3E%3C/g%3E%3C!-- feather 4 --%3E%3Cg transform='translate(300 62) rotate(32 16 24) scale(.7)'%3E%3Cpath d='M15 0 C5 9 3 23 10 37 C14 45 20 48 26 43 C34 35 35 20 27 8 C23 2 19 -1 15 0 Z'/%3E%3Cpath d='M16 4 C17 15 17 28 16 46'/%3E%3Cpath d='M16 11 L7 17 M17 17 L6 24 M17 23 L8 31 M17 29 L10 37 M18 10 L26 16 M18 17 L29 23 M18 23 L28 30 M17 29 L25 37'/%3E%3C/g%3E%3C!-- feather 5 --%3E%3Cg transform='translate(55 118) rotate(18 19 29) scale(.92)'%3E%3Cpath d='M18 0 C6 11 4 28 13 45 C17 54 25 58 32 52 C42 43 43 24 33 10 C28 3 23 -1 18 0 Z'/%3E%3Cpath d='M19 5 C21 19 21 35 19 56'/%3E%3Cpath d='M19 13 L8 21 M20 21 L7 29 M20 28 L9 37 M20 36 L12 44 M21 12 L31 20 M21 20 L34 28 M21 28 L33 36 M20 36 L29 45'/%3E%3C/g%3E%3C!-- feather 6 --%3E%3Cg transform='translate(164 122) rotate(-16 17 26) scale(.78)'%3E%3Cpath d='M16 0 C5 10 4 25 11 40 C15 48 22 52 28 46 C37 38 38 21 29 8 C25 2 20 -1 16 0 Z'/%3E%3Cpath d='M17 4 C19 17 19 31 17 50'/%3E%3Cpath d='M17 12 L7 19 M18 19 L6 27 M18 26 L8 34 M18 33 L10 40 M19 11 L28 18 M19 19 L31 26 M19 26 L30 34 M18 33 L27 41'/%3E%3C/g%3E%3C!-- feather 7 --%3E%3Cg transform='translate(252 112) rotate(28 20 30)'%3E%3Cpath d='M19 0 C6 12 4 30 14 48 C19 57 27 60 34 54 C45 44 46 25 35 10 C30 3 24 -1 19 0 Z'/%3E%3Cpath d='M20 5 C22 20 22 37 20 58'/%3E%3Cpath d='M20 14 L9 22 M21 21 L8 31 M21 29 L10 39 M21 37 L13 46 M22 13 L33 20 M22 21 L36 29 M22 29 L35 38 M21 37 L31 46'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(24 18) rotate(-18 20 30)'%3E%3Cpath d='M19 0 C6 12 4 30 14 48 C19 57 27 60 34 54 C45 44 46 25 35 10 C30 3 24 -1 19 0 Z'/%3E%3Cpath d='M20 5 C22 20 22 37 20 58'/%3E%3Cpath d='M20 14 L9 22 M21 21 L8 31 M21 29 L10 39 M21 37 L13 46 M22 13 L33 20 M22 21 L36 29 M22 29 L35 38 M21 37 L31 46'/%3E%3C/g%3E%3Cg transform='translate(108 34) rotate(22 18 28) scale(.85)'%3E%3Cpath d='M17 0 C5 11 4 27 12 43 C17 52 24 56 31 50 C41 41 42 23 32 9 C27 2 22 -1 17 0 Z'/%3E%3Cpath d='M18 5 C20 18 20 34 18 54'/%3E%3Cpath d='M18 13 L8 20 M19 20 L7 28 M19 27 L9 36 M19 34 L11 43 M20 12 L30 19 M20 20 L33 27 M20 27 L32 35 M19 34 L28 43'/%3E%3C/g%3E%3Cg transform='translate(205 16) rotate(-30 22 32) scale(1.05)'%3E%3Cpath d='M21 0 C7 13 5 31 15 50 C20 60 29 64 36 57 C48 46 49 27 38 11 C32 3 26 -1 21 0 Z'/%3E%3Cpath d='M22 5 C24 21 24 39 22 62'/%3E%3Cpath d='M22 14 L10 22 M23 22 L9 31 M23 30 L11 40 M23 38 L14 48 M24 13 L35 21 M24 21 L38 30 M24 30 L37 39 M23 38 L33 48'/%3E%3C/g%3E%3Cg transform='translate(300 62) rotate(32 16 24) scale(.7)'%3E%3Cpath d='M15 0 C5 9 3 23 10 37 C14 45 20 48 26 43 C34 35 35 20 27 8 C23 2 19 -1 15 0 Z'/%3E%3Cpath d='M16 4 C17 15 17 28 16 46'/%3E%3Cpath d='M16 11 L7 17 M17 17 L6 24 M17 23 L8 31 M17 29 L10 37 M18 10 L26 16 M18 17 L29 23 M18 23 L28 30 M17 29 L25 37'/%3E%3C/g%3E%3Cg transform='translate(55 118) rotate(18 19 29) scale(.92)'%3E%3Cpath d='M18 0 C6 11 4 28 13 45 C17 54 25 58 32 52 C42 43 43 24 33 10 C28 3 23 -1 18 0 Z'/%3E%3Cpath d='M19 5 C21 19 21 35 19 56'/%3E%3Cpath d='M19 13 L8 21 M20 21 L7 29 M20 28 L9 37 M20 36 L12 44 M21 12 L31 20 M21 20 L34 28 M21 28 L33 36 M20 36 L29 45'/%3E%3C/g%3E%3Cg transform='translate(164 122) rotate(-16 17 26) scale(.78)'%3E%3Cpath d='M16 0 C5 10 4 25 11 40 C15 48 22 52 28 46 C37 38 38 21 29 8 C25 2 20 -1 16 0 Z'/%3E%3Cpath d='M17 4 C19 17 19 31 17 50'/%3E%3Cpath d='M17 12 L7 19 M18 19 L6 27 M18 26 L8 34 M18 33 L10 40 M19 11 L28 18 M19 19 L31 26 M19 26 L30 34 M18 33 L27 41'/%3E%3C/g%3E%3Cg transform='translate(252 112) rotate(28 20 30)'%3E%3Cpath d='M19 0 C6 12 4 30 14 48 C19 57 27 60 34 54 C45 44 46 25 35 10 C30 3 24 -1 19 0 Z'/%3E%3Cpath d='M20 5 C22 20 22 37 20 58'/%3E%3Cpath d='M20 14 L9 22 M21 21 L8 31 M21 29 L10 39 M21 37 L13 46 M22 13 L33 20 M22 21 L36 29 M22 29 L35 38 M21 37 L31 46'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.fade-top-25 {
  position: relative;
}

.fade-top-25::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 50vh;

  background: var(--fade-pattern-color-3, var(--newbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- orbit --%3E%3Cg transform='translate(20 22) rotate(-18 18 18)'%3E%3Cellipse cx='18' cy='18' rx='16' ry='7'/%3E%3Cellipse cx='18' cy='18' rx='7' ry='16'/%3E%3Ccircle cx='18' cy='18' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- star --%3E%3Cg transform='translate(84 18) rotate(12 13 13)'%3E%3Cpath d='M13 0 L16 10 L26 13 L16 16 L13 26 L10 16 L0 13 L10 10 Z'/%3E%3C/g%3E%3C!-- capsule --%3E%3Cg transform='translate(148 30) rotate(-22 18 10)'%3E%3Crect x='0' y='3' width='36' height='14' rx='7'/%3E%3Cpath d='M12 3 V17 M24 3 V17'/%3E%3C/g%3E%3C!-- arc symbol --%3E%3Cg transform='translate(214 16) rotate(24 16 16)'%3E%3Cpath d='M2 22 Q16 2 30 22'/%3E%3Cpath d='M8 22 Q16 10 24 22'/%3E%3Ccircle cx='16' cy='22' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- satellite --%3E%3Cg transform='translate(282 28) rotate(-28 16 16)'%3E%3Crect x='11' y='11' width='10' height='10'/%3E%3Cpath d='M0 8 L11 13 M21 19 L32 24 M8 0 L13 11 M19 21 L24 32'/%3E%3C/g%3E%3C!-- radar --%3E%3Cg transform='translate(42 112) rotate(18 16 16)'%3E%3Cpath d='M2 24 A22 22 0 0 1 24 2'/%3E%3Cpath d='M8 24 A16 16 0 0 1 24 8'/%3E%3Cpath d='M14 24 A10 10 0 0 1 24 14'/%3E%3Cline x1='24' y1='24' x2='30' y2='18'/%3E%3C/g%3E%3C!-- double moon --%3E%3Cg transform='translate(108 118) rotate(-14 14 14)'%3E%3Cpath d='M20 2 C8 4 5 20 16 26 C8 26 2 20 2 14 C2 6 10 0 20 2 Z'/%3E%3Cpath d='M24 6 C17 8 15 17 21 21'/%3E%3C/g%3E%3C!-- abstract antenna --%3E%3Cg transform='translate(176 108) rotate(26 14 16)'%3E%3Cpath d='M14 30 V12 M7 19 H21 M4 8 Q14 0 24 8 M8 11 Q14 6 20 11'/%3E%3C/g%3E%3C!-- portal --%3E%3Cg transform='translate(244 118) rotate(-20 14 14)'%3E%3Cpath d='M4 24 V8 Q14 0 24 8 V24'/%3E%3Cpath d='M9 24 V11 Q14 6 19 11 V24'/%3E%3C/g%3E%3C!-- weird glyph --%3E%3Cg transform='translate(314 96) rotate(14 12 16)'%3E%3Cpath d='M12 0 L18 10 L12 16 L18 26 L12 32 L6 22 L12 16 L6 6 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(20 22) rotate(-18 18 18)'%3E%3Cellipse cx='18' cy='18' rx='16' ry='7'/%3E%3Cellipse cx='18' cy='18' rx='7' ry='16'/%3E%3Ccircle cx='18' cy='18' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(84 18) rotate(12 13 13)'%3E%3Cpath d='M13 0 L16 10 L26 13 L16 16 L13 26 L10 16 L0 13 L10 10 Z'/%3E%3C/g%3E%3Cg transform='translate(148 30) rotate(-22 18 10)'%3E%3Crect x='0' y='3' width='36' height='14' rx='7'/%3E%3Cpath d='M12 3 V17 M24 3 V17'/%3E%3C/g%3E%3Cg transform='translate(214 16) rotate(24 16 16)'%3E%3Cpath d='M2 22 Q16 2 30 22'/%3E%3Cpath d='M8 22 Q16 10 24 22'/%3E%3Ccircle cx='16' cy='22' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(282 28) rotate(-28 16 16)'%3E%3Crect x='11' y='11' width='10' height='10'/%3E%3Cpath d='M0 8 L11 13 M21 19 L32 24 M8 0 L13 11 M19 21 L24 32'/%3E%3C/g%3E%3Cg transform='translate(42 112) rotate(18 16 16)'%3E%3Cpath d='M2 24 A22 22 0 0 1 24 2'/%3E%3Cpath d='M8 24 A16 16 0 0 1 24 8'/%3E%3Cpath d='M14 24 A10 10 0 0 1 24 14'/%3E%3Cline x1='24' y1='24' x2='30' y2='18'/%3E%3C/g%3E%3Cg transform='translate(108 118) rotate(-14 14 14)'%3E%3Cpath d='M20 2 C8 4 5 20 16 26 C8 26 2 20 2 14 C2 6 10 0 20 2 Z'/%3E%3Cpath d='M24 6 C17 8 15 17 21 21'/%3E%3C/g%3E%3Cg transform='translate(176 108) rotate(26 14 16)'%3E%3Cpath d='M14 30 V12 M7 19 H21 M4 8 Q14 0 24 8 M8 11 Q14 6 20 11'/%3E%3C/g%3E%3Cg transform='translate(244 118) rotate(-20 14 14)'%3E%3Cpath d='M4 24 V8 Q14 0 24 8 V24'/%3E%3Cpath d='M9 24 V11 Q14 6 19 11 V24'/%3E%3C/g%3E%3Cg transform='translate(314 96) rotate(14 12 16)'%3E%3Cpath d='M12 0 L18 10 L12 16 L18 26 L12 32 L6 22 L12 16 L6 6 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.fade-top-26 {
  position: relative;
}

.fade-top-26::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 50vh;

  background: var(--fade-pattern-color-3, var(--newbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- crack 1 --%3E%3Cg transform='translate(22 18) rotate(-8 28 26)'%3E%3Cpath d='M8 4 L18 14 L14 24 L28 34 L24 46 L38 56'/%3E%3Cpath d='M18 14 L29 10 M14 24 L5 31 M28 34 L39 28 M24 46 L14 52'/%3E%3C/g%3E%3C!-- crack 2 --%3E%3Cg transform='translate(108 36) rotate(18 24 24) scale(.86)'%3E%3Cpath d='M6 3 L16 13 L12 22 L25 31 L21 42 L34 51'/%3E%3Cpath d='M16 13 L26 8 M12 22 L3 28 M25 31 L35 26 M21 42 L12 48'/%3E%3C/g%3E%3C!-- crack 3 --%3E%3Cg transform='translate(202 16) rotate(-24 30 28) scale(1.05)'%3E%3Cpath d='M10 2 L21 14 L16 26 L31 37 L27 49 L42 61'/%3E%3Cpath d='M21 14 L33 9 M16 26 L6 34 M31 37 L44 31 M27 49 L16 56'/%3E%3C/g%3E%3C!-- crack 4 --%3E%3Cg transform='translate(298 62) rotate(28 18 18) scale(.68)'%3E%3Cpath d='M4 3 L12 11 L9 19 L20 27 L17 35 L28 43'/%3E%3Cpath d='M12 11 L21 7 M9 19 L2 24 M20 27 L29 23'/%3E%3C/g%3E%3C!-- crack 5 --%3E%3Cg transform='translate(54 118) rotate(20 26 24) scale(.92)'%3E%3Cpath d='M7 3 L17 13 L13 23 L26 33 L22 44 L35 54'/%3E%3Cpath d='M17 13 L28 9 M13 23 L4 30 M26 33 L37 28 M22 44 L13 50'/%3E%3C/g%3E%3C!-- crack 6 --%3E%3Cg transform='translate(162 122) rotate(-16 22 22) scale(.8)'%3E%3Cpath d='M5 2 L14 12 L10 21 L22 30 L18 40 L30 49'/%3E%3Cpath d='M14 12 L24 8 M10 21 L2 27 M22 30 L32 25 M18 40 L9 46'/%3E%3C/g%3E%3C!-- crack 7 --%3E%3Cg transform='translate(250 112) rotate(24 28 25)'%3E%3Cpath d='M8 3 L19 14 L15 25 L29 36 L25 47 L39 58'/%3E%3Cpath d='M19 14 L31 9 M15 25 L5 32 M29 36 L41 30 M25 47 L15 54'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(22 18) rotate(-8 28 26)'%3E%3Cpath d='M8 4 L18 14 L14 24 L28 34 L24 46 L38 56'/%3E%3Cpath d='M18 14 L29 10 M14 24 L5 31 M28 34 L39 28 M24 46 L14 52'/%3E%3C/g%3E%3Cg transform='translate(108 36) rotate(18 24 24) scale(.86)'%3E%3Cpath d='M6 3 L16 13 L12 22 L25 31 L21 42 L34 51'/%3E%3Cpath d='M16 13 L26 8 M12 22 L3 28 M25 31 L35 26 M21 42 L12 48'/%3E%3C/g%3E%3Cg transform='translate(202 16) rotate(-24 30 28) scale(1.05)'%3E%3Cpath d='M10 2 L21 14 L16 26 L31 37 L27 49 L42 61'/%3E%3Cpath d='M21 14 L33 9 M16 26 L6 34 M31 37 L44 31 M27 49 L16 56'/%3E%3C/g%3E%3Cg transform='translate(298 62) rotate(28 18 18) scale(.68)'%3E%3Cpath d='M4 3 L12 11 L9 19 L20 27 L17 35 L28 43'/%3E%3Cpath d='M12 11 L21 7 M9 19 L2 24 M20 27 L29 23'/%3E%3C/g%3E%3Cg transform='translate(54 118) rotate(20 26 24) scale(.92)'%3E%3Cpath d='M7 3 L17 13 L13 23 L26 33 L22 44 L35 54'/%3E%3Cpath d='M17 13 L28 9 M13 23 L4 30 M26 33 L37 28 M22 44 L13 50'/%3E%3C/g%3E%3Cg transform='translate(162 122) rotate(-16 22 22) scale(.8)'%3E%3Cpath d='M5 2 L14 12 L10 21 L22 30 L18 40 L30 49'/%3E%3Cpath d='M14 12 L24 8 M10 21 L2 27 M22 30 L32 25 M18 40 L9 46'/%3E%3C/g%3E%3Cg transform='translate(250 112) rotate(24 28 25)'%3E%3Cpath d='M8 3 L19 14 L15 25 L29 36 L25 47 L39 58'/%3E%3Cpath d='M19 14 L31 9 M15 25 L5 32 M29 36 L41 30 M25 47 L15 54'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.fade-top-27 {
  position: relative;
}

.fade-top-27::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 50vh;

background: var(--fade-pattern-color-3, var(--newbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- mech 1 --%3E%3Cg transform='translate(20 22) rotate(-12 18 18)'%3E%3Ccircle cx='18' cy='18' r='7'/%3E%3Ccircle cx='18' cy='18' r='2' fill='black' stroke='none'/%3E%3Cpath d='M18 2 V8 M18 28 V34 M2 18 H8 M28 18 H34'/%3E%3Cpath d='M8 8 L12 12 M24 24 L28 28 M28 8 L24 12 M12 24 L8 28'/%3E%3C/g%3E%3C!-- mech 2 --%3E%3Cg transform='translate(92 34) rotate(18 18 14)'%3E%3Ccircle cx='7' cy='14' r='4'/%3E%3Ccircle cx='29' cy='14' r='4'/%3E%3Cpath d='M11 14 H25'/%3E%3Cpath d='M18 14 V4 M18 14 V24'/%3E%3Ccircle cx='18' cy='14' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- mech 3 --%3E%3Cg transform='translate(158 18) rotate(-24 18 18)'%3E%3Crect x='8' y='8' width='20' height='20' rx='3'/%3E%3Ccircle cx='18' cy='18' r='4'/%3E%3Cpath d='M18 2 V8 M18 28 V34 M2 18 H8 M28 18 H34'/%3E%3C/g%3E%3C!-- mech 4 --%3E%3Cg transform='translate(226 40) rotate(26 18 16)'%3E%3Cpath d='M4 16 H12 L16 8 L22 24 L26 16 H34'/%3E%3Ccircle cx='4' cy='16' r='2' fill='black' stroke='none'/%3E%3Ccircle cx='34' cy='16' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- mech 5 --%3E%3Cg transform='translate(294 20) rotate(-18 16 16)'%3E%3Cpath d='M4 8 H12 V4 H20 V8 H28 V16 H24 V24 H16 V28 H8 V24 H4 Z'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/g%3E%3C!-- mech 6 --%3E%3Cg transform='translate(46 116) rotate(20 18 18)'%3E%3Ccircle cx='10' cy='18' r='5'/%3E%3Ccircle cx='26' cy='18' r='5'/%3E%3Cpath d='M15 18 H21'/%3E%3Cpath d='M10 13 V5 M26 23 V31'/%3E%3C/g%3E%3C!-- mech 7 --%3E%3Cg transform='translate(118 124) rotate(-14 16 16)'%3E%3Cpath d='M4 4 H16 V12 H28 V24 H16 V32 H4 Z'/%3E%3Cpath d='M16 12 V24'/%3E%3Ccircle cx='16' cy='18' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- mech 8 --%3E%3Cg transform='translate(188 108) rotate(24 18 18)'%3E%3Ccircle cx='18' cy='18' r='11'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M18 7 V2 M18 34 V29 M7 18 H2 M34 18 H29'/%3E%3Cpath d='M10 10 L6 6 M26 26 L30 30 M26 10 L30 6 M10 26 L6 30'/%3E%3C/g%3E%3C!-- mech 9 --%3E%3Cg transform='translate(258 120) rotate(-20 18 14)'%3E%3Cpath d='M2 14 H10 L14 6 H22 L26 14 H34'/%3E%3Cpath d='M14 6 V22 M22 6 V22'/%3E%3Ccircle cx='18' cy='22' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- mech 10 --%3E%3Cg transform='translate(324 92) rotate(12 12 16)'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 18 V30 M6 24 H18'/%3E%3Ccircle cx='12' cy='12' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(20 22) rotate(-12 18 18)'%3E%3Ccircle cx='18' cy='18' r='7'/%3E%3Ccircle cx='18' cy='18' r='2' fill='black' stroke='none'/%3E%3Cpath d='M18 2 V8 M18 28 V34 M2 18 H8 M28 18 H34'/%3E%3Cpath d='M8 8 L12 12 M24 24 L28 28 M28 8 L24 12 M12 24 L8 28'/%3E%3C/g%3E%3Cg transform='translate(92 34) rotate(18 18 14)'%3E%3Ccircle cx='7' cy='14' r='4'/%3E%3Ccircle cx='29' cy='14' r='4'/%3E%3Cpath d='M11 14 H25'/%3E%3Cpath d='M18 14 V4 M18 14 V24'/%3E%3Ccircle cx='18' cy='14' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(158 18) rotate(-24 18 18)'%3E%3Crect x='8' y='8' width='20' height='20' rx='3'/%3E%3Ccircle cx='18' cy='18' r='4'/%3E%3Cpath d='M18 2 V8 M18 28 V34 M2 18 H8 M28 18 H34'/%3E%3C/g%3E%3Cg transform='translate(226 40) rotate(26 18 16)'%3E%3Cpath d='M4 16 H12 L16 8 L22 24 L26 16 H34'/%3E%3Ccircle cx='4' cy='16' r='2' fill='black' stroke='none'/%3E%3Ccircle cx='34' cy='16' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(294 20) rotate(-18 16 16)'%3E%3Cpath d='M4 8 H12 V4 H20 V8 H28 V16 H24 V24 H16 V28 H8 V24 H4 Z'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/g%3E%3Cg transform='translate(46 116) rotate(20 18 18)'%3E%3Ccircle cx='10' cy='18' r='5'/%3E%3Ccircle cx='26' cy='18' r='5'/%3E%3Cpath d='M15 18 H21'/%3E%3Cpath d='M10 13 V5 M26 23 V31'/%3E%3C/g%3E%3Cg transform='translate(118 124) rotate(-14 16 16)'%3E%3Cpath d='M4 4 H16 V12 H28 V24 H16 V32 H4 Z'/%3E%3Cpath d='M16 12 V24'/%3E%3Ccircle cx='16' cy='18' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(188 108) rotate(24 18 18)'%3E%3Ccircle cx='18' cy='18' r='11'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M18 7 V2 M18 34 V29 M7 18 H2 M34 18 H29'/%3E%3Cpath d='M10 10 L6 6 M26 26 L30 30 M26 10 L30 6 M10 26 L6 30'/%3E%3C/g%3E%3Cg transform='translate(258 120) rotate(-20 18 14)'%3E%3Cpath d='M2 14 H10 L14 6 H22 L26 14 H34'/%3E%3Cpath d='M14 6 V22 M22 6 V22'/%3E%3Ccircle cx='18' cy='22' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(324 92) rotate(12 12 16)'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 18 V30 M6 24 H18'/%3E%3Ccircle cx='12' cy='12' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.fade-top-28 {
  position: relative;
}

.fade-top-28::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  height: 50vh;

  background: var(--fade-pattern-color-3, var(--newbackground));

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- notched triangle --%3E%3Cg transform='translate(18 18) rotate(-12 16 16)'%3E%3Cpath d='M16 2 L30 28 H20 M12 28 H2 L16 2'/%3E%3Cpath d='M12 22 H20'/%3E%3C/g%3E%3C!-- open diamond --%3E%3Cg transform='translate(82 32) rotate(16 16 16)'%3E%3Cpath d='M16 2 L30 16 L16 30 L8 22 M5 19 L2 16 L16 2'/%3E%3Ccircle cx='16' cy='16' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- broken ring --%3E%3Cg transform='translate(146 16) rotate(-20 17 17)'%3E%3Cpath d='M8 6 A14 14 0 0 1 29 11'/%3E%3Cpath d='M31 17 A14 14 0 0 1 22 30'/%3E%3Cpath d='M15 31 A14 14 0 0 1 4 20'/%3E%3Cpath d='M4 14 A14 14 0 0 1 8 6'/%3E%3Cpath d='M17 10 V24'/%3E%3C/g%3E%3C!-- asymmetric cross --%3E%3Cg transform='translate(212 34) rotate(24 16 16)'%3E%3Cpath d='M16 2 V28 M4 14 H28'/%3E%3Cpath d='M16 8 L22 14 L16 20'/%3E%3Ccircle cx='4' cy='14' r='1.8' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- technical bracket --%3E%3Cg transform='translate(276 18) rotate(-16 16 16)'%3E%3Cpath d='M5 4 H15 V10 H27 M27 10 V22 H18 V28 H5'/%3E%3Cpath d='M5 4 V10 M5 22 V28'/%3E%3Ccircle cx='15' cy='10' r='1.7' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- arrow sigil --%3E%3Cg transform='translate(326 54) rotate(28 12 14) scale(.72)'%3E%3Cpath d='M3 14 H21 M15 8 L21 14 L15 20'/%3E%3Cpath d='M8 7 V21'/%3E%3Ccircle cx='8' cy='14' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- split hex --%3E%3Cg transform='translate(42 112) rotate(18 17 17)'%3E%3Cpath d='M9 3 H24 L31 16 L24 29 H17 M11 29 H9 L2 16 L9 3'/%3E%3Cpath d='M10 16 H24 M17 9 V23'/%3E%3C/g%3E%3C!-- axis glyph --%3E%3Cg transform='translate(106 124) rotate(-14 16 16) scale(.84)'%3E%3Cpath d='M16 2 V30 M2 16 H30'/%3E%3Cpath d='M16 2 L12 7 M16 2 L20 7'/%3E%3Cpath d='M30 16 L25 12 M30 16 L25 20'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/g%3E%3C!-- angular sigil --%3E%3Cg transform='translate(170 106) rotate(26 17 17)'%3E%3Cpath d='M4 27 L11 5 H26 L30 13 L23 20 H13'/%3E%3Cpath d='M11 5 L18 13 L13 20 L22 29'/%3E%3Ccircle cx='26' cy='13' r='1.7' fill='black' stroke='none'/%3E%3C/g%3E%3C!-- open square --%3E%3Cg transform='translate(238 122) rotate(-22 16 16)'%3E%3Cpath d='M4 12 V4 H28 V18 M28 24 V28 H4 V18'/%3E%3Cpath d='M10 10 L22 22 M22 10 L10 22'/%3E%3C/g%3E%3C!-- fork symbol --%3E%3Cg transform='translate(302 108) rotate(14 16 17)'%3E%3Cpath d='M16 30 V17 L7 8 M16 17 L25 8'/%3E%3Cpath d='M7 8 V3 M3 8 H7 M25 8 V3 M25 8 H30'/%3E%3Ccircle cx='16' cy='17' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(18 18) rotate(-12 16 16)'%3E%3Cpath d='M16 2 L30 28 H20 M12 28 H2 L16 2'/%3E%3Cpath d='M12 22 H20'/%3E%3C/g%3E%3Cg transform='translate(82 32) rotate(16 16 16)'%3E%3Cpath d='M16 2 L30 16 L16 30 L8 22 M5 19 L2 16 L16 2'/%3E%3Ccircle cx='16' cy='16' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(146 16) rotate(-20 17 17)'%3E%3Cpath d='M8 6 A14 14 0 0 1 29 11'/%3E%3Cpath d='M31 17 A14 14 0 0 1 22 30'/%3E%3Cpath d='M15 31 A14 14 0 0 1 4 20'/%3E%3Cpath d='M4 14 A14 14 0 0 1 8 6'/%3E%3Cpath d='M17 10 V24'/%3E%3C/g%3E%3Cg transform='translate(212 34) rotate(24 16 16)'%3E%3Cpath d='M16 2 V28 M4 14 H28'/%3E%3Cpath d='M16 8 L22 14 L16 20'/%3E%3Ccircle cx='4' cy='14' r='1.8' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(276 18) rotate(-16 16 16)'%3E%3Cpath d='M5 4 H15 V10 H27 M27 10 V22 H18 V28 H5'/%3E%3Cpath d='M5 4 V10 M5 22 V28'/%3E%3Ccircle cx='15' cy='10' r='1.7' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(326 54) rotate(28 12 14) scale(.72)'%3E%3Cpath d='M3 14 H21 M15 8 L21 14 L15 20'/%3E%3Cpath d='M8 7 V21'/%3E%3Ccircle cx='8' cy='14' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(42 112) rotate(18 17 17)'%3E%3Cpath d='M9 3 H24 L31 16 L24 29 H17 M11 29 H9 L2 16 L9 3'/%3E%3Cpath d='M10 16 H24 M17 9 V23'/%3E%3C/g%3E%3Cg transform='translate(106 124) rotate(-14 16 16) scale(.84)'%3E%3Cpath d='M16 2 V30 M2 16 H30'/%3E%3Cpath d='M16 2 L12 7 M16 2 L20 7'/%3E%3Cpath d='M30 16 L25 12 M30 16 L25 20'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/g%3E%3Cg transform='translate(170 106) rotate(26 17 17)'%3E%3Cpath d='M4 27 L11 5 H26 L30 13 L23 20 H13'/%3E%3Cpath d='M11 5 L18 13 L13 20 L22 29'/%3E%3Ccircle cx='26' cy='13' r='1.7' fill='black' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(238 122) rotate(-22 16 16)'%3E%3Cpath d='M4 12 V4 H28 V18 M28 24 V28 H4 V18'/%3E%3Cpath d='M10 10 L22 22 M22 10 L10 22'/%3E%3C/g%3E%3Cg transform='translate(302 108) rotate(14 16 17)'%3E%3Cpath d='M16 30 V17 L7 8 M16 17 L25 8'/%3E%3Cpath d='M7 8 V3 M3 8 H7 M25 8 V3 M25 8 H30'/%3E%3Ccircle cx='16' cy='17' r='2' fill='black' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      black 0%,
      black 15%,
      transparent 100%
    );

  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  pointer-events: none;
}
.footer-fade {
  background: linear-gradient(
    to bottom,
    var(--headcolor),
    var(--bg) 30vh
  );
}
#breadcrumbs{
text-align:left !important;
}
.breadcrumbs-hover {
color: var(--text) !important;
font-weight: 400;
}
#breadcrumbs{
text-align:left !important;
}
.breadcrumbs-hover {
color: var(--text) !important;
font-weight: 400;
}

.post-small-date-4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--text);
}
.post-small-date-4::before {
    content: "";
    position: relative;
    top: -1px;
    width: 3px;
    height: 10px;
    background: var(--categorytheme);
    box-shadow:
        5px 0 0 color-mix(
            in srgb,
            var(--categorytheme) 65%,
            transparent
        ),
        10px 0 0 color-mix(
            in srgb,
            var(--categorytheme) 30%,
            transparent
        );
    margin-right: 10px;
}
.post-small-date-5 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--text);
}
.post-small-date-5::before {
    content: "";
    position: relative;
    width: 17px;
    height: 12px;
    background:
        linear-gradient(var(--categorytheme), var(--categorytheme)) 0 0 / 17px 2px no-repeat,
        linear-gradient(var(--categorytheme), var(--categorytheme)) 4px 4px / 13px 2px no-repeat,
        linear-gradient(var(--categorytheme), var(--categorytheme)) 8px 8px / 9px 2px no-repeat;
    border-radius: 2px;
    flex-shrink: 0;
}

.post-small-date-6 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--text);
}

.post-small-date-6::before {
    content: "";
    position: relative;
    top: -1px;
    width: 20px;
    height: 12px;
    background:
        linear-gradient(var(--categorytheme), var(--categorytheme)) 0 4px / 2px 5px no-repeat,
        linear-gradient(var(--categorytheme), var(--categorytheme)) 4px 1px / 2px 11px no-repeat,
        linear-gradient(var(--categorytheme), var(--categorytheme)) 8px 3px / 2px 7px no-repeat,
        linear-gradient(var(--categorytheme), var(--categorytheme)) 12px 0 / 2px 12px no-repeat,
        linear-gradient(var(--categorytheme), var(--categorytheme)) 16px 5px / 2px 4px no-repeat,
        linear-gradient(var(--categorytheme), var(--categorytheme)) 19px 2px / 1px 8px no-repeat;
    flex-shrink: 0;
}

.post-small-date-7 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--text);
}

.post-small-date-7::before {
    content: "";
    position: relative;
    top: -0.7px;
    width: 7px;
    height: 7px;
    background: var(--categorytheme);
    border-radius: 50%;
    box-shadow:
        9px 0 0 color-mix(
            in srgb,
            var(--categorytheme) 65%,
            transparent
        ),
        18px 0 0 color-mix(
            in srgb,
            var(--categorytheme) 30%,
            transparent
        );
    margin-right: 14px;
    flex-shrink: 0;
}

.post-small-date-8 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--text);
}

.post-small-date-8::before {
    content: "";
    position: relative;
    top: -1px;
    width: 23px;
    height: 10px;
    background:
        linear-gradient(45deg,
            transparent 42%,
            var(--categorytheme) 43% 60%,
            transparent 61%
        ) 0 0 / 9px 5px no-repeat,

        linear-gradient(-45deg,
            transparent 42%,
            var(--categorytheme) 43% 60%,
            transparent 61%
        ) 0 5px / 9px 5px no-repeat,

        linear-gradient(45deg,
            transparent 42%,
            color-mix(in srgb, var(--categorytheme) 65%, var(--bg)) 43% 60%,
            transparent 61%
        ) 7px 0 / 9px 5px no-repeat,

        linear-gradient(-45deg,
            transparent 42%,
            color-mix(in srgb, var(--categorytheme) 65%, var(--bg)) 43% 60%,
            transparent 61%
        ) 7px 5px / 9px 5px no-repeat,

        linear-gradient(45deg,
            transparent 42%,
            color-mix(in srgb, var(--categorytheme) 30%, var(--bg)) 43% 60%,
            transparent 61%
        ) 14px 0 / 9px 5px no-repeat,

        linear-gradient(-45deg,
            transparent 42%,
            color-mix(in srgb, var(--categorytheme) 30%, var(--bg)) 43% 60%,
            transparent 61%
        ) 14px 5px / 9px 5px no-repeat;
    flex-shrink: 0;
}

.post-small-date-9 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--text);
}

.post-small-date-9::before {
    content: "";
    position: relative;
    top: -0.5px;
    width: 22px;
    height: 9px;
    background:
        linear-gradient(
            var(--categorytheme),
            var(--categorytheme)
        ) 0 0 / 6px 9px no-repeat,

        linear-gradient(
            color-mix(
                in srgb,
                var(--categorytheme) 75%,
                var(--bg)
            ),
            color-mix(
                in srgb,
                var(--categorytheme) 75%,
                var(--bg)
            )
        ) 8px 0 / 6px 9px no-repeat,

        linear-gradient(
            color-mix(
                in srgb,
                var(--categorytheme) 60%,
                var(--bg)
            ),
            color-mix(
                in srgb,
                var(--categorytheme) 60%,
                var(--bg)
            )
        ) 16px 0 / 6px 9px no-repeat;

    transform: skewX(-24deg);
    border-radius: 1px;
    flex-shrink: 0;
}

.post-small-date-10 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--text);
}

.post-small-date-10::before {
    content: "";
    position: relative;
    top: -1px;

    width: 20px;
    height: 10px;

    background: var(--categorytheme);

    clip-path: polygon(
        0 35%,
        5px 35%,
        8px 0,
        12px 65%,
        15px 35%,
        20px 35%,
        20px 65%,
        14px 65%,
        11px 100%,
        7px 35%,
        5px 65%,
        0 65%
    );

    flex-shrink: 0;
}

.category-link {
    display: inline-block;
    padding: 2px 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    background: color-mix(in srgb, var(--categorytheme) 25%, var(--bg));
    border-radius: 5px;
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease;
	margin-bottom: 10px;
    margin-top: 5px;	
}
.category-link:hover {
    color: #fff;
    background: var(--categorytheme);
    text-decoration: none;
}

.post-4 {
    position: relative;
    margin-bottom: 40px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--homeborders);
    border-radius: 14px;
    box-shadow:
        6px 6px 0 color-mix(
            in srgb,
            var(--primary-color) 45%,
            var(--bg)
        ),
        0 8px 22px rgba(20, 30, 50, 0.08);
    isolation: isolate;
}

.dark-shadow {
box-shadow:
        6px 6px 0 color-mix(
            in srgb,
            var(--primary-color) 70%,
            var(--bg)
        ),
        0 8px 22px rgba(20, 30, 50, 0.08);	
}

.dark-border {
	box-shadow:
        6px 6px 0 color-mix(
            in srgb,
            var(--categorytheme) 70%,
            var(--bg)
        ),
        0 8px 22px rgba(20, 30, 50, 0.08);
}	

.post-4::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 24px;
    width: 52px;
    height: 17px;
    background: color-mix(
            in srgb,
            var(--primary-color) 80%,
            transparent
        );
    border-radius: 6px 6px 2px 2px;
    box-shadow:
        10px 5px 0 color-mix(
            in srgb,
            var(--primary-color) 25%,
            transparent
        );
}

.post-4 .post-img {
    display: block;
    overflow: hidden;
    border-radius: 9px;
}

.post-4 .post-img > img {
    display: block;
    width: 100%;
    border-radius: 0;
}

.post-4 .post-body {
    padding: 18px 6px 5px;
}

.post-4 .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.post-4 .post-title {
    font-size: 18px;
    margin-bottom: 7px;
}

.post-3 {
    position: relative;
    margin-bottom: 52px;
    background: transparent;
    isolation: isolate;
}
.post-3::before {
    content: "";
    position: absolute;
    left: 14px;
    right: -10px;
    top: 16px;
    bottom: -10px;
    background:
        color-mix(
            in srgb,
            var(--primary-color) 70%,
            var(--bg)
        );
    border-radius: 14px;
    z-index: -2;
    transform: rotate(1.2deg);
}
.post-3::after {
    content: "";
    position: absolute;
    left: 6px;
    right: -5px;
    top: 8px;
    bottom: -1px;
    background:
        color-mix(
            in srgb,
            var(--primary-color) 20%,
            var(--bg)
        );
    border: 1px solid var(--homeborders);
    border-radius: 14px;
    z-index: -1;
    transform: rotate(-0.5deg);
}
.post-3 .post-img,
.post-3 .post-body {
    background:
        color-mix(
            in srgb,
            var(--primary-color) 10%,
            var(--bg)
        );
}
.post-dark {
    background:
        color-mix(
            in srgb,
            var(--primary-color) 25%,
            var(--bg)
        ) !important;
}
.post-3 .post-img {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--homeborders);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}
.post-3 .post-img > img {
    display: block;
    width: 100%;
    border-radius: 0;
    transition:
        transform 0.45s ease;
}
.post-3 .post-body {
    position: relative;
    padding: 20px 22px 22px;
    border: 1px solid var(--homeborders);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow:
        0 8px 24px rgba(20, 30, 50, 0.08);
}
.post-3 .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 0;
    margin-bottom: 14px;
}
.post-3 .post-title {
   font-size: 18px;
   margin-bottom: 7px;
}
.post-small-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text);
    background: color-mix(
        in srgb,
        var(--categorytheme) 8%,
        var(--bg)
    );
    border-left: 3px solid var(--categorytheme);
    border-radius: 0 5px 5px 0;
}
.post-small-date-2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text);
    background: color-mix(
        in srgb,
        var(--sections) 70%,
        var(--bg)
    );
    border-left: 3px solid var(--categorytheme);
    border-radius: 0 5px 5px 0;
}
.post-small-date-3 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--text);
}
.post-small-date-3::before {
    content: "";
    position: relative;
    top: -1px;
    width: 8px;
    height: 8px;
    background: var(--categorytheme);
    box-shadow:
        3px 3px 0 color-mix(
            in srgb,
            var(--categorytheme) 30%,
            transparent
        );
}

.post-theme {
background: 
color-mix(in srgb, var(--primary-color) 10%, var(--bg));
}

.post-theme-2 {
background: 
color-mix(in srgb, var(--sections) 80%, var(--bg)) !important;
}

.post-theme-3 {
background: 
color-mix(in srgb, var(--categorytheme) 15%, var(--bg));
}

.post-theme-4 {
background: 
color-mix(in srgb, var(--sections) 80%, var(--bg));
}

.post-theme-5 {
background: 
color-mix(in srgb, var(--primary-color) 10%, var(--bg));
}

.post-theme-6 {
background: var(--bg);
}

.borders-left::after {
border-left-color: inherit;
}

.borders-left-2::after {
border-left-color: inherit;
}

.post-2 {
    position: relative;
    margin-bottom: 44px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 8px 22px rgba(20, 30, 50, .13);
}

.post-2::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--homeborders);
    border-radius: 14px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 20;
}

.post-2::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-right: 4px solid var(--corners);
    border-bottom: 4px solid var(--corners);
    border-radius: 13px;
    -webkit-mask:
        linear-gradient(
            to top,
            black 0%,
            black 10%,
            rgba(0, 0, 0, .8) 30%,
            rgba(0, 0, 0, .45) 60%,
            transparent 100%
        ) right bottom / 14px 80% no-repeat,

        linear-gradient(
            to left,
            black 0%,
            black 10%,
            rgba(0, 0, 0, .8) 30%,
            rgba(0, 0, 0, .45) 60%,
            transparent 100%
        ) right bottom / 80% 14px no-repeat;

    mask:
        linear-gradient(
            to top,
            black 0%,
            black 10%,
            rgba(0, 0, 0, .8) 30%,
            rgba(0, 0, 0, .45) 60%,
            transparent 100%
        ) right bottom / 14px 80% no-repeat,

        linear-gradient(
            to left,
            black 0%,
            black 10%,
            rgba(0, 0, 0, .8) 30%,
            rgba(0, 0, 0, .45) 60%,
            transparent 100%
        ) right bottom / 80% 14px no-repeat;
    -webkit-mask-composite: source-over;
    mask-composite: add;
    pointer-events: none;
    z-index: 21;
}

.posts-2-right-image::after {

}

.posts-2-right-image-2::after {
}

.right-images {
margin-right: 0px !important;
margin-left: 5px !important;
}

.post-2 .post-img {
    display: block;
    overflow: hidden;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
}

.post-2 .post-img:hover,
.post-2 .post-img:focus {
    opacity: 0.9;
}

.post-2 .post-img > img {
    display: block;
    width: 100%;
    border-radius: 0;
}

.post-2 .post-meta {
    margin-top: 15px;
    margin-bottom: 15px;
}

.post-2 .post-meta:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.post-2 .post-body {
    padding: 0px 18px 0px 18px;
}

 .post-2 .post-title {
   font-size: 18px;
   margin-bottom: 7px;
 }

 .post-2.post-thumb {
   position: relative;
 }

 .post-2.post-thumb .post-img:after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
 }

 .post-2.post-thumb .post-body {
   position: absolute;
   bottom: 0px;
   padding: 20px 15px;
 }

 .post-2.post-thumb .post-meta .post-date {
   color: var(--dates);
 }

 .post-2.post-thumb .post-title {
   font-size: 22px;
 }

 .post-2.post-thumb .post-title>a {
   color: var(--titles);
 }

 .post-2.post-widget:after {
   content: '';
   display: block;
   clear: both;
 }

 .post-2.post-widget .post-img {
   width: 110px;
   float: left;
   margin-right: 10px;
 }

 .post-2.post-widget .post-img img {
   width: 100%;
 }

 .post-2.post-widget .post-title {
   font-size: 17px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 .post-2.post-row:after {
   content: '';
   display: block;
   clear: both;
 }

 .post-2.post-row .post-img {
   width: 40%;
   float: left;
 }

 .post-2.post-row .post-body {
   margin-left: calc(40% + 30px);
 }
 
 .post-2.post-row .post-body-2 {
   margin-left: calc(40% + 10px);
 } 
 
  .post-2.post-row .post-body-3 {
   margin-left: calc(40% + 20px);
 } 

 .post-2.post-row .post-meta {
   margin-top: 0px;
 }

 .post-2.post-row .post-title {
   margin-bottom: 15px;
 }

.post.post-row-2 {
    position: relative;
    padding: 10px;
    margin-bottom: 22px;
    background:
        color-mix(
            in srgb,
            var(--primary-color) 10%,
            var(--bg)
        );
    border: 1px solid color-mix(in srgb, var(--primary-color) 50%, var(--bg));
    border-radius: 12px;
    box-shadow: 0 5px 0 
color-mix(in srgb, var(--primary-color) 65%, var(--bg)), 0 15px 22px rgba(20, 30, 50, .16);
}
.post.post-row-2::after {
    content: "";
    display: block;
    clear: both;
}
.post.post-row-2 .post-img {
    width: 40%;
    float: left;
    overflow: hidden;
    border-radius: 8px;
}

.post.post-row-2 .post-img img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.post.post-row-2 .post-body {
    margin-left: calc(40% + 20px);
    padding-right: 10px;
}

.post.post-row-2::before {
    content: "";
    position: absolute;
    right: -4px;
    top: 18px;
    width: 8px;
    height: 30px;
    background: color-mix(in srgb, var(--categorytheme) 90%, var(--bg));
    border-radius: 4px 0 0 4px;
}

.post.post-row-2 .post-title {
    line-height: 1.35;
    margin-bottom: 12px;
}

.post.post-row-2 #autor {
    width: 28px;
    height: 28px;
    object-fit: cover;
}

.post-5 {
    position: relative;
    margin-bottom: 50px;
    padding: 12px;
    background: 
color-mix(in srgb, var(--primary-color) 10%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--primary-color) 50%, var(--bg));
    border-radius: 6px;
    box-shadow:
    0 5px 0 color-mix(in srgb, var(--primary-color) 65%, var(--bg)),
    0 15px 22px rgba(20, 30, 50, .16);
}

.post-5 .post-img {
    display: block;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary-color) 50%, var(--bg));
    border-radius: 3px;
}

.post-5 .post-img > img {
    display: block;
    width: 100%;
    border-radius: 0;
}

.post-5 .post-body {
    padding: 18px 6px 5px;
}

.post-5 .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.post-5 .post-title {
    font-size: 18px;
    margin-bottom: 7px;
}

.post-5::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 22px;
    width: 10px;
    height: 10px;
    background: color-mix(in srgb, var(--primary-color) 70%, var(--bg));
    border: 2px solid var(--categorytheme);
    border-radius: 50%;
    box-shadow:
        15px 0 0 -2px color-mix(in srgb, var(--primary-color) 70%, var(--bg)),
        15px 0 0 0 var(--categorytheme),
        30px 0 0 -2px color-mix(in srgb, var(--primary-color) 70%, var(--bg)),
        30px 0 0 0 var(--categorytheme),
		45px 0 0 -2px color-mix(in srgb, var(--primary-color) 70%, var(--bg)),
        45px 0 0 0 var(--categorytheme),
		60px 0 0 -2px color-mix(in srgb, var(--primary-color) 70%, var(--bg)),
        60px 0 0 0 var(--categorytheme)
}

.post-6 {
    position: relative;
    margin-bottom: 55px;
    padding: 12px;
    background:
        color-mix(
            in srgb,
            var(--primary-color) 10%,
            var(--bg)
        );
    border: 1px solid
        color-mix(
            in srgb,
            var(--primary-color) 65%,
            var(--bg)
        );
    border-radius: 5px 18px 5px 18px;
    isolation: isolate;
}

.post-6::before {
    content: "";
    position: absolute;
    top: -13px;
    right: 22px;
    width: 52px;
    height: 30px;
    background-image:
        radial-gradient(
            circle,
            var(--categorytheme) 2px,
            transparent 2.5px
        );
    background-size: 10px 10px;
    transform: rotate(7deg);
    z-index: 5;
}

.post-6::after {
    content: "";
    position: absolute;
    left: -9px;
    bottom: 30px;
    width: 18px;
    height: 42px;
    background:
        repeating-linear-gradient(
            135deg,
            var(--primary-color) 0 4px,
            transparent 4px 8px
        );
    border: 1px solid var(--primary-color);
    transform: rotate(-7deg);
    z-index: 5;
}

.post-6 .post-img {
    position: relative;
    display: block;
    overflow: hidden;
    border: 2px solid
        color-mix(
            in srgb,
            var(--primary-color) 60%,
            var(--bg)
        );
    border-radius: 3px 12px 3px 12px;
}

.post-6 .post-img > img {
    display: block;
    width: 100%;
    border-radius: 0;
}

.post-6 .post-body {
    position: relative;
    padding: 19px 8px 8px;
}

.post-6 .post-body::before {
    content: "〰〰〰";
    position: absolute;
    top: 3px;
    right: 7px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -5px;
    color: var(--categorytheme);
    transform: rotate(-4deg);
}

.post-6 .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
}

.post-6 .post-title {
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 7px;
}

.post-7 {
    position: relative;
    margin-bottom: 52px;
    padding: 12px;
    background:
        color-mix(
            in srgb,
            var(--primary-color) 10%,
            var(--bg)
        );
    border: 1px solid
        color-mix(
            in srgb,
            var(--primary-color) 35%,
            var(--homeborders)
        );
    clip-path: polygon(
        0 0,
        calc(100% - 24px) 0,
        100% 24px,
        100% 100%,
        24px 100%,
        0 calc(100% - 24px)
    );
}

.post-7::before {
    content: "";
    position: absolute;
    right: 15px;
    top: 15px;
    width: 42px;
    height: 42px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--categorytheme) 45%,
            transparent
        );
    transform: rotate(45deg);
}



.post-7 .post-img {
    position: relative;
    display: block;
    overflow: hidden;
    clip-path: polygon(
        0 0,
        calc(100% - 15px) 0,
        100% 15px,
        100% 100%,
        0 100%
    );
}

.post-7 .post-img > img {
    display: block;
    width: 100%;
    border-radius: 0;
}

.post-7 .post-img::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38%;
    height: 5px;
    background: var(--categorytheme);
}

.post-7 .post-body {
    position: relative;
    padding: 21px 10px 6px;
}

.post-7 .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
}

.post-7 .post-title {
    position: relative;
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 8px;
    padding-left: 13px;
}

.post-7 .post-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 3px;
    height: calc(100% - 6px);
    background: var(--categorytheme);
}

.post-8 {
    position: relative;
    margin-bottom: 58px;
    padding: 13px;
    background:
        color-mix(
            in srgb,
            var(--primary-color) 10%,
            var(--bg)
        );
    border: 1px solid var(--homeborders);
    border-radius: 16px 3px 16px 3px;
    box-shadow:
        5px 5px 0 color-mix(
            in srgb,
            var(--primary-color) 35%,
            var(--bg)
        );
    isolation: isolate;
}

.post-8::before {
    content: "";
    position: absolute;
    top: 24px;
    right: -9px;
    width: 5px;
    height: 42%;
    background: var(--categorytheme);
    border-radius: 0 5px 5px 0;
    z-index: -1;
}

.post-8::after {
    content: "";
    position: absolute;
    left: 28px;
    bottom: -9px;
    width: 34%;
    height: 5px;
    background:
        linear-gradient(
            90deg,
            var(--categorytheme) 0 55%,
            transparent 55% 63%,
            color-mix(
                in srgb,
                var(--categorytheme) 45%,
                var(--bg)
            ) 63% 100%
        );
    transform: skewX(-28deg);
    z-index: 4;
}

.post-8 .post-img {
    position: relative;
    display: block;
    margin: -5px 7px -10px -5px;
    padding: 5px;
    background: var(--bg);
    border: 1px solid
        color-mix(
            in srgb,
            var(--primary-color) 45%,
            var(--bg)
        );
    border-radius: 12px 2px 12px 2px;
    overflow: hidden;
}

.post-8 .post-img > img {
    display: block;
    width: 100%;
    border-radius: 8px 1px 8px 1px;
}

.post-8 .post-img::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 38px;
    height: 38px;
    background:
        linear-gradient(
            135deg,
            transparent 48%,
            var(--categorytheme) 49% 54%,
            transparent 55%
        );
    pointer-events: none;
}

.post-8 .post-body {
    position: relative;
    margin-top: 9px;
    padding:
        18px
        0px
        0px
        0px;
}

.post-8 .post-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    width: 7px;
    height: 7px;
    background: var(--categorytheme);
    box-shadow:
        11px 0 0 color-mix(
            in srgb,
            var(--categorytheme) 50%,
            transparent
        ),
        22px 0 0 color-mix(
            in srgb,
            var(--categorytheme) 20%,
            transparent
        );
}

.post-8 .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
}

.post-8 .post-title {
    position: relative;
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 8px;
}

.pb-10 {
padding-bottom: 10px;
}
.pb-15 {
padding-bottom: 15px;
}
.pb-20 {
padding-bottom: 20px;
}
.pt-10 {
padding-top: 10px;
}
.pt-5 {
padding-top: 5px;
}
.mb-25 {
margin-bottom: 25px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-35 {
margin-bottom: 35px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-50 {
margin-bottom: 50px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-15 {
margin-bottom: 15px;
}
.mb-0
{
margin-bottom: 1px !important;
}
.mb-3
{
margin-bottom: 3px !important;
}
.pl-13 {
padding-left: 13px !important;
}