/* ! --------------- Resets --------------- ! */
* {
  margin: 0;
  padding: 0;
  -webkit-margin-before: 0;
  -webkit-margin-end: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-padding-before: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
  -webkit-padding-start: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  height: 100%;
  scroll-behavior: smooth;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

textarea:not([rows]) {
  min-height: 10em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    -webkit-animation-delay: -1ms !important;
    animation-delay: -1ms !important;
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    -webkit-transition-delay: 0s !important;
            transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
@media screen and (max-width: 1500px) {
  .rellax {
    -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
  }
}
/* ! ------------------------------ 
         Root Variables
------------------------------ ! */
:root {
  /* Font Families */
  --font-body: "Atkinson Hyperlegible Next", sans-serif;
  --font-secondary: "Ubuntu Mono", monospace;
  --font-heading: "Playfair Display", serif;
  /* Text Sizing */
  --body-font-size: 11.5px;
  /* ------------- Colors ----------------- */
  /* Text Colors */
  --clr-font-dark: #1a1a1a;
  --clr-font-light: #cecece;
  --clr-font-light-secondary: #f5f5f5;
  --clr-font-medium: #6b6b6b;
  --clr-strong: var(--clr-accent-2);
  /* Color Palette ( Must be in RGB ) */
  --clr-accent-1: rgb(103, 119, 82);
  --clr-accent-2: rgb(129, 148, 103);
  --clr-accent-3: rgb(151, 173, 125);
  --clr-light-1: #e8ebea;
  --clr-light-2: #e2e2e2;
  --clr-light-3: #e7e7e7;
  --clr-light-border: #cecece;
  --clr-dark-1: #202020;
  --clr-dark-2: #252525;
  --clr-dark-3: #0a0a0a;
  --clr-dark-border-1: #222222;
  --clr-dark-border-2: #181818;
  /* ------------- Utilities ----------------- */
  --border-radius-primary: 2px;
  --column-gap: 12px;
  --row-gap: 20px;
  --padding-primary: clamp(1rem, 4vw - 1rem, 1.6rem);
  --padding-box: 16px var(--padding-primary);
  --section-margin: 1rem;
  --text-stroke-primary: var(--clr-dark-3) 1px 0px 0px, var(--clr-dark-3) 0.540302px 0.841471px 0px, var(--clr-dark-3) -0.416147px 0.909297px 0px, var(--clr-dark-3) -0.989993px 0.14112px 0px, var(--clr-dark-3) -0.653644px -0.756803px 0px, var(--clr-dark-3) 0.283662px -0.958924px 0px, var(--clr-dark-3) 0.96017px -0.279416px 0px;
  --transition: .7s ease;
  /* ------------- Images ----------------- */
  --bg-img-primary: url(https://noctiferous.neocities.org/images/Body%20Background%20Image%20-%20WebP.webp);
  --hero-banner-image: url(https://noctiferous.neocities.org/images/Hero%20-%20Banner%20Main%20Image%20-%20WebP%20Format.webp);
  --element-trees: url(https://i.imgur.com/aDiRVZH.png);
  --element-glint: url(https://i.imgur.com/7jEkr2C.png);
  --inline-accent: url(https://i.imgur.com/dg4Sv9e.png);
  --divider-element: url(https://i.imgur.com/nQwIKS2.png);
  --pattern-noise: url(https://i.imgur.com/EIhLM4r.png);
  --pattern-grain: url(https://i.imgur.com/I6HrVky.png);
  --pattern-silver: url(https://i.imgur.com/xUyfjFa.png);
  --motif: url(https://i.imgur.com/f8lPOqf.png);
  /* ------------- Vectors ----------------- */
  --svg-star-center: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 474.49 85.23'%3E%3Cpath d='M474.49,42.61c-14.12,1.04-28.7.59-42.86.75-22.56.25-45.12.47-67.68.71-34.21.36-68.48.45-102.67,1.59-8.25.28-15.56.82-22.58,4.2-3.66,1.76-6.59,4.15-8.73,6.99-6.28,8.36-7.25,19.05-8.78,28.37-1.05-6.33-2.1-12.71-4.14-18.91-2.3-6.99-6.26-13.5-14.93-17.15-9.55-4.01-20.35-3.58-31.03-3.85-30.25-.78-60.52-1.05-90.78-1.42-17.55-.21-35.1-.41-52.66-.66-9.17-.13-18.53.07-27.66-.62,9.13-.69,18.5-.49,27.66-.62,17.55-.25,35.1-.45,52.66-.66,30.26-.36,60.53-.64,90.78-1.42,10.69-.28,21.49.16,31.03-3.85,8.67-3.64,12.63-10.16,14.93-17.15,2.04-6.2,3.1-12.59,4.14-18.91,1.54,9.32,2.5,20,8.78,28.37,2.14,2.84,5.07,5.23,8.73,6.99,7.02,3.38,14.33,3.93,22.58,4.2,34.19,1.14,68.46,1.23,102.67,1.59,22.56.24,45.12.45,67.68.71,14.16.16,28.74-.29,42.86.75Z' stroke-width='0'/%3E%3C/svg%3E");
  --svg-star-right: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 571.7 177.58'%3E%3Cpath d='M482.92,177.58c-1.62-13.05-3.26-26.21-6.38-39-3.32-13.61-9.55-29.78-23.34-36.05-3.89-1.77-8.7-1.97-12.88-2.43-10.56-1.15-21.2-1.68-31.81-2.21-39.24-1.94-78.54-2.72-117.82-3.53-57.81-1.2-115.63-2.04-173.45-2.95-25.63-.4-51.26-.8-76.89-1.32-13.38-.27-27.03.07-40.36-1.3,16.69-1.71,33.83-1.18,50.58-1.5,31.14-.59,62.28-1.05,93.42-1.54,60.95-.95,121.89-1.85,182.83-3.34,33.54-.82,67.16-1.47,100.64-3.83,8.79-.62,20.17,0,27.96-4.86,5.78-3.61,10.41-8.73,13.74-14.64,9.82-17.42,11.33-39.66,13.73-59.07,2.7,21.89,3.91,51.51,20.58,68.21,16.66,16.69,46.35,17.87,68.21,20.58-21.89,2.7-51.51,3.91-68.21,20.58-16.69,16.66-17.87,46.35-20.58,68.21Z' stroke-width='0'/%3E%3C/svg%3E");
  --svg-inverted-border: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1371.93 1371.93'%3E%3Cpath d='M1371.93,189.46v993.02c-11.9,3.43-23.79,6.9-35.7,10.3-38.6,11.01-72.05,30.31-98.16,61.28-19.72,23.4-32.32,50.44-40,79.86-3.29,12.6-6.06,25.34-9.07,38.02H185.54c-1.33-4.11-2.92-8.15-3.94-12.34-2.31-9.49-3.93-19.16-6.55-28.56-19.77-70.88-65.1-116.73-135.56-137.75-8.94-2.67-18.04-4.82-27.05-7.26-4.16-1.13-8.29-2.36-12.44-3.55C0,851.9,0,521.33,0,190.76c8.94-2.67,17.87-5.37,26.83-7.99,5.83-1.71,11.76-3.12,17.55-4.97,42.52-13.57,77.77-37.23,103-74.64,16.03-23.76,25.72-50.13,31.73-77.99C180.94,16.71,181.88,8.01,185.54,0,520.03,0,854.52,0,1189.01,0c1.23,4.82,2.5,9.64,3.7,14.47,3.14,12.65,5.56,25.53,9.5,37.92,11.56,36.31,31.43,67.23,61.52,91.12,20.54,16.31,43.61,27.77,68.68,35.2,13.09,3.88,26.35,7.19,39.53,10.75ZM13.82,1175.92c2.07.55,3.93,1.09,5.82,1.53,16.56,3.87,32.75,8.87,48.38,15.63,43.96,19.01,77.75,49.04,99.58,91.99,10.43,20.52,17.27,42.25,21.73,64.77.75,3.79,1.51,7.57,2.23,11.15,8.46,1.17,985.93.84,990.82-.29.45-2.04.87-4.17,1.39-6.27,3.15-12.65,5.59-25.54,9.62-37.91,15.64-48.04,44.52-85.77,88.51-111.38,22.58-13.14,46.91-21.75,72.26-27.68,2.04-.48,4.04-1.14,6.08-1.73.12-2.72.29-4.88.3-7.04.26-43.11.62-86.22.71-129.33.18-82.96.27-165.93.26-248.89-.02-135.44-.14-270.88-.24-406.32-.03-38.76-.09-77.52-.23-116.28-.07-21.55-.32-43.11-.52-64.66-.02-2.13-.28-4.26-.44-6.58-2.81-.72-5.3-1.41-7.81-2-14.43-3.37-28.56-7.74-42.27-13.38-39.33-16.18-71.54-41.09-94.42-77.35-15.17-24.04-24.63-50.33-30.39-78.04-1.01-4.84-1.98-9.69-2.93-14.32-1.23-.3-1.86-.58-2.49-.58-327.94-.04-655.87-.07-983.81-.08-1.08,0-2.16.2-3.23.34-.19.02-.37.2-.55.32-.18.12-.34.27-.75.6-.24,1.01-.59,2.26-.81,3.52-2.51,14.38-5.94,28.54-10.66,42.36-14.3,41.84-38.56,76.3-75.36,101.43-22.16,15.14-46.53,25.41-72.33,32.44-6.06,1.65-12.17,3.11-18.1,4.61-2.02,8.52-2.42,964.09-.38,979.4Z' fill='%23252525' stroke-width='0'/%3E%3Cpath d='M1160.87,1334.68H213.35c-.55-1.75-1.22-3.54-1.65-5.38-3.83-16.33-8.25-32.46-14.82-47.95-20.21-47.66-54.39-81.77-100.72-104.14-14.54-7.02-29.63-12.57-45.14-17-3.74-1.07-7.45-2.27-10.96-3.34-1.29-5.31-1.82-927.99-.57-940.77,2.96-.98,6.16-2.17,9.43-3.1,15.94-4.53,31.49-10.07,46.45-17.23,56.95-27.25,93.93-71.33,111.1-132.03,2.36-8.36,4.34-16.82,6.57-25.53h947.85c1.05,4.21,2.19,8.55,3.23,12.93,6.42,27.13,16.52,52.69,32.32,75.82,23.06,33.75,54.35,57.28,91.68,73,11.8,4.97,24.15,8.63,36.27,12.84,3.28,1.14,6.62,2.07,10.27,3.21v940.52c-3.71,1.17-7.58,2.48-11.51,3.6-22.5,6.41-44.01,15.13-64.12,27.16-46.33,27.71-76,68.11-91.03,119.63-1.34,4.59-2.53,9.23-3.72,13.86-1.13,4.41-2.17,8.85-3.39,13.89ZM1330.94,1153.3c1.23-10.12.77-929.56-.4-934.07-12.35-4.35-24.76-8.39-36.92-13.06-33.89-13.02-63.56-32.29-87.34-60.05-22.27-25.99-36.28-56.12-44.6-89.1-1.16-4.6-2.38-9.19-3.6-13.9-2.15-.15-3.86-.36-5.56-.38-28.95-.31-57.91-.75-86.86-.85-65.33-.21-130.65-.31-195.98-.34-91.89-.05-183.79-.06-275.68,0-95.16.06-190.32.16-285.48.34-27,.05-53.99.41-80.99.66-3.87.04-7.74.27-11.27.39-.5,1.02-.76,1.39-.87,1.8-1.72,6.52-3.31,13.07-5.14,19.56-16.54,58.84-51.33,102.98-105.87,131.14-17.27,8.91-35.51,15.41-54,21.22-2.45.77-4.9,1.53-7.45,2.32v934.52c2.58.84,4.86,1.53,7.1,2.33,12.7,4.54,25.62,8.54,38.03,13.77,45.68,19.24,81.42,49.76,104.69,94.05,9.88,18.81,16.52,38.8,21.38,59.42.53,2.26,1.3,4.46,2.06,7.01,2.64,0,4.8,0,6.95,0,67.72.31,135.43.63,203.15.92,24.82.11,49.65.2,74.47.21,91.68.03,183.35.08,275.03-.01,64.02-.06,128.03-.34,192.05-.5,32.88-.09,65.76-.11,98.64-.22,28.74-.1,57.48-.27,86.23-.44,1.68,0,3.36-.29,5.18-.45.54-1.72,1.05-3.13,1.43-4.57,1.73-6.52,3.25-13.1,5.15-19.56,12.37-42.07,34.49-77.79,69.12-105.24,19.8-15.7,41.83-27.4,65.57-35.91,10.43-3.74,20.95-7.25,31.81-11Z' fill='%23212121' stroke-width='0'/%3E%3C/svg%3E");
  --svg-inverted-border-secondary: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1371.93 1371.93'%3E%3Cpath d='M1371.93,189.46v993.02c-11.9,3.43-23.79,6.9-35.7,10.3-38.6,11.01-72.05,30.31-98.16,61.28-19.72,23.4-32.32,50.44-40,79.86-3.29,12.6-6.06,25.34-9.07,38.02H185.54c-1.33-4.11-2.92-8.15-3.94-12.34-2.31-9.49-3.93-19.16-6.55-28.56-19.77-70.88-65.1-116.73-135.56-137.75-8.94-2.67-18.04-4.82-27.05-7.26-4.16-1.13-8.29-2.36-12.44-3.55C0,851.9,0,521.33,0,190.76c8.94-2.67,17.87-5.37,26.83-7.99,5.83-1.71,11.76-3.12,17.55-4.97,42.52-13.57,77.77-37.23,103-74.64,16.03-23.76,25.72-50.13,31.73-77.99C180.94,16.71,181.88,8.01,185.54,0,520.03,0,854.52,0,1189.01,0c1.23,4.82,2.5,9.64,3.7,14.47,3.14,12.65,5.56,25.53,9.5,37.92,11.56,36.31,31.43,67.23,61.52,91.12,20.54,16.31,43.61,27.77,68.68,35.2,13.09,3.88,26.35,7.19,39.53,10.75ZM13.82,1175.92c2.07.55,3.93,1.09,5.82,1.53,16.56,3.87,32.75,8.87,48.38,15.63,43.96,19.01,77.75,49.04,99.58,91.99,10.43,20.52,17.27,42.25,21.73,64.77.75,3.79,1.51,7.57,2.23,11.15,8.46,1.17,985.93.84,990.82-.29.45-2.04.87-4.17,1.39-6.27,3.15-12.65,5.59-25.54,9.62-37.91,15.64-48.04,44.52-85.77,88.51-111.38,22.58-13.14,46.91-21.75,72.26-27.68,2.04-.48,4.04-1.14,6.08-1.73.12-2.72.29-4.88.3-7.04.26-43.11.62-86.22.71-129.33.18-82.96.27-165.93.26-248.89-.02-135.44-.14-270.88-.24-406.32-.03-38.76-.09-77.52-.23-116.28-.07-21.55-.32-43.11-.52-64.66-.02-2.13-.28-4.26-.44-6.58-2.81-.72-5.3-1.41-7.81-2-14.43-3.37-28.56-7.74-42.27-13.38-39.33-16.18-71.54-41.09-94.42-77.35-15.17-24.04-24.63-50.33-30.39-78.04-1.01-4.84-1.98-9.69-2.93-14.32-1.23-.3-1.86-.58-2.49-.58-327.94-.04-655.87-.07-983.81-.08-1.08,0-2.16.2-3.23.34-.19.02-.37.2-.55.32-.18.12-.34.27-.75.6-.24,1.01-.59,2.26-.81,3.52-2.51,14.38-5.94,28.54-10.66,42.36-14.3,41.84-38.56,76.3-75.36,101.43-22.16,15.14-46.53,25.41-72.33,32.44-6.06,1.65-12.17,3.11-18.1,4.61-2.02,8.52-2.42,964.09-.38,979.4Z' fill='%23e7e7e7' stroke-width='0'/%3E%3Cpath d='M1160.87,1334.68H213.35c-.55-1.75-1.22-3.54-1.65-5.38-3.83-16.33-8.25-32.46-14.82-47.95-20.21-47.66-54.39-81.77-100.72-104.14-14.54-7.02-29.63-12.57-45.14-17-3.74-1.07-7.45-2.27-10.96-3.34-1.29-5.31-1.82-927.99-.57-940.77,2.96-.98,6.16-2.17,9.43-3.1,15.94-4.53,31.49-10.07,46.45-17.23,56.95-27.25,93.93-71.33,111.1-132.03,2.36-8.36,4.34-16.82,6.57-25.53h947.85c1.05,4.21,2.19,8.55,3.23,12.93,6.42,27.13,16.52,52.69,32.32,75.82,23.06,33.75,54.35,57.28,91.68,73,11.8,4.97,24.15,8.63,36.27,12.84,3.28,1.14,6.62,2.07,10.27,3.21v940.52c-3.71,1.17-7.58,2.48-11.51,3.6-22.5,6.41-44.01,15.13-64.12,27.16-46.33,27.71-76,68.11-91.03,119.63-1.34,4.59-2.53,9.23-3.72,13.86-1.13,4.41-2.17,8.85-3.39,13.89ZM1330.94,1153.3c1.23-10.12.77-929.56-.4-934.07-12.35-4.35-24.76-8.39-36.92-13.06-33.89-13.02-63.56-32.29-87.34-60.05-22.27-25.99-36.28-56.12-44.6-89.1-1.16-4.6-2.38-9.19-3.6-13.9-2.15-.15-3.86-.36-5.56-.38-28.95-.31-57.91-.75-86.86-.85-65.33-.21-130.65-.31-195.98-.34-91.89-.05-183.79-.06-275.68,0-95.16.06-190.32.16-285.48.34-27,.05-53.99.41-80.99.66-3.87.04-7.74.27-11.27.39-.5,1.02-.76,1.39-.87,1.8-1.72,6.52-3.31,13.07-5.14,19.56-16.54,58.84-51.33,102.98-105.87,131.14-17.27,8.91-35.51,15.41-54,21.22-2.45.77-4.9,1.53-7.45,2.32v934.52c2.58.84,4.86,1.53,7.1,2.33,12.7,4.54,25.62,8.54,38.03,13.77,45.68,19.24,81.42,49.76,104.69,94.05,9.88,18.81,16.52,38.8,21.38,59.42.53,2.26,1.3,4.46,2.06,7.01,2.64,0,4.8,0,6.95,0,67.72.31,135.43.63,203.15.92,24.82.11,49.65.2,74.47.21,91.68.03,183.35.08,275.03-.01,64.02-.06,128.03-.34,192.05-.5,32.88-.09,65.76-.11,98.64-.22,28.74-.1,57.48-.27,86.23-.44,1.68,0,3.36-.29,5.18-.45.54-1.72,1.05-3.13,1.43-4.57,1.73-6.52,3.25-13.1,5.15-19.56,12.37-42.07,34.49-77.79,69.12-105.24,19.8-15.7,41.83-27.4,65.57-35.91,10.43-3.74,20.95-7.25,31.81-11Z' fill='%23d3d3d3' stroke-width='0'/%3E%3C/svg%3E");
  --svg-stepped-border: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 999.87 998.1'%3E%3Cpath d='M0,996.88V1C.33.67.67.33,1,0,333.62,0,666.25,0,998.88,0c.33.33.67.67,1,1v994.88c-2,1.6-4.17,2.23-6.85,2.23-52.96-.07-105.92-.02-158.88-.01-148.06,0-296.13,0-444.19,0-128.08,0-256.16,0-384.23.01-2,0-4,.07-5.72-1.23ZM11.81,15.57v966.51c1.59,1.64,2.21-.75,3.26.69-.06.87-.13,1.8-.22,2.96,323.4.47,646.6.44,969.63,0,1.35-1.1-.48-2.36.58-3.35.91-.65,1.56,1.33,3-.07V14.64c-1.41.48-2.14.73-2.81.95-1.32-1.01.41-2.26-.58-3.43-323.05-.46-646.25-.46-969.28,0-1.32,1.1.48,2.36-.57,3.35-.91.64-1.56-1.35-3.01.07ZM2.91,991.62c.41.13.82.26,1.23.4,2.56-2.78,5.77-4.84,5.61-9.67-.33-10.08.05-20.18-.13-30.27-.21-11.61-.03-23.23-.25-34.84-.14-7.11-.36-14.39.2-21.61.56-7.29-.58-14.7-.59-22.06-.04-15.11.14-30.22.3-45.33.15-14.2.64-28.41.48-42.61-.12-10.28-.1-20.58-.37-30.86-.18-6.89.15-14.05.26-21.05.38-24.58.05-49.16.05-73.74,0-25.76.08-51.52.11-77.28.02-25.29.11-50.58-.04-75.86-.05-8.28-.36-16.61-.39-24.85-.02-7.12.2-14.39.29-21.56.32-24.41.03-48.83.03-73.25,0-25.93.07-51.85.09-77.78.02-24.12.14-48.24-.02-72.37-.13-19.45.43-38.89-.67-58.35-.56-9.82.62-19.7-.08-29.6-1.26-17.95,1.06-35.9.34-53.92-.27-6.88-.08-14.05.23-21.09.62-13.96.08-27.97,0-41.96-.03-4.45-.69-8.97-.08-13.32.8-5.76-.77-9.88-6.58-13.32v986.14ZM996.89,992.36V5.43c-5.87,3.76-7.98,8.06-6.14,13.96.14.46.21.99.16,1.47-1.33,11.28-.56,22.6-.62,33.9-.05,8.61.29,17.26.22,25.83-.06,7.16.38,14.4-.19,21.63-.58,7.29.58,14.7.6,22.06.03,15.27-.18,30.55-.34,45.82-.13,13.21-.58,26.41-.41,39.62.15,10.95-.06,21.9.35,32.86.26,7.05-.2,14.38-.3,21.55-.34,24.58-.03,49.16-.02,73.74,0,25.93-.06,51.85-.09,77.78-.02,24.95-.14,49.91,0,74.86.05,8.45.37,16.94.41,25.35.03,7.12-.21,14.39-.3,21.56-.31,24.41-.03,48.83-.03,73.25,0,25.93-.07,51.85-.09,77.78-.02,24.12-.13,48.24.02,72.37.13,19.45-.42,38.89.68,58.35.56,9.82-.62,19.7.07,29.6,1.26,17.95-1.06,35.9-.34,53.92.27,6.88.09,14.05-.23,21.09-.63,13.96-.09,27.97,0,41.96.03,4.45.71,8.97.09,13.32-.82,5.77.76,9.89,6.5,13.31ZM993.93,3.46H5.88c1.63,2.87,3.7,4.42,5.68,6.01,325.88-.8,651.66-.78,977.24,0,1.68-2.17,3.84-3.27,5.12-6ZM988.56,988.39c-325.93.82-651.69.79-977.28.02-1.09,1.04-2.01,1.77-2.74,2.65-.77.94-2.36,1.39-2.06,3.19h987.43c-1.46-2.6-3.42-3.9-5.36-5.87Z' fill='%23313131' stroke-width='0'/%3E%3Cpath d='M17.63,978.21c7.55-5.36,5.15-13.07,5.17-20.09.11-58.12.09-116.24.08-174.36-.02-86.24-.08-172.48-.09-258.72-.02-91.29-.01-182.58,0-273.87,0-63.74.06-127.47.08-191.21,0-7.83.02-15.65-.02-23.48-.03-6.05,1.41-12.51-5.07-16.46,1.03-1.02,1.78-1.36,2.26-.81,4.83,5.58,11.1,3.94,17.29,3.91,14.06-.07,28.11-.52,42.19.09,7.69.33,15.46-.19,23.2-.19,48.47-.04,96.94-.31,145.4-.33,66.59-.03,133.19.09,199.78.18,24.17.03,48.35.26,72.52.22,43.52-.07,87.04-.27,130.56-.43,30.11-.11,60.23-.65,90.34-.28,49.97.62,99.93.35,149.9.48,20.69.05,41.37-.02,62.06.07,6.34.03,12.69.47,19.03.56,2.01.03,3.86-.82,5.31-2.35.98-1.04,1.79-2.46,3.61-1.98.11.34.35.8.27.87-4.56,3.9-4.54,9.05-4.54,14.5.1,59.95.03,119.91.04,179.86.02,86.24.08,172.48.1,258.72.02,91.12.01,182.25,0,273.37,0,64.07-.05,128.14-.08,192.21,0,6.16-.29,12.34.08,18.47.44,7.29-2.97,15.45,4.91,20.77-1.19,1.2-1.97,1.11-2.38.63-4.69-5.45-10.83-3.87-16.82-3.79-13.91.19-27.82.05-41.73.04-7.88,0-15.77-.03-23.65,0-48.47.14-96.93.38-145.4.4-66.76.03-133.52-.09-200.28-.18-24.01-.03-48.01-.28-72.02-.26-40.03.04-80.05.21-120.08.37-33.61.13-67.22.77-100.83.39-54.46-.63-108.91-.33-163.36-.49-16.2-.05-32.39.02-48.59-.06-6.36-.03-12.71-.31-19.07-.47-2.27-.06-4.12.79-5.68,2.44-.95,1.01-1.82,2.5-4.47,1.27ZM26.09,969.95c6.08,2.45,941.19,2.54,947.69.08,1.09-313.98,1.1-628.12,0-942.11-6.07-2.46-941.19-2.55-947.69-.09-1.1,313.98-1.1,628.12,0,942.11Z' fill='%23262626' stroke-width='0'/%3E%3C/svg%3E");
  --border-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380.64 871.68'%3E%3Cpath d='M380.64,42.72v786.72c-1.6.78-3.36,1-5.05,1.43-4.9,1.24-9.62,2.9-14.02,5.43-9.77,5.61-15.95,14.02-19.34,24.65-1.12,3.51-1.69,7.14-2.39,10.74H41.28c-.04-2.82-.74-5.53-1.45-8.23-3.89-14.79-12.81-25.13-27.24-30.52-3-1.12-6.1-1.87-9.2-2.65-.9-.23-1.92-.23-2.84-1.18,0-1,0-2.19,0-3.38,0-64.35,0-128.7,0-193.05,0-.96,0-1.92-.03-2.88,0-.4-.09-.79-.51-.99v-165.6c.3-.96.3-1.92,0-2.88v-84.96c.48-.29.51-.78.52-1.26.02-.96.02-1.92.02-2.88,0-107.99,0-215.98,0-323.97,0-.96-.01-1.92.01-2.88.01-.47.1-.94.14-1.35.8-.76,1.77-.91,2.68-1.18,1.92-.55,3.87-.99,5.79-1.56,14.58-4.32,24.61-13.48,29.59-27.97,1.38-4.01,2.1-8.19,3-12.32h297.6c.74,1.7,1,3.53,1.37,5.33,1.22,5.92,3.2,11.55,6.43,16.69,5.95,9.47,14.61,15.24,25.2,18.32,2.76.8,5.58,1.39,8.28,2.39ZM377.81,827.81c.06-.95.15-1.82.16-2.69.05-4.4.11-8.8.12-13.2.04-15.44.05-30.88.08-46.32.01-8.24.03-16.48.05-24.72.08-39.11-.05-78.23.19-117.35.16-26.63,0-53.27-.09-79.91-.19-52.56-.03-105.12-.02-157.68,0-19.04-.03-38.08-.04-57.12-.02-69.52-.03-139.04-.04-208.56,0-18.56-.03-37.12-.05-55.68,0-5.12-.02-10.24-.09-15.36-.02-1.66.04-3.34-.28-4.9-.7-.53-1.43-.59-2.12-.76-3.42-.85-6.77-1.91-10-3.31-11.93-5.18-20.17-13.85-24.64-26.07-1.15-3.16-2.03-6.4-2.62-9.71-.12-.69-.15-1.43-.87-2.05-97.66,0-195.41,0-293.17,0-.3,0-.61.12-.79.15-.48.48-.44.99-.53,1.44-.53,2.59-1.1,5.16-1.89,7.68-4.28,13.64-12.94,23.32-26.17,28.84-3.1,1.3-6.31,2.3-9.58,3.08-.69.16-1.41.23-2.09.93,0,.51,0,1.14,0,1.77-.04,16.56-.09,33.12-.12,49.68-.03,19.84-.06,39.68-.08,59.52-.04,60.32-.09,120.64-.11,180.95,0,18.4.09,36.8.1,55.2.02,26.48.07,52.96-.01,79.44-.09,26.47.06,52.94-.17,79.42-.23,26.55-.36,53.1.16,79.66.25,12.63.1,25.28.11,37.92.02,25.76.03,51.52.04,77.28.01,22.24.02,44.48.04,66.72,0,4.32.01,8.64.05,12.96,0,.94-.14,1.91.29,2.81.66.4,1.37.52,2.07.69,2.64.65,5.24,1.43,7.78,2.41,10.2,3.94,18.32,10.34,23.69,20,2.31,4.15,3.92,8.57,5.03,13.18.41,1.7.77,3.42,1.15,5.07,1.08.59,2.14.37,3.16.37,26.96,0,53.92.03,80.88-.03,42.24-.09,84.48-.1,126.72.01,26.96.07,53.92.03,80.88.02.94,0,1.92.19,2.81-.25.47-.62.53-1.35.68-2.05.51-2.51,1.12-4.99,1.9-7.43,3.78-11.74,10.96-20.65,21.95-26.4,3.77-1.97,7.74-3.41,11.85-4.53,1.15-.31,2.38-.4,3.65-1.14Z' stroke-width='0'/%3E%3Cpath d='M333.11,8.82c.54.96.66,2.09.92,3.17,1.61,6.6,4.22,12.74,8.33,18.19,5.46,7.24,12.65,12.12,21,15.41,1.93.76,3.93,1.34,5.9,2,.9.3,1.81.58,2.52.8.57.66.47,1.24.48,1.79.02.88,0,1.76,0,2.64,0,102.63-.1,205.26.04,307.89.09,65.67.22,131.35.13,197.02-.12,87.67-.15,175.33-.16,263,0,.87,0,1.75,0,2.41-.53.7-1.1.78-1.62.96-2.79.98-5.62,1.85-8.36,2.95-12.43,5.01-21.35,13.56-26.06,26.23-.86,2.32-1.44,4.74-2.15,7.11-.3.99-.46,2.03-.97,2.9-.11.07-.18.11-.24.15-.07.04-.15.08-.22.09-.4.03-.8.07-1.2.07-94.07,0-188.14,0-282.21-.02-.23,0-.47-.07-.68-.11-.63-.41-.65-1.11-.83-1.69-.5-1.6-.91-3.23-1.37-4.84-4.02-14.09-12.95-23.82-26.35-29.5-3.01-1.28-6.16-2.23-9.24-3.34-.45-.16-.89-.34-1.35-.51-.4-.94-.22-1.91-.22-2.85-.01-27.28,0-54.55,0-81.83,0-36,.23-72-.08-107.99-.2-23.11-.1-46.22-.18-69.33-.09-23.12-.13-46.24.02-69.35.14-21.68-.08-43.36,0-65.03.48-125.35.12-250.69.24-376.04,0-.79,0-1.59,0-2.35.92-.8,1.99-.9,2.96-1.19,3.62-1.05,7.13-2.37,10.5-4.05,12.19-6.09,20.17-15.71,23.97-28.79.58-1.98,1.06-3.99,1.57-5.92,2.51-.44,282.43-.45,284.96-.03ZM48.96,862.57c1.06.36,2.1.2,3.13.2,22.24,0,44.48-.01,66.71-.01,69.83,0,139.67.01,209.5.02.88,0,1.76,0,2.64,0,.55,0,1.13.06,1.67-.45.33-1.29.65-2.69,1.03-4.08,3.17-11.65,9.52-21.04,19.77-27.62,4.81-3.09,10.04-5.27,15.5-6.9.82-.24,1.7-.38,2.57-.98,0-.86,0-1.73,0-2.6.1-65.03-.14-130.06.13-195.1.11-27.19-.07-54.39-.08-81.58-.09-163.35-.05-326.69-.05-490.04,0-.88,0-1.76,0-2.64,0-.55.07-1.13-.31-1.58-2.96-1.06-5.92-2.04-8.81-3.18-8.11-3.22-15.07-8.04-20.44-15.01-4.32-5.61-7.02-11.97-8.71-18.8-.21-.84-.34-1.71-.88-2.59-1.25-.03-2.52-.09-3.79-.09-14.64-.06-29.28-.11-43.91-.16-11.28-.04-22.56-.09-33.83-.1-21.44-.02-42.88-.03-64.31-.03-5.36,0-10.72.06-16.08.07-14.72.03-29.44.06-44.15.08-11.68.02-23.36.04-35.04.05-10.24.01-20.48.02-30.72.04-3.36,0-6.72.04-10.08.08-.54,0-1.13-.12-1.75.48-.38,1.44-.79,3.06-1.25,4.66-3.87,13.51-12.02,23.46-24.69,29.65-3.38,1.65-6.92,2.91-10.5,4.07-.74.24-1.57.29-2.14.87-.31.91-.18,1.79-.18,2.66,0,33.36,0,66.71,0,100.07,0,33.36,0,66.71,0,100.07v100.31c0,33.36.07,66.71-.02,100.07-.1,33.35.13,66.69-.21,100.04-.28,27.1-.45,54.22.23,81.32,0,61.91,0,123.83,0,185.74,0,1.1-.17,2.23.2,3.36,2.23.73,4.44,1.4,6.61,2.18,16.67,6.06,27.29,17.58,31.43,34.93.18.77.18,1.6.77,2.47Z' stroke-width='0'/%3E%3C/svg%3E");
  --svg-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='evenodd' clip-rule='evenodd' viewBox='0 0 512 512'%3E%3Cpath fill-rule='nonzero' d='M256 0c70.69 0 134.69 28.66 181.02 74.98C483.34 121.31 512 185.31 512 256c0 70.69-28.66 134.69-74.98 181.02C390.69 483.34 326.69 512 256 512c-70.69 0-134.69-28.66-181.02-74.98C28.66 390.69 0 326.69 0 256c0-70.69 28.66-134.69 74.98-181.02C121.31 28.66 185.31 0 256 0z'/%3E%3C/svg%3E");
  --svg-star-even: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1292.83 1292.83'%3E%3Cg id='b'%3E%3Cpath d='M0,646.42c356.93,0,646.41-289.34,646.41-646.42h0c0,356.93,289.34,646.42,646.41,646.42h0c-356.93,0-646.41,289.34-646.41,646.42h0c0-357.07-289.34-646.42-646.41-646.42' stroke-width='0'/%3E%3C/g%3E%3C/svg%3E");
}

/* ! ------------------------------- 
            General Styling
------------------------------------ ! */
body {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--body-font-size);
  color: var(--clr-font-light);
  background-color: var(--clr-dark-3);
  overflow-x: clip;
  -webkit-animation: bodyfade ease 0.7s;
          animation: bodyfade ease 0.7s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  scrollbar-gutter: stable;
}
body::before {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: var(--bg-img-primary);
  background-size: cover;
  z-index: -1;
}

@-webkit-keyframes bodyfade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bodyfade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
::-moz-selection {
  color: #1b1b1b;
  background: var(--clr-accent-1);
}
::selection, ::-moz-selection {
  color: #1b1b1b;
  background: var(--clr-accent-1);
}

::-webkit-scrollbar {
  background-color: transparent;
  width: 3px;
}

::-webkit-scrollbar-track {
  width: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--clr-accent-1);
  border-radius: 10px;
}

button {
  background: none;
  border: none;
}

/* ! ------------------------------- 
            Text Styling
------------------------------------ ! */
h1 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: clamp(2.1em, 1vw + 1.25rem, 2.83em);
}

h2 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(1.6em, 1vw + 0.75rem, 2.15em);
}

h3 {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.88em;
  letter-spacing: 1.5px;
}

h4 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(0.9em, 1vw, 1em);
}

h5 {
  font-family: var(--font-secondary);
  font-size: 1em;
  text-transform: uppercase;
  color: var(--clr-font-medium);
}

.h-secondary {
  font-family: var(--font-heading);
  text-transform: lowercase;
  font-weight: 800;
}

hgroup {
  position: relative;
  line-height: 1;
}
hgroup h2 {
  margin-bottom: 2px;
  -webkit-filter: url(#inset-shadow);
          filter: url(#inset-shadow);
}
hgroup p {
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 1.5px;
}

hgroup.svg-centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
}
hgroup.svg-centered p {
  text-align: center;
}
hgroup.svg-centered svg {
  position: absolute;
  width: 83px;
  -ms-flex-item-align: center;
      align-self: center;
  fill: var(--clr-accent-2);
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(0, 0, 0, 0)), color-stop(95%, rgb(0, 0, 0)));
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 20%, rgb(0, 0, 0) 95%);
          mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(0, 0, 0, 0)), color-stop(95%, rgb(0, 0, 0)));
          mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 20%, rgb(0, 0, 0) 95%);
  top: -2.8rem;
  z-index: -1;
  -webkit-filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.6784313725));
          filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.6784313725));
}

strong {
  color: var(--clr-strong);
  font-weight: 900;
}

strong b {
  font-size: 1.18em;
}

p {
  font-size: clamp(0.9em, 1vw, 1em);
  text-align: justify;
  line-height: 1.4;
  margin-bottom: 0.7rem;
}

p:last-of-type {
  margin-bottom: 0;
}

a {
  color: unset;
  text-decoration-color: rgba(148, 148, 148, 0.342);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
a:hover, a:focus {
  cursor: pointer;
  color: var(--clr-accent-3);
}

li::marker {
  color: var(--clr-accent-2);
}

/* ! ------------------------------- 
        Utilities/Modifiers
------------------------------------ ! */
.rotate {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.flipx {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.flipy {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}

.flipr {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.dash {
  display: inline-block;
  height: 1px;
  width: 50px;
  background-color: var(--clr-font-medium);
  margin-bottom: 3px;
}

hr {
  width: 100%;
  height: 1px;
  border: none;
  border-top: 1px solid var(--clr-dark-border-1);
  margin-block: 4px;
}
hr.unit {
  position: relative;
  display: block;
  height: 6px;
  background-color: var(--clr-dark-2);
  border: 1px solid var(--clr-dark-border-1);
  border-left: none;
  border-right: none;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  margin: 0;
  margin-block: 0;
  overflow: clip;
}
hr.unit::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-2);
  background-image: var(--pattern-noise);
  mix-blend-mode: color-dodge;
}
hr.unit::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: linear-gradient(16deg, rgba(0, 0, 0, 0) 0%, rgba(139, 139, 139, 0.479) 75%);
  opacity: 0.2;
  z-index: 2;
}
hr.light-border {
  border-top: 1px solid var(--clr-light-border);
}

.noise-grain::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: darken;
  opacity: 0.2;
  z-index: 1;
  pointer-events: none;
}
.noise-grain::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.8;
  z-index: 2;
  pointer-events: none;
}

.stepped-frame {
  position: absolute;
  border: 20px solid transparent;
  -o-border-image: var(--svg-stepped-border);
     border-image: var(--svg-stepped-border);
  border-image-slice: 6%;
  -webkit-filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8078431373)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3294117647));
          filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8078431373)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3294117647));
  pointer-events: none;
}
.stepped-frame.fr-secondary {
  border: 21px solid transparent;
  -o-border-image: var(--svg-stepped-border);
     border-image: var(--svg-stepped-border);
  border-image-slice: 5% fill;
}

.stepped-border {
  width: 100%;
  position: absolute;
  border-top: 20px solid transparent;
  -o-border-image: var(--svg-stepped-border);
     border-image: var(--svg-stepped-border);
  border-image-slice: 6%;
  -webkit-filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8078431373)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3294117647));
          filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8078431373)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3294117647));
  pointer-events: none;
}

.frame-fill {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-1);
  z-index: -1;
}

.corner-backdrop {
  position: absolute;
  width: 110px;
  height: 110px;
  background: radial-gradient(180% 180% at left -65% bottom -65%, transparent 99%, var(--clr-dark-1));
  -webkit-mask: radial-gradient(185% 185% at left -65% bottom -65%, transparent 99%, black);
          mask: radial-gradient(185% 185% at left -65% bottom -65%, transparent 99%, black);
  pointer-events: none;
  z-index: 5;
  margin: 9px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.corner-backdrop::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: darken;
  opacity: 0.3;
  z-index: 1;
}
.corner-backdrop::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.2;
  z-index: 2;
}
.corner-backdrop.align-top {
  top: 0;
}
.corner-backdrop.align-bottom {
  bottom: 0;
}
.corner-backdrop.align-right {
  right: 0;
}
.corner-backdrop.align-left {
  left: 0;
}

@media screen and (max-width: 700px) {
  .corner-backdrop {
    width: 90px;
    height: 90px;
  }
}
img.corner-element {
  position: absolute;
  -webkit-filter: url(#adjust-corners);
          filter: url(#adjust-corners);
}
img.corner-element.align-top {
  top: 0;
}
img.corner-element.align-bottom {
  bottom: 0;
}
img.corner-element.align-right {
  right: 0;
}
img.corner-element.align-left {
  left: 0;
}

.decorative-divider {
  position: relative;
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-block: 1rem;
}
.decorative-divider .divider-el {
  width: 55px;
  height: 28px;
  background-image: var(--divider-element);
  -webkit-filter: url(#adjust-dividers);
          filter: url(#adjust-dividers);
}

.inline-accent::before, .inline-accent::after {
  content: "";
  display: block;
  display: inline-block;
  width: 9px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask-image: var(--inline-accent);
          mask-image: var(--inline-accent);
  margin-inline: 6px;
  position: relative;
  top: 1px;
}
.inline-accent::after {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.inline-accent-left::before {
  content: "";
  display: block;
  display: inline-block;
  width: 9px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask-image: var(--inline-accent);
          mask-image: var(--inline-accent);
  -webkit-margin-end: 1px;
          margin-inline-end: 1px;
  position: relative;
}

/* ! ------------------------------- 
            Components
------------------------------------ ! */
.section-title-cm {
  position: relative;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.719)), color-stop(50%, var(--clr-dark-1)));
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.719) 0%, var(--clr-dark-1) 50%);
  border: 1px solid var(--clr-dark-border-1);
  border-bottom: 0;
  border-radius: var(--border-radius-primary) var(--border-radius-primary) 0 0;
  overflow: clip;
}
.section-title-cm::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.6;
  z-index: 1;
}
.section-title-cm::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: darken;
  opacity: 0.3;
  z-index: -1;
  -webkit-filter: brightness(60%);
          filter: brightness(60%);
}
.section-title-cm .section-info {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1.8rem var(--padding-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--column-gap);
  z-index: 2;
  -webkit-box-shadow: inset 0px -2px -2px -1px rgba(0, 0, 0, 0.774);
          box-shadow: inset 0px -2px -2px -1px rgba(0, 0, 0, 0.774);
}
.section-title-cm .section-info .section-icon {
  background-color: var(--clr-accent-2);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: var(--border-radius-primary);
  border: 1px solid var(--clr-dark-3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 6px;
}
.section-title-cm .section-info .section-title {
  background-color: var(--clr-dark-3);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: var(--border-radius-primary);
  border: 1px solid var(--clr-dark-border-2);
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 6px 14px;
}
.section-title-cm hr {
  position: relative;
  margin: unset;
  border: unset;
  height: 6px;
  background-color: var(--clr-dark-3);
  border-top: 1px solid var(--clr-dark-border-2);
  border-bottom: 1px solid var(--clr-dark-border-2);
  -webkit-filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.3411764706));
          filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.3411764706));
  z-index: 2;
}

.section-icon-button {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 6px;
}
.section-icon-button .section-icon-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 7px 8px;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--clr-accent-1)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, var(--clr-accent-1) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
}
.section-icon-button .section-icon-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: overlay;
  opacity: 0.2;
  pointer-events: none;
}
.section-icon-button svg {
  width: 24px;
  fill: currentColor;
}
.section-icon-button svg, .section-icon-button i {
  scale: 0.95;
  display: block;
  -webkit-filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8705882353));
          filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8705882353));
}
.section-icon-button .stepped-frame {
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.section-title-declaration {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1px 8px;
  background-color: rgba(0, 0, 0, 0.1725490196);
}
.section-title-declaration .title-text {
  position: relative;
  padding: 3px 0.9rem;
  overflow: hidden;
}
.section-title-declaration .title-text h5 {
  position: relative;
  -webkit-filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8));
          filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8));
  z-index: 5;
}
.section-title-declaration .stepped-frame {
  width: 100%;
  opacity: 0.9;
}

.information-blocks-container {
  position: relative;
  width: 100%;
}

.information-block {
  position: relative;
  width: 100%;
}
.information-block .info-top {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px;
  margin-bottom: 4px;
}
.information-block .info-top .info-top-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 2;
}
.information-block .info-top .topl {
  position: relative;
  padding: 4px;
  padding-right: 6px;
  position: relative;
  background-color: var(--clr-dark-1);
  -webkit-box-shadow: inset 0px 1px 0px 1px rgba(0, 0, 0, 0.322);
          box-shadow: inset 0px 1px 0px 1px rgba(0, 0, 0, 0.322);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.information-block .info-top .topl .stepped-frame {
  border: 26px solid transparent;
  -o-border-image: var(--svg-stepped-border);
     border-image: var(--svg-stepped-border);
  border-image-slice: 6% fill;
  opacity: 0.9;
}
.information-block .info-top .topicon {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
  z-index: 3;
}
.information-block .info-top .topicon .ti-within {
  position: relative;
  padding: 3px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(158, 158, 158)), to(var(--clr-light-1)));
  background: linear-gradient(0deg, rgb(158, 158, 158) 0%, var(--clr-light-1) 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
}
.information-block .info-top .topicon .ti-within::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
.information-block .info-top .topicon .stepped-frame {
  border: 23px solid transparent;
  -o-border-image: var(--svg-stepped-border);
     border-image: var(--svg-stepped-border);
  border-image-slice: 7% fill;
}
.information-block .info-top .topr {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: color-mix(in srgb, var(--clr-accent-2), white 35%);
  background: linear-gradient(89deg, color-mix(in srgb, var(--clr-accent-2), white 60%) 0%, color-mix(in srgb, var(--clr-accent-1), white 35%) 63%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  overflow: clip;
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.219);
          box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.219);
}
.information-block .info-top .topr::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: overlay;
  opacity: 0.5;
  z-index: 2;
  pointer-events: none;
}
.information-block .info-top .topr::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.4;
  pointer-events: none;
}
.information-block .info-top h1 {
  position: absolute;
  font-size: 6.8rem;
  top: -3rem;
  left: -2rem;
  z-index: 1;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(220deg, rgba(0, 0, 0, 0) 16%, rgb(0, 0, 0) 55%);
          mask-image: linear-gradient(220deg, rgba(0, 0, 0, 0) 16%, rgb(0, 0, 0) 55%);
  -webkit-filter: url(#inset-shadow);
          filter: url(#inset-shadow);
}
.information-block .info-top h3 {
  position: relative;
  -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5411764706));
          filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5411764706));
  z-index: 3;
}
.information-block .info-top h3::before, .information-block .info-top h3::after {
  content: "";
  display: block;
  display: inline-block;
  width: 9px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask-image: var(--inline-accent);
          mask-image: var(--inline-accent);
  margin-inline: 8px;
  position: relative;
  top: 1px;
}
.information-block .info-top h3::after {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.information-block .info-top::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-3);
  z-index: -1;
}
.information-block .info-body {
  color: var(--clr-font-dark);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.2rem;
  background-color: var(--clr-dark-3);
}
.information-block .info-body .info-body-inner {
  position: relative;
  width: 100%;
  background-color: var(--clr-dark-2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px;
  z-index: 4;
}
.information-block .info-body .info-body-inner .stepped-frame {
  border: 20px solid transparent;
  -o-border-image: var(--svg-stepped-border);
     border-image: var(--svg-stepped-border);
  border-image-slice: 4% fill;
  border: 40px solid transparent;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: url(#lighten-color);
          filter: url(#lighten-color);
}
.information-block .info-body .info-units-wrapper {
  position: relative;
  width: 100%;
  background-color: var(--clr-light-2);
  outline: 1px solid var(--clr-dark-2);
  outline-offset: 2px;
  padding: 1.7rem;
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-rule: solid 1px var(--clr-light-border);
     -moz-column-rule: solid 1px var(--clr-light-border);
          column-rule: solid 1px var(--clr-light-border);
  -webkit-column-gap: 2rem;
     -moz-column-gap: 2rem;
          column-gap: 2rem;
  -webkit-column-fill: balance;
     -moz-column-fill: balance;
          column-fill: balance;
  z-index: 4;
}
.information-block .info-body::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 1.2rem);
  height: calc(100% - 1.2rem);
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.2;
  z-index: 2;
}
.information-block .info-body::before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 1.2rem);
  height: calc(100% - 1.2rem);
  background-image: var(--pattern-noise);
  mix-blend-mode: darken;
  opacity: 0.5;
  z-index: 1;
}
.information-block svg, .information-block i {
  position: relative;
  width: 24px;
  fill: var(--clr-accent-1);
  -webkit-mask: linear-gradient(340deg, rgba(0, 0, 0, 0.377) 10%, rgb(0, 0, 0) 70%);
          mask: linear-gradient(340deg, rgba(0, 0, 0, 0.377) 10%, rgb(0, 0, 0) 70%);
  -webkit-filter: drop-shadow(0px 2px 0px rgba(238, 238, 238, 0.8078431373));
          filter: drop-shadow(0px 2px 0px rgba(238, 238, 238, 0.8078431373));
}
.information-block i {
  color: var(--clr-accent-1);
}
.information-block .stepped-frame {
  width: 100%;
  height: 100%;
}

.info-unit {
  font-size: clamp(0.9em, 1vw, 1em);
  margin-bottom: 6px;
  text-align: justify;
}
.info-unit .query {
  text-transform: uppercase;
  font-size: 0.95em;
  color: var(--clr-font-light-secondary);
  background-color: var(--clr-accent-2);
  padding: 1px 8px;
  border-radius: var(--border-radius-primary);
  margin-right: 1rem;
}
.info-unit:last-of-type {
  margin-bottom: 0;
}

.st-node {
  position: absolute;
  width: 14px;
  height: 14px;
  justify-self: center;
  -ms-flex-item-align: end;
      align-self: end;
  -webkit-filter: drop-shadow(2px -2px 1px #000000) drop-shadow(-1px -2px 2px #000000) drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.8352941176));
          filter: drop-shadow(2px -2px 1px #000000) drop-shadow(-1px -2px 2px #000000) drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.8352941176));
}
.st-node::after {
  content: "";
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  background-image: var(--pattern-silver);
  justify-self: center;
  -webkit-mask-image: var(--svg-star-even);
          mask-image: var(--svg-star-even);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  z-index: 7;
}

.dropquote {
  border-radius: var(--border-radius-primary);
  float: left;
  padding: 0;
  line-height: 0px;
  margin-top: 0px;
  margin-bottom: -1px;
  margin-right: 12px;
  width: 40px;
}
.dropquote svg {
  width: 100%;
  fill: var(--clr-accent-2);
  -webkit-mask: linear-gradient(340deg, rgba(0, 0, 0, 0.589) 10%, rgb(0, 0, 0) 70%);
          mask: linear-gradient(340deg, rgba(0, 0, 0, 0.589) 10%, rgb(0, 0, 0) 70%);
}

.icon-sm i {
  font-size: 1.23em;
}

.svg-sm {
  width: 16px;
  fill: var(--clr-font-light-secondary);
}

.svg-xsm svg {
  width: 14px;
  height: 14px;
  fill: var(--clr-font-light);
  stroke: var(--clr-accent-1);
  stroke-width: 0.3px;
}

.icon-40px {
  width: 40px;
  height: 40px;
  border: 1px solid var(--clr-light-border);
  border-radius: 3px;
  background-color: var(--clr-dark-3);
  padding: 2px;
  -webkit-filter: drop-shadow(0px 1px 0px rgba(167, 167, 167, 0.1725490196));
          filter: drop-shadow(0px 1px 0px rgba(167, 167, 167, 0.1725490196));
}
.icon-40px img {
  width: 100%;
  height: 100%;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--border-radius-primary);
}

.icon-70px {
  width: 70px;
  height: 70px;
  border-radius: var(--border-radius-primary);
  border: 1px solid silver;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
}
.icon-70px img {
  -o-object-position: center;
     object-position: center;
}

.icon-85px {
  position: relative;
  width: 65px;
  height: 65px;
  background: var(--clr-dark-3);
  padding: 4px;
  border: 1px solid var(--clr-dark-border-1);
  border-radius: var(--border-radius-primary);
}
.icon-85px .icon-within {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
  border-radius: var(--border-radius-primary);
}
.icon-85px .icon-within img {
  width: 85px;
  height: 85px;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}
.icon-85px.rotate-icon {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.icon-85px.rotate-icon .icon-within img {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.icon-85px.gradient-border {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.icon-85px.gradient-border::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-1);
  border-radius: var(--border-radius-primary);
  z-index: -1;
}
.icon-85px.gradient-border::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  background: linear-gradient(50deg, rgba(0, 0, 0, 0.862745098) 50%, var(--clr-accent-2) 95%);
  background-color: var(--clr-accent-1);
  border-radius: var(--border-radius-primary);
  z-index: -2;
}
.icon-85px.gradient-border:nth-of-type(2)::after {
  background: linear-gradient(40deg, rgba(0, 0, 0, 0.862745098) 30%, var(--clr-accent-2) 95%);
}
.icon-85px.gradient-border:nth-of-type(3)::after {
  background: linear-gradient(53deg, rgba(0, 0, 0, 0.862745098) 30%, var(--clr-accent-2) 95%);
}

.icon-100px {
  position: relative;
  width: 80px;
  height: 80px;
  background-color: var(--clr-dark-3);
  padding: 4px;
  border: 1px solid var(--clr-dark-border-1);
  border-radius: var(--border-radius-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.icon-100px .icon-within {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
  border-radius: var(--border-radius-primary);
  z-index: 3;
}
.icon-100px .icon-within img {
  width: 100px;
  height: 100px;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}
.icon-100px.rotate-icon {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.icon-100px.rotate-icon .icon-within img {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.icon-100px .icon-glow {
  position: absolute;
  width: calc(100% + 3rem);
  height: calc(100% + 3rem);
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-mask: radial-gradient(circle closest-side, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
          mask: radial-gradient(circle closest-side, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  background-color: color-mix(in srgb, var(--clr-accent-2), transparent 0%);
  z-index: -1;
  opacity: 0.9;
  mix-blend-mode: overlay;
  opacity: 0;
}
.icon-100px .icon-glow::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  background-repeat: repeat;
  mix-blend-mode: soft-light;
}
.icon-100px:has(.icon-glow)::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-1);
  border-radius: var(--border-radius-primary);
  z-index: 1;
}
.icon-100px:has(.icon-glow)::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  background-color: var(--clr-dark-3);
  border: 1px solid var(--clr-dark-border-1);
  border-radius: var(--border-radius-primary);
  z-index: 2;
}
.icon-100px.gradient-border {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.icon-100px.gradient-border::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-1);
  border-radius: var(--border-radius-primary);
  z-index: -1;
}
.icon-100px.gradient-border::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  background: linear-gradient(50deg, rgba(0, 0, 0, 0.862745098) 50%, var(--clr-accent-2) 95%);
  background-color: var(--clr-accent-1);
  border-radius: var(--border-radius-primary);
  z-index: -2;
}
.icon-100px.gradient-border:nth-of-type(2)::after {
  background: linear-gradient(40deg, rgba(0, 0, 0, 0.862745098) 30%, var(--clr-accent-2) 95%);
}
.icon-100px.gradient-border:nth-of-type(3)::after {
  background: linear-gradient(53deg, rgba(0, 0, 0, 0.862745098) 30%, var(--clr-accent-2) 95%);
}

.icon-btn-xsm {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 6px;
  background-color: var(--clr-accent-2);
  border-radius: var(--border-radius-primary);
  border: 1px solid var(--clr-dark-3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.icon-btn-xsm iconify-icon, .icon-btn-xsm i {
  font-size: 0.9em;
}

.icon-btn-md {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 12px;
  background-color: var(--clr-dark-2);
  border-radius: var(--border-radius-primary);
  border: 1px solid var(--clr-dark-3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.icon-btn-md iconify-icon, .icon-btn-md i {
  font-size: 1.5em;
}

.txt-btn {
  display: inline-block;
  background-color: var(--clr-dark-3);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: var(--border-radius-primary);
  border: 1px solid var(--clr-dark-border-2);
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 12px;
  text-decoration: none;
}

.txt-btn-sm {
  display: inline-block;
  background-color: var(--clr-dark-3);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: var(--border-radius-primary);
  border: 1px solid var(--clr-dark-border-2);
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4px 12px;
  text-decoration: none;
}

a.txt-btn, a.txt-btn-sm {
  display: inline-block;
}
a.txt-btn:hover, a.txt-btn:focus, a.txt-btn-sm:hover, a.txt-btn-sm:focus {
  cursor: pointer;
  background-color: var(--clr-dark-2);
}

/* ! ------------------------------- 
            SFX
------------------------------------ ! */
.sfx-shadow {
  position: absolute;
  height: 3px;
  width: 90%;
  background-color: #080808;
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(5%, rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(85%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(5%, rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(85%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
  -webkit-filter: blur(2px);
          filter: blur(2px);
  opacity: 0.35;
  top: 5px;
  z-index: 3;
}

.sfx-glint {
  position: absolute;
  width: 90%;
  height: 2px;
  z-index: 3;
  overflow: clip;
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(5%, rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(85%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(5%, rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(85%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
}
.sfx-glint .gradient {
  position: absolute;
  width: 70%;
  height: 100%;
  -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(45%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgb(0, 0, 0) 45%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, color-stop(45%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgb(0, 0, 0) 45%, rgba(0, 0, 0, 0) 100%);
  justify-self: center;
  -ms-flex-item-align: center;
      align-self: center;
  overflow: clip;
}
.sfx-glint .gradient .glint {
  position: absolute;
  width: 30%;
  height: 100%;
  -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(45%, #000), color-stop(74%, rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, #000 45%, rgba(0, 0, 0, 0) 74%);
          mask: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(45%, #000), color-stop(74%, rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, #000 45%, rgba(0, 0, 0, 0) 74%);
  left: -5rem;
  z-index: 2;
  background-color: var(--clr-light-2);
  background: -webkit-gradient(linear, left top, right top, color-stop(11%, rgba(0, 0, 0, 0)), color-stop(28%, color-mix(in srgb, var(--clr-accent-1), white 50%)), color-stop(50%, rgb(255, 255, 255)), color-stop(75%, color-mix(in srgb, var(--clr-accent-1), white 35%)), color-stop(90%, rgba(0, 0, 0, 0)));
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 11%, color-mix(in srgb, var(--clr-accent-1), white 50%) 28%, rgb(255, 255, 255) 50%, color-mix(in srgb, var(--clr-accent-1), white 35%) 75%, rgba(0, 0, 0, 0) 90%);
  mix-blend-mode: color-dodge;
  opacity: 0.25;
}
.sfx-glint .gradient::after {
  content: "";
  display: block;
  position: absolute;
  width: 70%;
  height: 100%;
  inset: 0;
  background-image: var(--element-glint);
  -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(60%, rgb(0, 0, 0)), color-stop(75%, rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 75%);
          mask: -webkit-gradient(linear, left top, right top, color-stop(60%, rgb(0, 0, 0)), color-stop(75%, rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 75%);
  mix-blend-mode: overlay;
  left: -5rem;
  opacity: 0.7;
  z-index: 3;
}
.sfx-glint .gradient::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--element-glint);
  -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(80%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, color-stop(80%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: multiply;
  left: -3rem;
  opacity: 0.2;
  z-index: 1;
}
.sfx-glint::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--element-glint);
  opacity: 0.2;
  z-index: 1;
  -webkit-filter: brightness(0.1) contrast(5);
          filter: brightness(0.1) contrast(5);
}

.sfx-glint.sfx-hb-a {
  height: 3px;
  margin-top: 1px;
  -webkit-filter: brightness(1.1) contrast(1.1) drop-shadow(5px 9px 10px #000000);
          filter: brightness(1.1) contrast(1.1) drop-shadow(5px 9px 10px #000000);
}
.sfx-glint.sfx-hb-a .gradient {
  width: 100%;
  height: 3px;
}
.sfx-glint.sfx-hb-a .gradient .glint {
  width: 35%;
  height: 2px;
  background: var(--element-glint);
  background-position: right -5rem top 0;
  background-attachment: fixed;
  opacity: 0.8;
  mix-blend-mode: none;
  left: -10rem;
  z-index: 4;
}
.sfx-glint.sfx-hb-a .gradient::after {
  opacity: 0.6;
}

.sfx-glint.sfx-hb-b {
  width: 50%;
  margin-top: 1px;
  -webkit-filter: brightness(1.1) contrast(1.1) drop-shadow(5px 9px 10px #000000);
          filter: brightness(1.1) contrast(1.1) drop-shadow(5px 9px 10px #000000);
  right: 3rem;
}
.sfx-glint.sfx-hb-b .gradient {
  width: 100%;
  right: -8rem;
}
.sfx-glint.sfx-hb-b .gradient .glint {
  inset: 0;
}
.sfx-glint.sfx-hb-b .gradient::after {
  width: 100%;
  left: unset;
}

.sfx-glint.sfx-n-frame-a {
  top: 0;
  opacity: 0.8;
}
.sfx-glint.sfx-n-frame-a .gradient {
  width: 100%;
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(10%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(10%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
  left: unset;
  place-self: center;
}
.sfx-glint.sfx-n-frame-a .gradient::after {
  width: 100%;
  left: 5rem;
  opacity: 0.7;
}
.sfx-glint.sfx-n-frame-a .gradient .glint {
  width: 60%;
  left: -10rem;
  opacity: 0.3;
}

.sfx-glint.sfx-n-frame-b {
  width: 45%;
  bottom: 0;
  right: 1.5rem;
  z-index: 6;
  opacity: 0.7;
}
.sfx-glint.sfx-n-frame-b .gradient {
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  inset: 0;
}
.sfx-glint.sfx-n-frame-b .gradient .glint {
  width: 70%;
  right: 1rem;
  opacity: 0.7;
}
.sfx-glint.sfx-n-frame-b .gradient::after {
  content: "";
  display: block;
  width: 1218px;
  height: 121px;
  background-image: var(--element-glint);
  z-index: 3;
  left: 1rem;
}

.sfx-glint.sfx-tab-title-a {
  width: 100%;
  -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(5%, rgba(0, 0, 0, 0)), color-stop(25%, rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(70%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, color-stop(5%, rgba(0, 0, 0, 0)), color-stop(25%, rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(70%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
  top: 1px;
  left: 0;
  z-index: 5;
}
.sfx-glint.sfx-tab-title-a .gradient {
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  width: 75%;
  inset: 0;
  place-self: center;
  margin-left: 1.8rem;
  opacity: 0.7;
  background-color: color-mix(in srgb, var(--clr-accent-1), transparent 20%);
}
.sfx-glint.sfx-tab-title-a .gradient .glint {
  width: 20%;
  left: 7rem;
}
.sfx-glint.sfx-tab-title-a .gradient::after {
  width: 100%;
  background-repeat: repeat;
  left: -5rem;
  opacity: 1;
}
.sfx-glint.sfx-tab-title-a .gradient-b {
  position: absolute;
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  width: 30%;
  height: 100%;
  left: -2rem;
  overflow: clip;
  opacity: 0.2;
}
.sfx-glint.sfx-tab-title-a .gradient-b::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--element-glint);
  mix-blend-mode: overlay;
  left: -2rem;
}

.sfx-glint.sfx-tab-title-b {
  bottom: 0;
  right: 0.5rem;
  z-index: 6;
}
.sfx-glint.sfx-tab-title-b .gradient {
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(5%, rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(85%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(5%, rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(85%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
  width: 80%;
  right: -5rem;
}
.sfx-glint.sfx-tab-title-b .gradient .glint {
  width: 80%;
  left: unset;
  right: -10rem;
}

.sfx-glint.f-sfx-a {
  width: 80%;
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(29%, rgb(0, 0, 0)), color-stop(94%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 29%, rgb(0, 0, 0) 94%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(29%, rgb(0, 0, 0)), color-stop(94%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 29%, rgb(0, 0, 0) 94%, rgba(0, 0, 0, 0) 100%);
  bottom: 2rem;
  left: 3rem;
  z-index: 6;
}
.sfx-glint.f-sfx-a .gradient {
  width: 85%;
  left: 1rem;
  opacity: 0.4;
}
.sfx-glint.f-sfx-a .gradient .glint {
  width: 50%;
  left: unset;
  left: -40rem;
  opacity: 0.2;
}
.sfx-glint.f-sfx-a .gradient::after {
  width: 100%;
}
.sfx-glint.f-sfx-a .gradient::before, .sfx-glint.f-sfx-a .gradient::after {
  left: -20rem;
  opacity: 0.5;
}

.sfx-glint.f-sfx-b {
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(29%, rgb(0, 0, 0)), color-stop(94%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 29%, rgb(0, 0, 0) 94%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(29%, rgb(0, 0, 0)), color-stop(94%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 29%, rgb(0, 0, 0) 94%, rgba(0, 0, 0, 0) 100%);
  bottom: 0;
  right: 1rem;
  z-index: 6;
}
.sfx-glint.f-sfx-b .gradient {
  width: 90%;
  -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(27%, rgba(0, 0, 0, 0)), color-stop(10%, rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(85%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 27%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, color-stop(27%, rgba(0, 0, 0, 0)), color-stop(10%, rgb(0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), color-stop(85%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 27%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
  width: 80%;
  right: 1rem;
  opacity: 0.3;
}
.sfx-glint.f-sfx-b .gradient .glint {
  width: 50%;
  left: unset;
  right: -39rem;
  opacity: 0.5;
}
.sfx-glint.f-sfx-b .gradient::before, .sfx-glint.f-sfx-b .gradient::after {
  left: unset;
  right: -10rem;
  opacity: 0.6;
}

/* ! ------------------------------- 
           Hero Section
------------------------------------ ! */
header {
  position: relative;
  width: 100dvw;
  height: 100dvh;
}

section.hero {
  position: relative;
  width: 100dvw;
  height: 100dvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  gap: 2.5rem;
  gap: 3rem;
}
section.hero .information-sidebar {
  position: relative;
  max-width: 380px;
  width: 100%;
  height: 100dvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
section.hero .information-sidebar .bg-bar {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 176px;
  width: 100%;
  height: 100%;
  border-left: 1px solid var(--clr-dark-border-1);
  overflow: clip;
  z-index: 1;
  -webkit-backdrop-filter: brightness(55%) blur(3px);
          backdrop-filter: brightness(55%) blur(3px);
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), color-stop(30%, rgb(0, 0, 0)));
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 30%);
          mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), color-stop(30%, rgb(0, 0, 0)));
          mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 30%);
}
section.hero .information-sidebar .bg-bar::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, #0d0d0d), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, #0d0d0d 30%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: multiply;
  opacity: 0.7;
  z-index: 2;
}
section.hero .information-sidebar .bg-bar .elem {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(https://i.imgur.com/zSrhnG9.png);
  mix-blend-mode: overlay;
  z-index: 3;
  opacity: 0.1;
}
section.hero .information-sidebar .bg-bar .trees {
  position: absolute;
  width: 800px;
  height: 348px;
  background-image: var(--element-trees);
  bottom: 0;
  left: -14rem;
  z-index: 4;
}
section.hero .information-sidebar .description-container {
  position: relative;
  max-width: 300px;
  width: 100%;
  height: 670px;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  right: -1rem;
  margin-left: clamp(0.063rem, -5vw + 6rem, 3rem);
  z-index: 2;
  --scale: 0.95 1.1;
  --inline: 3.3rem;
}
section.hero .information-sidebar .description-container .emblem, section.hero .information-sidebar .description-container .blog-description, section.hero .information-sidebar .description-container .star-divider {
  z-index: 5;
}
section.hero .information-sidebar .description-container .emblem {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(100% - 33px);
  height: 490px;
  background-image: url(https://i.imgur.com/eM5NkIn.png);
  background-position: center left -5.5rem;
  -webkit-mask: radial-gradient(circle, rgb(0, 0, 0) 63%, rgba(0, 0, 0, 0) 96%);
          mask: radial-gradient(circle, rgb(0, 0, 0) 63%, rgba(0, 0, 0, 0) 96%);
  margin-top: -3.7rem;
  margin-bottom: -2.3rem;
}
section.hero .information-sidebar .description-container .title {
  font-family: "Inter", sans-serif;
  position: relative;
  font-weight: 900;
  font-size: 0.74em;
  width: 100%;
  -moz-text-align-last: justify;
       text-align-last: justify;
  padding-inline: var(--inline);
  letter-spacing: 1px;
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.99), 1px 0px 2px rgba(0, 0, 0, 0.99), -1px -1px 2px rgba(0, 0, 0, 0.99);
  z-index: 6;
  -webkit-filter: url(#inset-shadow);
          filter: url(#inset-shadow);
}
section.hero .information-sidebar .description-container .blog-description {
  position: relative;
  font-size: 0.77em;
  -moz-text-align-last: justify;
       text-align-last: justify;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-inline: var(--inline);
  text-shadow: -2px -3px 9px rgba(0, 0, 0, 0.9);
}
section.hero .information-sidebar .description-container .blog-description .runic {
  font-family: "Noto Sans Runic", sans-serif;
  font-size: 0.88rem;
  margin-bottom: 1px;
  font-weight: 500;
  color: var(--clr-accent-2);
  text-shadow: -2px -3px 9px rgba(0, 0, 0, 0.9);
  -webkit-filter: url(#inset-shadow);
          filter: url(#inset-shadow);
}
section.hero .information-sidebar .description-container .blog-description .etymology {
  margin-bottom: 0.7rem;
  padding-inline: 2.5em;
}
section.hero .information-sidebar .description-container .star-divider {
  --height: 19px;
  position: relative;
  width: 100%;
  height: var(--height);
  margin-block: 0.1rem;
  -webkit-mask-image: var(--svg-star-center), radial-gradient(circle farthest-side at center, hsl(0, 0%, 0%) 20%, hsla(0, 0%, 0%, 0) 30%);
          mask-image: var(--svg-star-center), radial-gradient(circle farthest-side at center, hsl(0, 0%, 0%) 20%, hsla(0, 0%, 0%, 0) 30%);
  -webkit-mask-size: auto var(--height);
          mask-size: auto var(--height);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
  z-index: 3;
}
section.hero .information-sidebar .description-container .star-divider::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--pattern-silver);
}
section.hero .information-sidebar .description-container .star-node {
  position: absolute;
  --height: 19px;
  width: 95px;
  height: var(--height);
  -webkit-mask-image: var(--svg-star-right);
          mask-image: var(--svg-star-right);
  -webkit-mask-size: auto var(--height);
          mask-size: auto var(--height);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-image: var(--pattern-silver);
  z-index: 6;
  --align: -4rem;
}
section.hero .information-sidebar .description-container .star-node::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: -webkit-gradient(linear, left top, right top, color-stop(18%, rgba(17, 17, 17, 0.61)), color-stop(70%, rgba(0, 0, 0, 0)));
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.61) 18%, rgba(0, 0, 0, 0) 70%);
}
section.hero .information-sidebar .description-container .star-node.top {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  top: var(--align);
}
section.hero .information-sidebar .description-container .star-node.bottom {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  bottom: var(--align);
}
section.hero .information-sidebar .description-container .node-mask {
  --align: -2.07rem;
  position: absolute;
  width: 43px;
  height: 20px;
  top: var(--align);
  border-radius: 0 0 50rem 50rem;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 5;
  -webkit-mask: var(--svg-circle) top -1.64rem right 50%/39px 53px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: var(--svg-circle) top -1.64rem right 50%/39px 53px no-repeat, linear-gradient(#000 0 0);
          mask: var(--svg-circle) top -1.64rem right 50%/39px 53px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: var(--svg-circle) top -1.64rem right 50%/39px 53px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
section.hero .information-sidebar .description-container .node-mask::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border-radius: inherit;
  background-image: var(--pattern-silver);
  mix-blend-mode: color-dodge;
  opacity: 0.5;
}
section.hero .information-sidebar .description-container .node-mask.bottom {
  top: unset;
  bottom: -2.07rem;
  border-radius: 21rem 21rem 0 0;
  background: rgba(108, 110, 112, 0.0666666667);
  -webkit-mask: var(--svg-circle) bottom -1.67rem right 50%/39px 53px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: var(--svg-circle) bottom -1.67rem right 50%/39px 53px no-repeat, linear-gradient(#000 0 0);
          mask: var(--svg-circle) bottom -1.67rem right 50%/39px 53px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: var(--svg-circle) bottom -1.67rem right 50%/39px 53px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.8;
}
section.hero .information-sidebar .description-container .node-mask.bottom::before {
  opacity: 0.3;
}
section.hero .information-sidebar .description-container .outer-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 3;
  opacity: 0.35;
  scale: var(--scale);
  background-color: #6c6e70;
  -webkit-mask: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.438)), color-stop(27%, rgb(0, 0, 0))), var(--border-mask) no-repeat, var(--svg-circle) bottom -2rem right 50%/48px 50px no-repeat, var(--svg-circle) top -2rem right 50%/48px 50px no-repeat;
  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.438) 0%, rgb(0, 0, 0) 27%), var(--border-mask) no-repeat, var(--svg-circle) bottom -2rem right 50%/48px 50px no-repeat, var(--svg-circle) top -2rem right 50%/48px 50px no-repeat;
  -webkit-mask-composite: source-in, source-out, xor;
          mask: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.438)), color-stop(27%, rgb(0, 0, 0))) intersect, var(--border-mask) no-repeat subtract, var(--svg-circle) bottom -2rem right 50%/48px 50px no-repeat, var(--svg-circle) top -2rem right 50%/48px 50px no-repeat;
          mask: linear-gradient(0deg, rgba(0, 0, 0, 0.438) 0%, rgb(0, 0, 0) 27%) intersect, var(--border-mask) no-repeat subtract, var(--svg-circle) bottom -2rem right 50%/48px 50px no-repeat, var(--svg-circle) top -2rem right 50%/48px 50px no-repeat;
}
section.hero .information-sidebar .description-container .outer-frame::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: url(https://i.imgur.com/RGFeZ5L.png);
  mix-blend-mode: color-dodge;
  opacity: 0.8;
}
section.hero .information-sidebar .description-container .inner-fill {
  position: absolute;
  width: calc(100% - 34px);
  height: calc(100% + 50px);
  inset: 1;
  top: -1.5rem;
  margin-right: 6px;
  z-index: 2;
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 34px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/35px 34px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 33px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 34px no-repeat, var(--svg-circle) top -2.8rem right 50%/55px 57px no-repeat, var(--svg-circle) bottom -2.8rem right 50%/55px 58px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 34px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/35px 34px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 33px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 34px no-repeat, var(--svg-circle) top -2.8rem right 50%/55px 57px no-repeat, var(--svg-circle) bottom -2.8rem right 50%/55px 58px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 34px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/35px 34px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 33px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 34px no-repeat, var(--svg-circle) top -2.8rem right 50%/55px 57px no-repeat, var(--svg-circle) bottom -2.8rem right 50%/55px 58px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 34px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/35px 34px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 33px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 34px no-repeat, var(--svg-circle) top -2.8rem right 50%/55px 57px no-repeat, var(--svg-circle) bottom -2.8rem right 50%/55px 58px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  overflow: clip;
  -webkit-backdrop-filter: brightness(70%);
          backdrop-filter: brightness(70%);
}
section.hero .information-sidebar .description-container .inner-fill::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(https://i.imgur.com/cjFjqCE.png);
  top: -2.8rem;
  z-index: 2;
  opacity: 0.63;
  -webkit-filter: brightness(60%);
          filter: brightness(60%);
}
section.hero .information-sidebar .description-container::after {
  content: "";
  display: block;
  position: absolute;
  top: -1.98rem;
  width: calc(100% - 26px);
  height: calc(100% + 65px);
  background-image: var(--bg-img-primary);
  background-attachment: fixed;
  -webkit-filter: brightness(80%);
          filter: brightness(80%);
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 35px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/32px 37px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 34px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/32px 36px no-repeat, var(--svg-circle) top -2rem right 50%/48px 50px no-repeat, var(--svg-circle) bottom -2rem right 50%/41px 59px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 35px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/32px 37px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 34px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/32px 36px no-repeat, var(--svg-circle) top -2rem right 50%/48px 50px no-repeat, var(--svg-circle) bottom -2rem right 50%/41px 59px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 35px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/32px 37px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 34px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/32px 36px no-repeat, var(--svg-circle) top -2rem right 50%/48px 50px no-repeat, var(--svg-circle) bottom -2rem right 50%/41px 59px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 35px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/32px 37px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 34px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/32px 36px no-repeat, var(--svg-circle) top -2rem right 50%/48px 50px no-repeat, var(--svg-circle) bottom -2rem right 50%/41px 59px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 1;
}
section.hero .hero-banner {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3rem;
  container-type: inline-size;
}
section.hero .hero-banner .banner-container {
  position: relative;
  max-width: 1424px;
  width: 100%;
  height: 902px;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
section.hero .hero-banner .banner-container .banner-base {
  position: absolute;
  max-width: 1346px;
  width: 100%;
  height: 820px;
  z-index: 3;
  container-type: inline-size;
}
section.hero .hero-banner .banner-container .banner-base .background {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: var(--hero-banner-image);
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  overflow: clip;
  -webkit-mask: url(https://i.imgur.com/XhdUkNL.png) no-repeat top left, url(https://i.imgur.com/mqGVJgq.png) no-repeat bottom left, url(https://i.imgur.com/w1VI9cA.png) no-repeat top right, url(https://i.imgur.com/qXYCLpR.png) no-repeat bottom right, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/XhdUkNL.png) no-repeat top left, url(https://i.imgur.com/mqGVJgq.png) no-repeat bottom left, url(https://i.imgur.com/w1VI9cA.png) no-repeat top right, url(https://i.imgur.com/qXYCLpR.png) no-repeat bottom right, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/XhdUkNL.png) no-repeat top left, url(https://i.imgur.com/mqGVJgq.png) no-repeat bottom left, url(https://i.imgur.com/w1VI9cA.png) no-repeat top right, url(https://i.imgur.com/qXYCLpR.png) no-repeat bottom right, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/XhdUkNL.png) no-repeat top left, url(https://i.imgur.com/mqGVJgq.png) no-repeat bottom left, url(https://i.imgur.com/w1VI9cA.png) no-repeat top right, url(https://i.imgur.com/qXYCLpR.png) no-repeat bottom right, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
section.hero .hero-banner .banner-container .banner-base .background img {
  position: absolute;
}
section.hero .hero-banner .banner-container .banner-base .background img.star1 {
  width: clamp(200px, 9vw + 6rem, 246px);
  left: -0.5rem;
  top: 17rem;
  z-index: 8;
}
section.hero .hero-banner .banner-container .banner-base .background img.star2 {
  right: 3.5rem;
  bottom: 9rem;
  z-index: 7;
}
section.hero .hero-banner .banner-container .banner-base .background img.star3 {
  right: 1.6rem;
  bottom: 22rem;
  z-index: 7;
}
section.hero .hero-banner .banner-container .banner-base .background img.hud {
  bottom: 1.2rem;
  z-index: 10;
}
section.hero .hero-banner .banner-container .banner-base .background img.blog-url {
  width: clamp(31rem, 70vw - 16rem, 64.063rem);
  top: 6.6rem;
  margin-left: -2px;
  z-index: 6;
}
section.hero .hero-banner .banner-container .banner-base .background img.muse-img {
  bottom: 11.1rem;
  margin-left: -2.3rem;
  z-index: 9;
}
@container (max-width: 800px) {
  section.hero .hero-banner .banner-container .banner-base .background img.star1, section.hero .hero-banner .banner-container .banner-base .background img.hud {
    display: none;
  }
}
section.hero .hero-banner .banner-container .banner-base .background .banner-gradient {
  position: absolute;
  width: 100%;
  height: 60%;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(16, 16, 16)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(16, 16, 16) 0%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  z-index: 9;
  bottom: -12rem;
}
@container (max-width: 1300px) {
  section.hero .hero-banner .banner-container .banner-base .background {
    background-position: top center;
  }
}
section.hero .hero-banner .banner-container .frame-primary {
  position: absolute;
  max-width: 1378px;
  width: calc(100% + 35px);
  height: 846px;
  z-index: 4;
}
section.hero .hero-banner .banner-container .frame-primary .fr-center {
  position: absolute;
  width: calc(100% - 80px);
  height: 100%;
  background-image: url(https://i.imgur.com/Ns00CH4.png);
  background-repeat: no-repeat;
  background-position: auto center;
}
section.hero .hero-banner .banner-container .frame-primary img {
  position: absolute;
  z-index: 2;
}
section.hero .hero-banner .banner-container .frame-primary img.fr-left {
  left: 0;
}
section.hero .hero-banner .banner-container .frame-primary img.fr-right {
  right: 0;
}
section.hero .hero-banner .banner-container .frame-primary img.el-left {
  width: clamp(330px, 50vw + 17rem, 442px);
  left: 0.2rem;
  bottom: -1.4rem;
}
section.hero .hero-banner .banner-container .frame-primary img.el-right {
  width: clamp(90px, 8vw + 1rem, 147px);
  right: -2.9rem;
  top: 3.48rem;
}
section.hero .hero-banner .banner-container .frame-secondary {
  position: absolute;
  max-width: 1426px;
  width: calc(100% + 2.5rem);
  height: 904px;
  z-index: 2;
  opacity: 0.7;
}
section.hero .hero-banner .banner-container .frame-secondary .fr-s-center {
  position: absolute;
  width: calc(100% - 80px);
  height: 100%;
  background-image: url(https://i.imgur.com/HlY5XDP.png);
  background-repeat: no-repeat;
  background-position: auto center;
}
section.hero .hero-banner .banner-container .frame-secondary img {
  position: absolute;
  z-index: 2;
}
section.hero .hero-banner .banner-container .frame-secondary img.fr-s-left {
  left: 0;
}
section.hero .hero-banner .banner-container .frame-secondary img.fr-s-right {
  right: 0;
}
@container (max-width: 950px) {
  section.hero .hero-banner .banner-container .frame-secondary {
    display: none;
  }
}

@media screen and (max-width: 1000px) {
  section.hero .information-sidebar {
    position: absolute;
    max-width: unset;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  section.hero .information-sidebar .bg-bar {
    display: none;
  }
  section.hero .information-sidebar .description-container {
    inset: 0;
    margin: unset;
    height: unset;
    min-height: 600px;
    padding: 1rem 0;
    --scale: 1 1.05;
  }
  section.hero .information-sidebar .description-container p {
    font-size: 1.02em;
  }
  section.hero .information-sidebar .description-container .emblem {
    width: calc(100% - 9px);
    background-position: center left -4.6rem;
    margin-top: -3.2rem;
    margin-bottom: -1.5rem;
    margin-left: -3px;
    -webkit-mask: radial-gradient(circle, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 90%);
            mask: radial-gradient(circle, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 90%);
  }
  section.hero .information-sidebar .description-container .blog-description {
    padding-inline: 1.7rem;
  }
  section.hero .information-sidebar .description-container .blog-description .etymology {
    margin-bottom: 0.7rem;
    padding-inline: 2.5em;
  }
  section.hero .information-sidebar .description-container .star-divider {
    margin-block: 12px;
  }
  section.hero .information-sidebar .description-container .outer-frame {
    -webkit-mask: var(--border-mask) no-repeat subtract;
            mask: var(--border-mask) no-repeat subtract;
    -webkit-filter: drop-shadow(5px 5px 10px #000000);
            filter: drop-shadow(5px 5px 10px #000000);
    overflow: clip;
  }
  section.hero .information-sidebar .description-container .inner-fill {
    width: calc(100% - 9px);
    height: calc(100% + 30px);
    -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/32px 34px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/33px 34px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/32px 33px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 34px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
    -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/32px 34px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/33px 34px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/32px 33px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 34px no-repeat, linear-gradient(#000 0 0);
            mask: url(https://i.imgur.com/LMxH72D.png) top left/32px 34px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/33px 34px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/32px 33px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 34px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
            mask: url(https://i.imgur.com/LMxH72D.png) top left/32px 34px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/33px 34px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/32px 33px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 34px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    margin: 0 auto;
    margin-left: -5px;
    top: -1rem;
    overflow: clip;
  }
  section.hero .information-sidebar .description-container .inner-fill::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: unset;
    background-color: var(--clr-dark-1);
    opacity: 0.9;
  }
  section.hero .information-sidebar .description-container .inner-fill::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background-image: var(--pattern-noise);
    opacity: 0.4;
    z-index: 2;
  }
  section.hero .information-sidebar .description-container .node-mask, section.hero .information-sidebar .description-container .star-node, section.hero .information-sidebar .description-container::after {
    display: none;
  }
  section.hero .hero-banner .banner-container .banner-base .background {
    -webkit-filter: brightness(90%);
            filter: brightness(90%);
  }
  section.hero .hero-banner .banner-container .banner-base .background img {
    display: none;
  }
  section.hero .hero-banner .banner-container .banner-base .background .banner-gradient {
    opacity: 0.9;
    z-index: 9;
    bottom: 0;
  }
  section.hero .hero-banner .banner-container .frame-primary img.el-right {
    width: 110px;
    right: -2rem;
  }
}
@media screen and (max-width: 800px) {
  section.hero .hero-banner {
    padding: 2rem;
  }
  section.hero .hero-banner .banner-container .frame-primary img.el-left, section.hero .hero-banner .banner-container .frame-primary img.el-right {
    display: none;
  }
}
/* ! ------------------------------- 
           Main Content
------------------------------------ ! */
main {
  color: var(--clr-font-light-secondary);
  position: relative;
  width: 100dvw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 12.5rem;
  padding-inline: 10px;
  padding-bottom: 2rem;
}
main::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 10%;
  bottom: 0;
  -webkit-backdrop-filter: brightness(20%);
          backdrop-filter: brightness(20%);
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask-image: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
          mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask-image: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.3;
  z-index: -1;
}

.main-content-wrapper {
  position: relative;
  max-width: 1068px;
  width: 100%;
  margin: 0 auto;
  margin-top: 5rem;
  padding-block: 5rem;
}

.main-content-header {
  position: relative;
  width: 100%;
  container-type: inline-size;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.main-content-banner {
  position: relative;
  width: calc(100% - 20px);
  height: 300px;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.main-content-banner .header-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: 0;
  z-index: 3;
}
.main-content-banner .header-backdrop img.back-motif {
  position: absolute;
  top: -12.8rem;
}
.main-content-banner .header-backdrop .main-img-wrapper {
  position: absolute;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: -8rem;
  margin-left: -7rem;
  z-index: 3;
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask {
  position: absolute;
  width: 680px;
  height: 388px;
  -webkit-mask: url(https://i.imgur.com/opRt4Za.png);
          mask: url(https://i.imgur.com/opRt4Za.png);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 3;
  overflow: clip;
  -webkit-filter: drop-shadow(0px 2px 0px rgba(14, 14, 14, 0.9725490196));
          filter: drop-shadow(0px 2px 0px rgba(14, 14, 14, 0.9725490196));
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask .top-glow {
  position: absolute;
  inset: 0;
  width: 140%;
  height: 190%;
  -webkit-mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 50%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 50%, hsla(0, 0%, 0%, 0) 100%);
  background-color: var(--clr-accent-3);
  top: -42rem;
  left: -3rem;
  opacity: 0.25;
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask:has(.sh) {
  mix-blend-mode: soft-light;
  z-index: 6;
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask:has(.top-glow) {
  mix-blend-mode: screen;
  -webkit-backdrop-filter: brightness(1.1) contrast(1.2);
          backdrop-filter: brightness(1.1) contrast(1.2);
  z-index: 5;
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask.m-d {
  z-index: 6;
  -webkit-mask: url(https://i.imgur.com/xJDSfIb.png);
          mask: url(https://i.imgur.com/xJDSfIb.png);
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask:has(.m-c) {
  z-index: 7;
  mix-blend-mode: darken;
  opacity: 0.5;
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask:has(.m-b) {
  z-index: 8;
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask:has(.m-a) {
  z-index: 9;
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask:has(.m-a) .sh-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  -webkit-mask: url(https://i.imgur.com/xJDSfIb.png), -webkit-gradient(linear, left top, left bottom, color-stop(80%, rgb(0, 0, 0)), color-stop(90%, rgba(0, 0, 0, 0)));
  -webkit-mask: url(https://i.imgur.com/xJDSfIb.png), linear-gradient(180deg, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 90%);
  -webkit-mask-composite: source-in, xor;
          mask: url(https://i.imgur.com/xJDSfIb.png) intersect, -webkit-gradient(linear, left top, left bottom, color-stop(80%, rgb(0, 0, 0)), color-stop(90%, rgba(0, 0, 0, 0)));
          mask: url(https://i.imgur.com/xJDSfIb.png) intersect, linear-gradient(180deg, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 90%);
  mix-blend-mode: soft-light;
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask:has(.m-a) .sh-mask .sh-within-1 {
  position: absolute;
  width: 50%;
  height: 70%;
  -webkit-mask: radial-gradient(ellipse closest-side at center, #000000 0%, rgba(0, 0, 0, 0) 80%);
          mask: radial-gradient(ellipse closest-side at center, #000000 0%, rgba(0, 0, 0, 0) 80%);
  background-color: rgb(209, 209, 209);
  top: -30rem;
  right: -15rem;
  opacity: 0.5;
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask:has(.m-a) .sh-mask .sh-within-2 {
  position: absolute;
  width: 20%;
  height: 70%;
  -webkit-mask: radial-gradient(ellipse closest-side at center, #000000 0%, rgba(0, 0, 0, 0) 80%);
          mask: radial-gradient(ellipse closest-side at center, #000000 0%, rgba(0, 0, 0, 0) 80%);
  background-color: rgb(209, 209, 209);
  top: -15rem;
  right: -9rem;
  rotate: 40deg;
  opacity: 0.7;
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask:has(.m-a) .sh-mask .sh-within-3 {
  position: absolute;
  width: 40%;
  height: 20%;
  -webkit-mask: radial-gradient(ellipse closest-side at center, #000000 0%, rgba(0, 0, 0, 0) 100%);
          mask: radial-gradient(ellipse closest-side at center, #000000 0%, rgba(0, 0, 0, 0) 100%);
  background-color: rgb(233, 233, 233);
  top: -20rem;
  rotate: -10deg;
  left: 3rem;
  opacity: 1;
}
.main-content-banner .header-backdrop .main-img-wrapper .m-img-mask:has(.m-a) img {
  -webkit-filter: brightness(0.9) drop-shadow(0px 1px 0px rgba(14, 14, 14, 0.9607843137));
          filter: brightness(0.9) drop-shadow(0px 1px 0px rgba(14, 14, 14, 0.9607843137));
}
.main-content-banner .header-backdrop .main-img-wrapper img.base {
  position: absolute;
  z-index: 1;
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.main-content-banner .header-backdrop .dragons-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  --align-inline: -5.8rem;
  z-index: 2;
  -webkit-filter: drop-shadow(0px 2px 0px rgba(20, 20, 20, 0.6039215686)) brightness(1.02) contrast(1);
          filter: drop-shadow(0px 2px 0px rgba(20, 20, 20, 0.6039215686)) brightness(1.02) contrast(1);
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-l, .main-content-banner .header-backdrop .dragons-wrapper .dragon-r {
  position: absolute;
  top: -3.27rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-filter: drop-shadow(0px 1px 0px rgba(20, 20, 20, 0.6588235294)) contrast(1.03);
          filter: drop-shadow(0px 1px 0px rgba(20, 20, 20, 0.6588235294)) contrast(1.03);
  -webkit-filter: none;
          filter: none;
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-l {
  left: var(--align-inline);
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-l .tail {
  left: calc(var(--align-inline) + 7.9rem);
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-r {
  right: var(--align-inline);
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-r .tail {
  right: calc(var(--align-inline) + 7.9rem);
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-outline {
  position: absolute;
  width: 525px;
  height: 347px;
  -webkit-mask: url(https://i.imgur.com/GAVaBUN.png);
          mask: url(https://i.imgur.com/GAVaBUN.png);
  left: 1px;
  z-index: -1;
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-outline .s1 {
  position: absolute;
  width: 90px;
  height: 90px;
  background-color: rgb(230, 230, 230);
  -webkit-mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
  scale: 1.5 0.7;
  rotate: 20deg;
  top: 2rem;
  left: 8rem;
  opacity: 0.5;
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-outline .s2 {
  position: absolute;
  width: 130px;
  height: 60px;
  -webkit-mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 30%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 30%, hsla(0, 0%, 0%, 0) 100%);
  top: 12rem;
  left: 11.6rem;
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-outline .s2 .s2-inner {
  position: absolute;
  width: 90px;
  height: 90px;
  background-color: rgb(240, 240, 240);
  -webkit-mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
  left: 2px;
  bottom: 8rem;
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-outline .s3 {
  position: absolute;
  width: 130px;
  height: 190px;
  -webkit-mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
  top: 6rem;
  right: 7rem;
  opacity: 0.6;
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-outline .s3 .s3-inner {
  position: absolute;
  width: 150px;
  height: 100px;
  background-color: rgb(230, 230, 230);
  -webkit-mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
  scale: 1.2 1;
  top: -12rem;
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-outline .s4 {
  position: absolute;
  width: 90px;
  height: 90px;
  background-color: rgb(212, 212, 212);
  -webkit-mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(circle closest-side at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
  scale: 1.5 0.9;
  rotate: -30deg;
  top: -7rem;
  right: 9rem;
  opacity: 0.8;
  margin-left: 2rem;
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-r .dragon-outline .s1 {
  width: 200px;
  left: 2rem;
  opacity: 0.9;
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-r .dragon-outline .s2 {
  left: 12rem;
  width: 150px;
}
.main-content-banner .header-backdrop .dragons-wrapper .dragon-r .dragon-outline .s3 {
  right: 8rem;
}
.main-content-banner .header-backdrop .tail {
  position: absolute;
  bottom: -2rem;
}
.main-content-banner .header-backdrop .star {
  position: absolute;
  z-index: 1;
  top: 3px;
}
.main-content-banner .header-backdrop .star.left {
  left: 3px;
}
.main-content-banner .header-backdrop .star.right {
  right: 3px;
}
.main-content-banner .sh {
  position: absolute;
  inset: 0;
  width: 190%;
  height: 170%;
  background-color: rgb(8, 8, 8);
  -webkit-mask: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgb(0, 0, 0)), to(rgba(255, 255, 255, 0)));
  -webkit-mask: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(255, 255, 255, 0) 100%);
          mask: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgb(0, 0, 0)), to(rgba(255, 255, 255, 0)));
          mask: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.7;
  left: -6rem;
  top: -8rem;
}
.main-content-banner .header-bg {
  position: absolute;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/30px 30px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/30px 30px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/30px 30px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 30px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/30px 30px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/30px 30px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/30px 30px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 30px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/30px 30px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/30px 30px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/30px 30px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 30px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/30px 30px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/30px 30px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/30px 30px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 30px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  overflow: clip;
  z-index: 1;
  background-color: var(--clr-dark-1);
}
.main-content-banner .header-bg img {
  position: absolute;
  top: -5px;
  -o-object-position: center;
     object-position: center;
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
.main-content-banner .header-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  -webkit-mask: radial-gradient(circle, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%);
          mask: radial-gradient(circle, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%);
  -webkit-backdrop-filter: brightness(1.2) contrast(0.99);
          backdrop-filter: brightness(1.2) contrast(0.99);
}
.main-content-banner .header-bg::before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 2px);
  height: calc(100% - 2rem);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(5%, rgb(0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0) 5%, rgba(0, 0, 0, 0) 50%);
  opacity: 0.5;
  z-index: 3;
  overflow: clip;
}
.main-content-banner .header-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 45px solid transparent;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
  z-index: 2;
}
@container (max-width: 920px) {
  .main-content-banner {
    height: 327px;
    width: 100%;
  }
  .main-content-banner .header-backdrop .main-img-wrapper {
    top: -8.9rem;
    margin-left: -10rem;
  }
  .main-content-banner .header-backdrop .dragons-wrapper {
    -webkit-mask: -webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0))), -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(15%, rgb(0, 0, 0))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(20%, rgb(0, 0, 0))), -webkit-gradient(linear, left top, right top, color-stop(80%, rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
    -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 20%, rgb(0, 0, 0) 50%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%), linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 20%), linear-gradient(90deg, rgba(0, 0, 0, 0) 80%, rgb(0, 0, 0) 100%);
    -webkit-mask-composite: source-in, source-in, xor, xor;
            mask: -webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0))) intersect, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(15%, rgb(0, 0, 0))) intersect, -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(20%, rgb(0, 0, 0))) exclude, -webkit-gradient(linear, left top, right top, color-stop(80%, rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
            mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 20%, rgb(0, 0, 0) 50%) intersect, linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%) intersect, linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 20%) exclude, linear-gradient(90deg, rgba(0, 0, 0, 0) 80%, rgb(0, 0, 0) 100%);
  }
  .main-content-banner .header-backdrop .tail, .main-content-banner .header-backdrop .star {
    display: none;
  }
  .main-content-banner .header-bg {
    -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/19px 18px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/20px 20px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/20px 20px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
    -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/19px 18px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/20px 20px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/20px 20px no-repeat, linear-gradient(#000 0 0);
            mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/19px 18px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/20px 20px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/20px 20px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
            mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/19px 18px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/20px 20px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/20px 20px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
  .main-content-banner .header-bg::before {
    display: none;
  }
  .main-content-banner .header-frame {
    border: 35px solid transparent;
    -o-border-image: var(--svg-inverted-border);
       border-image: var(--svg-inverted-border);
    border-image-slice: 25%;
  }
}
@container (max-width: 700px) {
  .main-content-banner .header-backdrop {
    overflow-x: clip;
  }
  .main-content-banner .header-backdrop img.back-motif {
    display: none;
  }
}

.header-glow {
  position: relative;
  width: calc(100% - 20px);
  height: 140px;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -2.8rem;
  margin-bottom: -1.3rem;
}
.header-glow .radial-glow {
  position: relative;
  width: 100%;
  height: calc(100% + 90px);
  -webkit-mask: radial-gradient(ellipse farthest-corner at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 70%);
          mask: radial-gradient(ellipse farthest-corner at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 70%);
  -webkit-mask-position: 50% -7rem;
          mask-position: 50% -7rem;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: black;
  z-index: 2;
}
.header-glow .radial-glow::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--element-glint);
  background-position: left 9rem top 0;
  -webkit-filter: brightness(0.8) contrast(1.2);
          filter: brightness(0.8) contrast(1.2);
  mix-blend-mode: hard-light;
  z-index: 2;
}
.header-glow .radial-glow::before {
  content: "";
  display: block;
  position: absolute;
  width: 80%;
  height: 50%;
  inset: 0;
  background-color: var(--clr-accent-1);
  z-index: 1;
  -webkit-mask: radial-gradient(ellipse farthest-corner at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 90%);
          mask: radial-gradient(ellipse farthest-corner at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 90%);
  -webkit-mask-position: 50% 0;
          mask-position: 50% 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.header-glow .glow-img {
  position: absolute;
  width: 100%;
  height: calc(100% + 100px);
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(0, 0, 0)), color-stop(80%, rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(180deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%);
          mask: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(0, 0, 0)), color-stop(80%, rgba(0, 0, 0, 0)));
          mask: linear-gradient(180deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%);
  top: -2rem;
  z-index: 1;
  opacity: 0.9;
  container-type: inline-size;
}
.header-glow .glow-img img {
  position: absolute;
  width: 1069px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  -webkit-mask: radial-gradient(ellipse farthest-corner at center top, hsl(0, 0%, 0%) 20%, hsla(0, 0%, 0%, 0) 70%);
          mask: radial-gradient(ellipse farthest-corner at center top, hsl(0, 0%, 0%) 20%, hsla(0, 0%, 0%, 0) 70%);
  -webkit-mask-position: 50% 0rem;
          mask-position: 50% 0rem;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  z-index: 1;
  -webkit-filter: brightness(1.1) contrast(1.02);
          filter: brightness(1.1) contrast(1.02);
}
@container (max-width: 1030px ) {
  .header-glow .glow-img img {
    width: 100%;
    height: 100%;
    top: 0;
  }
}
.header-glow .glow-img::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  -webkit-mask: radial-gradient(ellipse farthest-corner at center top, hsl(0, 0%, 0%) 33%, hsla(0, 0%, 0%, 0) 70%);
          mask: radial-gradient(ellipse farthest-corner at center top, hsl(0, 0%, 0%) 33%, hsla(0, 0%, 0%, 0) 70%);
  -webkit-mask-position: 50% 0rem;
          mask-position: 50% 0rem;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.2;
  z-index: 3;
}
.header-glow .glow-img::after {
  content: "";
  display: block;
  position: absolute;
  width: 90%;
  height: 200%;
  inset: 0;
  -webkit-mask: radial-gradient(circle farthest-corner at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 30%);
          mask: radial-gradient(circle farthest-corner at center, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 30%);
  -webkit-mask-position: 50% 0rem;
          mask-position: 50% 0rem;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  top: -12rem;
  place-self: center;
  background-color: var(--clr-accent-2);
  mix-blend-mode: multiply;
  z-index: 2;
  opacity: 0.8;
}
.header-glow::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  place-self: center;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(0, 0, 0)), color-stop(63%, rgba(0, 0, 0, 0)));
  background: linear-gradient(180deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 63%);
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  top: -2rem;
  opacity: 0.2;
  z-index: 3;
}
@container (max-width: 900px) {
  .header-glow {
    display: none;
  }
}

@media screen and (max-width: 1500px) {
  .main-content-banner .sh {
    display: none;
  }
}
/* ! ------------------------------- 
           Navigation
------------------------------------ ! */
.navigation {
  position: relative;
  width: 97%;
  padding: 2.4rem 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3.3rem;
  margin-top: -5rem;
  z-index: 3;
}
.navigation .nav-title {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  line-height: 1;
  text-align: right;
  z-index: 3;
  -webkit-filter: brightness(1.15);
          filter: brightness(1.15);
}
.navigation .nav-title h2 {
  position: relative;
  font-size: clamp(1.8em, 1.5vw + 0.5rem, 2.1em);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(25%, var(--clr-accent-1)), to(var(--clr-accent-3)));
  background: linear-gradient(to bottom, var(--clr-accent-1) 25%, var(--clr-accent-3) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-mask-image: linear-gradient(160deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.911) 90%);
          mask-image: linear-gradient(160deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.911) 90%);
}
.navigation nav {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  position: relative;
  z-index: 5;
}
.navigation nav .nav-within {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.625rem, 12vw - 5rem, 3.3rem);
  top: 6px;
  -webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.8980392157));
          filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.8980392157));
}
.navigation nav .nav-within a.tab-btn {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
  line-height: 0.87;
  -webkit-filter: drop-shadow(0px -1px 10px rgba(0, 0, 0, 0.3411764706));
          filter: drop-shadow(0px -1px 10px rgba(0, 0, 0, 0.3411764706));
  text-decoration: none;
}
.navigation nav .nav-within a.tab-btn h2, .navigation nav .nav-within a.tab-btn h5 {
  position: relative;
  z-index: 2;
  top: -3px;
}
.navigation nav .nav-within a.tab-btn h2 {
  position: relative;
  font-size: 1.65em;
  font-weight: 500;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(59%, var(--clr-font-light-secondary)), to(#c9c9c9));
  background: linear-gradient(to bottom, var(--clr-font-light-secondary) 59%, #c9c9c9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.navigation nav .nav-within a.tab-btn h2::after {
  content: "";
  display: block;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: var(--clr-accent-2);
  left: 1px;
  bottom: -10px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.navigation nav .nav-within a.tab-btn h5 {
  letter-spacing: 1px;
  -webkit-filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.937254902)) drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.937254902));
          filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.937254902)) drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.937254902));
}
.navigation nav .nav-within a.tab-btn svg {
  position: absolute;
  width: 58px;
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(0, 0, 0, 0)), color-stop(85%, rgb(0, 0, 0)));
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 85%);
          mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(0, 0, 0, 0)), color-stop(85%, rgb(0, 0, 0)));
          mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 85%);
  z-index: 1;
  left: -0.3rem;
  bottom: 1.1rem;
  opacity: 0.8;
  fill: var(--clr-dark-2);
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.navigation nav .nav-within a.tab-btn::after {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 50px;
  background-color: var(--clr-dark-border-1);
  right: -1rem;
  -webkit-filter: drop-shadow(0px 0px 1px rgba(14, 14, 14, 0.5490196078));
          filter: drop-shadow(0px 0px 1px rgba(14, 14, 14, 0.5490196078));
}
.navigation nav .nav-within a.tab-btn:hover svg, .navigation nav .nav-within a.tab-btn:focus svg {
  fill: var(--clr-accent-1);
}
.navigation nav .nav-within a.tab-btn.active h2::after {
  width: 35%;
}
.navigation nav .nav-within a.tab-btn.active svg {
  left: -0.8rem;
  fill: var(--clr-accent-1);
}
.navigation nav .nav-within a.tab-btn:last-of-type::after {
  display: none;
}
.navigation .nav-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-1);
  z-index: 1;
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/30px 30px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/30px 30px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/30px 30px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 30px no-repeat, var(--svg-circle) bottom -3.3rem right 50%/70px 70px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/30px 30px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/30px 30px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/30px 30px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 30px no-repeat, var(--svg-circle) bottom -3.3rem right 50%/70px 70px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/30px 30px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/30px 30px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/30px 30px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 30px no-repeat, var(--svg-circle) bottom -3.3rem right 50%/70px 70px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/30px 30px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/30px 30px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/30px 30px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/30px 30px no-repeat, var(--svg-circle) bottom -3.3rem right 50%/70px 70px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  overflow: clip;
}
.navigation .nav-bg .bg-el {
  position: absolute;
  width: 800px;
  height: 348px;
  bottom: -6rem;
  left: -5rem;
  background-image: var(--element-trees);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  -webkit-filter: brightness(0.9) contrast(1.1);
          filter: brightness(0.9) contrast(1.1);
  -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(45%, rgb(0, 0, 0)), color-stop(85%, rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgb(0, 0, 0) 45%, rgba(0, 0, 0, 0) 85%);
          mask: -webkit-gradient(linear, left top, right top, color-stop(45%, rgb(0, 0, 0)), color-stop(85%, rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgb(0, 0, 0) 45%, rgba(0, 0, 0, 0) 85%);
  z-index: 2;
  opacity: 0.5;
}
.navigation .nav-bg .el-star {
  position: absolute;
  z-index: 3;
  --node-align-inline: 2.3rem;
  --node-align-block: 0.8rem;
}
.navigation .nav-bg .el-star .node {
  width: 14px;
  height: 14px;
  -webkit-mask-image: var(--svg-star-even);
          mask-image: var(--svg-star-even);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.navigation .nav-bg .el-star .node::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-silver);
  opacity: 0.7;
  z-index: 1;
}
.navigation .nav-bg .el-star .node::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 2;
}
.navigation .nav-bg .el-star:first-of-type {
  left: var(--node-align-inline);
  top: var(--node-align-block);
  -webkit-filter: drop-shadow(-1px 1px 0px rgba(97, 97, 97, 0.4039215686)) drop-shadow(2px -2px 0px rgba(0, 0, 0, 0.8078431373)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.7176470588));
          filter: drop-shadow(-1px 1px 0px rgba(97, 97, 97, 0.4039215686)) drop-shadow(2px -2px 0px rgba(0, 0, 0, 0.8078431373)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.7176470588));
}
.navigation .nav-bg .el-star:first-of-type .node::after {
  opacity: 0.8;
}
.navigation .nav-bg .el-star:first-of-type .node::before {
  background: linear-gradient(70deg, rgba(0, 0, 0, 0.705) 60%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.8;
  mix-blend-mode: darken;
}
.navigation .nav-bg .el-star:nth-of-type(2) {
  right: var(--node-align-inline);
  top: var(--node-align-block);
  -webkit-filter: drop-shadow(1px -1px 0px #181818) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.7176470588)) drop-shadow(0px -1px 0px #0a0a0a) drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.5764705882));
          filter: drop-shadow(1px -1px 0px #181818) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.7176470588)) drop-shadow(0px -1px 0px #0a0a0a) drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.5764705882));
}
.navigation .nav-bg .el-star:nth-of-type(2) .node::after {
  opacity: 0.4;
}
.navigation .nav-bg .el-star:nth-of-type(2) .node::before {
  background: linear-gradient(333deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%);
  opacity: 1;
}
.navigation .nav-bg .el-star:nth-of-type(3) {
  left: var(--node-align-inline);
  bottom: var(--node-align-block);
  -webkit-filter: drop-shadow(1px -1px 1px #000000);
          filter: drop-shadow(1px -1px 1px #000000);
}
.navigation .nav-bg .el-star:nth-of-type(3) .node::after {
  opacity: 0.7;
}
.navigation .nav-bg .el-star:nth-of-type(3) .node::before {
  background: linear-gradient(126deg, rgba(0, 0, 0, 0.705) 60%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.6;
  mix-blend-mode: darken;
}
.navigation .nav-bg .el-star:nth-of-type(4) {
  right: var(--node-align-inline);
  bottom: var(--node-align-block);
  -webkit-filter: drop-shadow(1px -1px 1px #111111) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.7176470588)) drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.5764705882));
          filter: drop-shadow(1px -1px 1px #111111) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.7176470588)) drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.5764705882));
}
.navigation .nav-bg .el-star:nth-of-type(4) .node::after {
  opacity: 0.38;
}
.navigation .nav-bg .el-star:nth-of-type(4) .node::before {
  background: linear-gradient(140deg, rgb(0, 0, 0) 42%, rgba(0, 0, 0, 0) 20%);
  opacity: 0.9;
  mix-blend-mode: darken;
}
.navigation .nav-bg::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  -webkit-mask: linear-gradient(20deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 80%);
          mask: linear-gradient(20deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 80%);
  background-color: #050505;
  opacity: 0.4;
}
.navigation .nav-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  -webkit-mask: linear-gradient(10deg, rgba(0, 0, 0, 0.897) 0%, rgba(0, 0, 0, 0.103) 90%);
          mask: linear-gradient(10deg, rgba(0, 0, 0, 0.897) 0%, rgba(0, 0, 0, 0.103) 90%);
  background-image: var(--pattern-noise);
  mix-blend-mode: darken;
  opacity: 0.6;
}
.navigation .nav-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border: 45px solid transparent;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-filter: drop-shadow(-1px 2px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(-1px -2px 2px rgba(0, 0, 0, 0.8274509804)) drop-shadow(1px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
          filter: drop-shadow(-1px 2px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(-1px -2px 2px rgba(0, 0, 0, 0.8274509804)) drop-shadow(1px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
  -webkit-mask: var(--svg-circle) bottom -3.3rem right 50%/70px 70px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: var(--svg-circle) bottom -3.3rem right 50%/70px 70px no-repeat, linear-gradient(#000 0 0);
          mask: var(--svg-circle) bottom -3.3rem right 50%/70px 70px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: var(--svg-circle) bottom -3.3rem right 50%/70px 70px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 2;
}
.navigation .nav-frame::after {
  content: "";
  display: block;
  position: absolute;
  width: 70px;
  height: 70px;
  border: 1px solid var(--clr-dark-border-2);
  border-radius: 10rem;
  margin-left: 1px;
  bottom: -6.12rem;
}
.navigation .st-node {
  width: 23px;
  height: 18px;
  bottom: -16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-filter: drop-shadow(0px -1px 0px #0e0e0e) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.6862745098)) contrast(1.01);
          filter: drop-shadow(0px -1px 0px #0e0e0e) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.6862745098)) contrast(1.01);
}
.navigation .st-node .st-node-within {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: #0e0e0e;
  -webkit-mask-image: var(--svg-star-even);
          mask-image: var(--svg-star-even);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  opacity: 0.9;
}
.navigation .st-node .st-node-within::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  top: 2px;
  background-image: var(--pattern-silver);
  -webkit-mask-image: var(--svg-star-even);
          mask-image: var(--svg-star-even);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  opacity: 0.9;
  z-index: 1;
}
.navigation .st-node::after {
  display: none;
}
@container (max-width: 920px) {
  .navigation {
    width: 90%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 1.5rem 1rem;
    margin-top: -6rem;
  }
  .navigation .nav-title {
    display: none;
  }
  .navigation nav {
    -webkit-box-flex: unset;
        -ms-flex: unset;
            flex: unset;
    width: 100%;
  }
  .navigation nav .nav-within {
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
    row-gap: 1.5rem;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    inset: 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .navigation nav .nav-within a.tab-btn {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 20%;
            flex: 1 0 20%;
    min-width: 180px;
    text-align: center;
  }
  .navigation nav .nav-within a.tab-btn h2 {
    font-size: 1.5em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navigation nav .nav-within a.tab-btn h2::after {
    left: unset;
  }
  .navigation nav .nav-within a.tab-btn svg {
    width: 50px;
    inset: 0;
    justify-self: center;
    display: none;
  }
  .navigation nav .nav-within a.tab-btn::after {
    display: none;
  }
  .navigation nav .nav-within a.tab-btn.active h2::after {
    width: 20%;
  }
  .navigation .nav-bg {
    -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/20px 20px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 20px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/20px 20px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/20px 20px no-repeat, var(--svg-circle) top -3.3rem right 50%/70px 70px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
    -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/20px 20px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 20px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/20px 20px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/20px 20px no-repeat, var(--svg-circle) top -3.3rem right 50%/70px 70px no-repeat, linear-gradient(#000 0 0);
            mask: url(https://i.imgur.com/LMxH72D.png) top left/20px 20px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 20px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/20px 20px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/20px 20px no-repeat, var(--svg-circle) top -3.3rem right 50%/70px 70px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
            mask: url(https://i.imgur.com/LMxH72D.png) top left/20px 20px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 20px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/20px 20px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/20px 20px no-repeat, var(--svg-circle) top -3.3rem right 50%/70px 70px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    overflow: clip;
  }
  .navigation .nav-bg .el-star {
    --node-align-inline: 1.1rem;
    --node-align-block: 1.5rem;
  }
  .navigation .nav-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    border: 35px solid transparent;
    -o-border-image: var(--svg-inverted-border);
       border-image: var(--svg-inverted-border);
    border-image-slice: 25%;
    -webkit-filter: drop-shadow(-1px 2px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(-1px -2px 2px rgba(0, 0, 0, 0.8274509804)) drop-shadow(1px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
            filter: drop-shadow(-1px 2px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(-1px -2px 2px rgba(0, 0, 0, 0.8274509804)) drop-shadow(1px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
    -webkit-mask: var(--svg-circle) top -3.3rem right 50%/70px 70px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
    -webkit-mask: var(--svg-circle) top -3.3rem right 50%/70px 70px no-repeat, linear-gradient(#000 0 0);
            mask: var(--svg-circle) top -3.3rem right 50%/70px 70px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
            mask: var(--svg-circle) top -3.3rem right 50%/70px 70px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 2;
  }
  .navigation .nav-frame::after {
    width: 69px;
    bottom: unset;
    top: -5.7rem;
  }
  .navigation .st-node {
    width: 25px;
    height: 25px;
    bottom: unset;
    top: -1.5rem;
    -webkit-filter: drop-shadow(0px -1px 0px #0e0e0e) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.6862745098)) drop-shadow(0px 2px 0px rgba(70, 70, 70, 0.8823529412)) contrast(1.01);
            filter: drop-shadow(0px -1px 0px #0e0e0e) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.6862745098)) drop-shadow(0px 2px 0px rgba(70, 70, 70, 0.8823529412)) contrast(1.01);
  }
  .navigation .st-node .st-node-within::after {
    top: 4px;
  }
  .navigation .sfx-glint {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  main {
    padding: 10rem 1px 0 1px;
  }
}
/* ! ------------------------------- 
            Tabs
------------------------------------ ! */
.tab-content-container {
  position: relative;
  width: 100%;
  margin-top: 2.5rem;
  z-index: 3;
}

#tab1, #tab2, #tab3, #tab4 {
  position: relative;
  display: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

#tab1.active, #tab2.active, #tab3.active, #tab4.active {
  display: block;
}

.tab-title {
  position: relative;
  width: 100%;
  min-height: 150px;
  display: grid;
  background-color: var(--clr-dark-1);
  border-bottom: 2px solid var(--clr-accent-2);
  padding: 36px var(--padding-primary);
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/27px 29px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/27px 29px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/27px 29px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/27px 29px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/27px 29px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/27px 29px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/27px 29px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/27px 29px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  overflow: clip;
}
.tab-title .backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: clip;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.tab-title .backdrop::before {
  content: "";
  display: block;
  position: absolute;
  width: 200%;
  height: 200%;
  background: var(--element-trees) no-repeat;
  left: -6.5rem;
  background-position: left -0.1rem;
  -webkit-transform: rotate(8deg);
          transform: rotate(8deg);
  -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(25%, rgb(0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 35%);
          mask: -webkit-gradient(linear, left top, right top, color-stop(25%, rgb(0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 35%);
}
.tab-title .title-border {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 45px solid transparent;
  border-bottom: none;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
  z-index: 7;
  pointer-events: none;
}
.tab-title .tab-title-within {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.25rem 2.2rem;
  gap: 3rem;
  z-index: 6;
}
.tab-title .tab-icon {
  position: relative;
  width: clamp(37px, 4vw + 1rem, 48px);
  height: clamp(37px, 4vw + 1rem, 48px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.856));
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.856));
  top: 4px;
}
.tab-title .tab-icon svg, .tab-title .tab-icon svg.svg-sm {
  position: absolute;
  z-index: 3;
  width: 23px;
  fill: var(--clr-accent-3);
  stroke: var(--clr-dark-2);
  stroke-width: 0.6px;
  margin-top: -2px;
  margin-left: 1px;
  -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6352941176));
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6352941176));
}
.tab-title .tab-icon svg, .tab-title .tab-icon i {
  position: absolute;
  font-size: 1.7em;
  color: var(--clr-light-1);
  fill: var(--clr-accent-3);
  text-shadow: var(--text-stroke-primary);
  z-index: 3;
  -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6352941176));
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6352941176));
}
.tab-title .tab-icon .icon-inner {
  width: 100%;
  height: 100%;
  background-color: var(--clr-dark-3);
  border-radius: var(--border-radius-primary);
  padding: 3px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.tab-title .tab-icon .icon-inner .color-within {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--clr-accent-1);
  background-image: linear-gradient(135deg, var(--clr-dark-2) 20%, rgba(105, 105, 105, 0.678) 100%);
  border-radius: inherit;
  border: 1px solid var(--clr-dark-1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
  z-index: 3;
}
.tab-title .tab-icon .icon-inner .color-within::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  width: 300%;
  height: 300%;
  top: -3rem;
  left: -1rem;
  background: var(--pattern-noise) repeat;
  mix-blend-mode: difference;
  opacity: 0.3;
}
.tab-title .tab-icon .icon-inner .color-within::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--pattern-grain) repeat;
  mix-blend-mode: soft-light;
  opacity: 0.6;
  z-index: 2;
}
.tab-title .tab-icon .icon-inner::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-3);
  border-radius: var(--border-radius-primary);
  z-index: 2;
}
.tab-title .tab-icon .icon-inner::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: linear-gradient(340deg, rgba(0, 0, 0, 0.7333333333) 20%, var(--clr-accent-2) 95%);
  background-color: var(--clr-accent-2);
  border-radius: var(--border-radius-primary);
  z-index: 1;
}
.tab-title h1 {
  font-size: clamp(2.5em, 0.9vw + 1.25rem, 3em);
  font-weight: 900;
  color: var(--clr-accent-3);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--clr-accent-2)), to(color-mix(in srgb, var(--clr-accent-1), white 60%)));
  background: linear-gradient(to bottom, var(--clr-accent-2) 20%, color-mix(in srgb, var(--clr-accent-1), white 60%) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: url(#inset-shadow);
          filter: url(#inset-shadow);
}
.tab-title h5 {
  -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3647058824));
          filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3647058824));
}
.tab-title::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  opacity: 0.28;
  -webkit-filter: brightness(90%);
          filter: brightness(90%);
  z-index: 2;
}
.tab-title::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: linear-gradient(243deg, rgba(0, 0, 0, 0) 60%, var(--clr-dark-1) 90%);
  -webkit-filter: brightness(50%);
          filter: brightness(50%);
}
.tab-title .tab-deco {
  position: absolute;
  right: 0;
  top: 2px;
  -webkit-mask: url(https://i.imgur.com/8pZPRJ9.png) top right/32px 32px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/8pZPRJ9.png) top right/32px 32px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/8pZPRJ9.png) top right/32px 32px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/8pZPRJ9.png) top right/32px 32px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 6;
}

.el-tex {
  position: absolute;
  width: 1218px;
  height: 121px;
  background-image: url(https://i.imgur.com/fYsmuoQ.png);
  mix-blend-mode: darken;
  -webkit-filter: brightness(0.9) contrast(1.01);
          filter: brightness(0.9) contrast(1.01);
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(180deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(180deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.4;
  z-index: 5;
}

.footer {
  position: relative;
  width: 100%;
  min-height: 225px;
  display: grid;
  background-color: var(--clr-dark-1);
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/28px 29px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/28px 29px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/28px 29px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/28px 29px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/28px 29px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/28px 29px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/28px 29px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/28px 29px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  overflow: clip;
}
.footer .container-border.glint-center {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--clr-dark-3);
  border: 1px solid var(--clr-dark-border-2);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.6);
          box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.6);
  -webkit-mask: radial-gradient(circle, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
          mask: radial-gradient(circle, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  margin: -1px;
  top: 0px;
  z-index: 10;
  overflow: clip;
  opacity: 1;
}
.footer .container-border.glint-center .shine {
  position: absolute;
  width: 300px;
  height: 100px;
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  background-color: var(--clr-light-1);
  opacity: 0.5;
  z-index: 1;
}
.footer .container-border.glint-center::after {
  content: "";
  display: block;
  max-width: 1218px;
  width: 100%;
  height: 121px;
  background-image: var(--element-glint);
  background-position: left 7rem top 0;
  -webkit-mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
          mask: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.footer .f-inner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.footer .f-inner .icons-set {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(var(--row-gap) + 1.7rem);
  -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.247));
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.247));
  top: -0.9rem;
}
.footer h5.subtitle {
  font-size: 1em;
  color: var(--clr-font-light);
  background: var(--clr-font-light);
  background: -webkit-gradient(linear, left top, right top, from(#818181), color-stop(25%, var(--clr-font-light)), color-stop(50%, var(--clr-font-light)), color-stop(75%, var(--clr-font-light)), to(#8d8d8d));
  background: linear-gradient(to right, #818181 0%, var(--clr-font-light) 25%, var(--clr-font-light) 50%, var(--clr-font-light) 75%, #8d8d8d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(1px 2px 1px #000000);
          filter: drop-shadow(1px 2px 1px #000000);
  position: absolute;
  place-self: center;
  bottom: 12px;
  opacity: 0.83;
  z-index: 9;
}
.footer img.f-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-position: center;
     object-position: center;
  -webkit-filter: brightness(1.35);
          filter: brightness(1.35);
}
.footer .f-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 45px solid transparent;
  border-top: none;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
  z-index: 5;
}
.footer .f-frame.secondary {
  width: 95%;
  height: 70%;
  place-self: center;
  border: 38px solid transparent;
  border-top: none;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.6901960784)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.8784313725)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.3294117647)) drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.4666666667));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.6901960784)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.8784313725)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.3294117647)) drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.4666666667));
  -webkit-mask: -webkit-gradient(linear, left bottom, left top, color-stop(15%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0.397)));
  -webkit-mask: linear-gradient(0deg, rgb(0, 0, 0) 15%, rgba(0, 0, 0, 0.397) 100%);
          mask: -webkit-gradient(linear, left bottom, left top, color-stop(15%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0.397)));
          mask: linear-gradient(0deg, rgb(0, 0, 0) 15%, rgba(0, 0, 0, 0.397) 100%);
  opacity: 0.6;
}
.footer::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  opacity: 0.2;
  -webkit-filter: brightness(90%);
          filter: brightness(90%);
  z-index: 2;
}
.footer::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: linear-gradient(243deg, rgba(0, 0, 0, 0) 60%, var(--clr-dark-1) 90%);
  -webkit-filter: brightness(50%);
          filter: brightness(50%);
}
.footer .f-backing {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: clip;
  z-index: 3;
}
.footer .f-backing .radial-grade {
  position: absolute;
  max-width: 700px;
  width: 100%;
  height: 320px;
  -webkit-mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
  -webkit-mask-size: 100% auto;
          mask-size: 100% auto;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), color-stop(90%, color-mix(in srgb, var(--clr-accent-1), white 10%)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, color-mix(in srgb, var(--clr-accent-1), white 10%) 90%);
  place-self: center;
  bottom: 73rem;
  inset: 0;
  top: -3rem;
  z-index: 1;
  opacity: 0.9;
}
.footer .f-backing.glint-top {
  z-index: 7;
  mix-blend-mode: hard-light;
  opacity: 0.6;
}
.footer .f-backing.glint-top::before {
  content: "";
  display: block;
  position: absolute;
  width: 700px;
  height: 121px;
  background-image: var(--element-glint);
  -webkit-mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
  top: -1rem;
  -webkit-filter: contrast(1.1);
          filter: contrast(1.1);
  opacity: 0.2;
  margin-left: 3rem;
  z-index: 2;
}
.footer .f-backing.glint-top::after {
  content: "";
  display: block;
  position: absolute;
  width: 500px;
  height: 121px;
  background-image: var(--element-glint);
  background-position: left -3rem top 0;
  -webkit-mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 90%);
          mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 90%);
  opacity: 0.26;
}
.footer .f-backing.gradient-bg-img {
  z-index: 5;
}
.footer .f-backing.gradient-bg-img img {
  position: absolute;
  max-width: 816px;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: contrast(1.03);
          filter: contrast(1.03);
}
.footer .el-tex {
  z-index: 7;
  mix-blend-mode: hard-light;
  -webkit-mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 20%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 20%, hsla(0, 0%, 0%, 0) 100%);
  left: 10rem;
  top: -2rem;
  opacity: 0.3;
}

@media screen and (max-width: 1500px) {
  .footer .f-backing .radial-grade {
    inset: unset;
    top: -7rem;
  }
}
.tab-primary-content-container {
  position: relative;
  border: 1px solid rgba(66, 66, 66, 0.301);
  padding: 2.2rem clamp(0.938rem, 1vw + 1rem, var(--padding-primary));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: clip;
  background-color: rgba(0, 0, 0, 0.3294117647);
}
.tab-primary-content-container .tab-primary-content {
  width: 100%;
}
.tab-primary-content-container .tab-bg-glow {
  top: -29rem;
}
.tab-primary-content-container .tab-bg-glow::before {
  top: 29rem;
}

.tab-bg-glow {
  position: absolute;
  width: 100%;
  height: 650px;
  background-color: color-mix(in srgb, var(--clr-accent-3), transparent 70%);
  -webkit-mask: radial-gradient(circle closest-side, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
          mask: radial-gradient(circle closest-side, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  top: 0;
  z-index: -1;
}
.tab-bg-glow::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 120px;
  top: 0rem;
  -webkit-mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
  background-image: var(--element-glint);
  mix-blend-mode: hard-light;
  opacity: 0.2;
}

.dragon-top {
  position: absolute;
  top: 0;
  right: -4.38rem;
  pointer-events: none;
}

.dragon-bottom {
  position: absolute;
  bottom: -2.6rem;
  left: -4.7rem;
  z-index: 4;
  pointer-events: none;
  -webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5568627451));
          filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5568627451));
}

.side-foliage {
  position: absolute;
  top: 3.5rem;
  left: -3.2rem;
  pointer-events: none;
}

:where(#tab1.active, #tab2.active, #tab3.active, #tab4.active) .tab-primary-content-container {
  -webkit-animation: blur-effect 3.5s forwards 1s;
          animation: blur-effect 3.5s forwards 1s;
}

@media screen and (max-width: 800px) {
  .tab-primary-content-container {
    padding: 12px 4px;
  }
  .tab-title {
    -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/17px 18px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
    -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/17px 18px no-repeat, linear-gradient(#000 0 0);
            mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/17px 18px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
            mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/17px 18px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
  .tab-title .title-border {
    border: 35px solid transparent;
    -o-border-image: var(--svg-inverted-border);
       border-image: var(--svg-inverted-border);
    border-image-slice: 25%;
    border-bottom: none;
  }
  .footer {
    -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/17px 18px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
    -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/17px 18px no-repeat, linear-gradient(#000 0 0);
            mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/17px 18px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
            mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/17px 18px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
  .footer .f-frame, .footer .f-frame.secondary {
    border: 35px solid transparent;
    -o-border-image: var(--svg-inverted-border);
       border-image: var(--svg-inverted-border);
    border-image-slice: 25%;
    border-top: none;
  }
  .dragon-top, .dragon-bottom, .side-foliage {
    display: none;
  }
  .tab-title .tab-deco {
    display: none;
  }
  :where(#tab1.active, #tab2.active, #tab3.active, #tab4.active) .tab-primary-content-container {
    -webkit-animation: none;
            animation: none;
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }
}
@-webkit-keyframes blur-effect {
  from {
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
  }
  to {
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }
}
@keyframes blur-effect {
  from {
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
  }
  to {
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }
}
/* ! ------------------------------- 
            Tab 1
------------------------------------ ! */
.mun-section {
  position: relative;
  width: 100%;
  min-height: 200px;
  place-items: center;
  margin-bottom: var(--section-margin);
  overflow: clip;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-inline: 5px;
  padding-bottom: 12px;
}
.mun-section .mun-section-inner {
  position: relative;
  width: calc(100% - 8px);
  height: 100%;
  padding: 2rem calc(var(--padding-primary) + 2rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 3.6rem;
     -moz-column-gap: 3.6rem;
          column-gap: 3.6rem;
  row-gap: 2.5rem;
  overflow: clip;
  z-index: 5;
}
.mun-section .mun-section-inner .mun-stats-column {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 30%;
          flex: 1 1 30%;
  min-width: 250px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 2.3rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6352941176)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.6156862745));
          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6352941176)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.6156862745));
  padding-inline: 2rem;
}
.mun-section .mun-section-inner .mun-stats-container {
  width: 100%;
  text-transform: uppercase;
}
.mun-section .mun-section-inner .mun-stats-container .mun-stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 8px;
  font-weight: 500;
}
.mun-section .mun-section-inner .mun-stats-container .mun-stat:last-of-type {
  margin-bottom: 0;
}
.mun-section .mun-section-inner .mun-stats-container b {
  color: var(--clr-strong);
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.mun-section .mun-section-inner .mun-description-container {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  position: relative;
  padding: 4rem 2.5rem 2.75rem 2.5rem;
}
.mun-section .mun-section-inner .mun-description-container p {
  position: relative;
}
.mun-section .mun-section-inner .mun-description-container hr {
  margin-block: 8px;
}
.mun-section .mun-section-inner .mun-description-inner {
  position: relative;
  z-index: 3;
}
.mun-section .mun-section-inner .mun-description-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(50%, var(--clr-dark-3)), to(rgba(0, 0, 0, 0.137254902)));
  background-image: linear-gradient(to top, var(--clr-dark-3) 50%, rgba(0, 0, 0, 0.137254902) 100%);
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 29px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/29px 29px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 29px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/29px 29px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 29px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/29px 29px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 29px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/29px 29px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 29px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/29px 29px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 29px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/29px 29px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/29px 29px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/29px 29px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/29px 29px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/29px 29px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  inset: 0;
  z-index: 1;
}
.mun-section .mun-section-inner .mun-description-background::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.2;
  z-index: 2;
}
.mun-section .mun-section-inner .mun-description-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border: 40px solid transparent;
  -o-border-image: var(--svg-inverted-border-secondary);
     border-image: var(--svg-inverted-border-secondary);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.9529411765)) drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.8470588235));
          filter: drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.9529411765)) drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.8470588235));
  z-index: 2;
}
.mun-section .mun-section-inner::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  opacity: 0.1;
  z-index: -1;
}
.mun-section .update-info {
  position: relative;
  width: 100%;
  padding: 0.8rem 3rem;
  background-color: var(--clr-dark-3);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, rgba(51, 51, 51, 0.137)), color-stop(50%, var(--clr-dark-2)));
  background-image: linear-gradient(to right, rgba(51, 51, 51, 0.137) 10%, var(--clr-dark-2) 50%);
  border-top: 1px solid var(--clr-dark-border-1);
  text-align: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
  -webkit-box-shadow: inset 0px 0px 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0px 0px 1px 3px rgba(0, 0, 0, 0.1);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 3;
}
.mun-section .update-info::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: darken;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}
.mun-section .update-info::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}
.mun-section .m-frame {
  position: absolute;
  width: 100%;
  height: 99%;
  inset: 0;
  border: 45px solid transparent;
  border-top: none;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
  z-index: 4;
  pointer-events: none;
}
.mun-section .m-bg {
  position: absolute;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  top: 0;
  background-color: var(--clr-dark-1);
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 27px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 27px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 27px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 27px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  overflow: clip;
  z-index: 2;
}
.mun-section .m-bg .motif-img {
  opacity: 0.8;
}
.mun-section .m-bg .m-bg-elements {
  position: absolute;
  width: 800px;
  height: 348px;
  bottom: 0;
  left: -6rem;
  background-image: var(--element-trees);
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(243deg, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 50%);
          mask-image: linear-gradient(243deg, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 50%);
  -webkit-filter: brightness(20%);
          filter: brightness(20%);
  z-index: 1;
}
.mun-section .m-bg::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: darken;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}
.mun-section .m-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
}
.mun-section::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/20px 20px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 19px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/20px 20px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 19px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/20px 20px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 19px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/20px 20px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 19px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  mix-blend-mode: difference;
  opacity: 0.5;
  z-index: 3;
  display: none;
}

.motif-img {
  width: 100%;
  height: 100%;
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0, 0, 0, 0))), var(--motif) no-repeat;
  -webkit-mask: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%), var(--motif) no-repeat;
          mask: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0, 0, 0, 0))), var(--motif) no-repeat;
          mask: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%), var(--motif) no-repeat;
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
  background-color: var(--clr-accent-3);
}

section.notices-rules {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: var(--clr-font-dark);
  border: 1px solid var(--clr-dark-border-1);
  border-top: 0;
  container-type: inline-size;
}
section.notices-rules .notices {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 300px;
          flex: 1 1 300px;
  padding: 1.2rem var(--padding-box);
  border-right: 1px solid var(--clr-dark-border-1);
  border-top: 0;
  background-color: var(--clr-dark-3);
  border-radius: 0 0 var(--border-radius-primary) var(--border-radius-primary);
  overflow: clip;
}
section.notices-rules .notices .notices-title {
  position: relative;
  width: 100%;
  text-align: center;
  color: var(--clr-font-light-secondary);
  padding: var(--padding-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  container-type: inline-size;
}
section.notices-rules .notices .notices-title svg {
  width: 22px;
  height: 22px;
  position: absolute;
  top: -4px;
  z-index: 6;
}
section.notices-rules .notices .notices-title hgroup {
  padding-top: 1rem;
  position: relative;
  z-index: 6;
}
section.notices-rules .notices .notices-title-background {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-1);
  border-radius: var(--border-radius-primary) var(--border-radius-primary) 0 0;
  -webkit-mask: var(--svg-circle) top -2.5rem right 50%/70px 70px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: var(--svg-circle) top -2.5rem right 50%/70px 70px no-repeat, linear-gradient(#000 0 0);
          mask: var(--svg-circle) top -2.5rem right 50%/70px 70px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: var(--svg-circle) top -2.5rem right 50%/70px 70px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  overflow: clip;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1;
}
section.notices-rules .notices .notices-title-background .accent-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle closest-side, var(--clr-accent-3) 0%, rgba(0, 0, 0, 0) 100%);
  top: -10rem;
  right: -15rem;
  opacity: 0.35;
  z-index: 6;
}
@container (min-width: 370px) {
  section.notices-rules .notices .notices-title-background .accent-glow {
    display: none;
  }
}
section.notices-rules .notices .notices-title-background .circle-b {
  position: absolute;
  width: 71px;
  height: 70px;
  border: 1px solid var(--clr-dark-border-1);
  border-radius: 20rem;
  top: -2.46rem;
  z-index: 5;
}
section.notices-rules .notices .notices-title-background::before {
  content: "";
  display: block;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  inset: 0;
  border: 1px solid var(--clr-dark-border-1);
  border-radius: var(--border-radius-primary) var(--border-radius-primary) 0 0;
  z-index: 3;
}
section.notices-rules .notices .notices-title-background::after {
  content: "";
  display: block;
  position: absolute;
  width: 800px;
  height: 348px;
  background-image: var(--element-trees);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  bottom: -5rem;
  left: -2rem;
  rotate: 8deg;
  -webkit-filter: brightness(50%);
          filter: brightness(50%);
  opacity: 0.6;
  z-index: 2;
}
section.notices-rules .notices .notices-body {
  position: relative;
  width: 100%;
  padding: clamp(0.938rem, 1vw + 1rem, var(--padding-primary));
  padding: 1rem;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, var(--clr-light-1)), color-stop(95%, rgba(0, 0, 0, 0)));
  background: linear-gradient(180deg, var(--clr-light-1) 70%, rgba(0, 0, 0, 0) 95%);
  overflow: clip;
  border-radius: 0 0 var(--border-radius-primary) var(--border-radius-primary);
}
section.notices-rules .notices .notices-body img.notice-bg-element {
  position: absolute;
  width: 906px;
  height: 701px;
  top: -1rem;
  left: -8rem;
}
section.notices-rules .notices .notices-body::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 2px);
  height: 100%;
  inset: 0;
  border: 1px solid var(--clr-light-border);
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(64%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0) 64%, rgba(0, 0, 0, 0) 100%);
          mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(64%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask-image: linear-gradient(180deg, rgb(0, 0, 0) 64%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
}
@container (max-width: 700px) {
  section.notices-rules .notices .notices-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  section.notices-rules .notices .notices-body img.notice-bg-element {
    max-width: 700px;
    height: auto;
    min-height: 540px;
    left: unset;
  }
}
section.notices-rules .notices .notice-unit {
  position: relative;
  border-radius: var(--border-radius-primary);
  margin-bottom: var(--row-gap);
  z-index: 2;
}
section.notices-rules .notices .notice-unit .notice-title {
  background-color: var(--clr-dark-2);
  border: 1px solid var(--clr-dark-border-2);
  border-radius: var(--border-radius-primary) var(--border-radius-primary) 0 0;
  border-bottom: none;
  color: #a6a6a6;
  padding: var(--padding-box);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
section.notices-rules .notices .notice-unit .notice-title .title-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  gap: calc(var(--column-gap) - 4px);
}
section.notices-rules .notices .notice-unit .notice-title .title-text .title-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
section.notices-rules .notices .notice-unit .notice-info {
  border: 1px solid var(--clr-light-border);
  border-radius: 0 0 var(--border-radius-primary) var(--border-radius-primary);
  background-color: var(--clr-light-1);
  padding: var(--padding-box);
}
section.notices-rules .rules {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 60%;
          flex: 1 1 60%;
  padding: 1.2rem var(--padding-primary);
  -webkit-backdrop-filter: brightness(150%);
          backdrop-filter: brightness(150%);
  overflow: clip;
}
section.notices-rules .rules .rule-unit {
  position: relative;
  margin-bottom: var(--row-gap);
  border-radius: var(--border-radius-primary);
  padding: 9px;
}
section.notices-rules .rules .rule-unit .rule-title {
  position: relative;
  width: 100%;
  min-height: 40px;
  color: var(--clr-font-light-secondary);
  background-color: color-mix(in srgb, var(--clr-accent-2), white 35%);
  background: -webkit-gradient(linear, right top, left top, from(color-mix(in srgb, var(--clr-accent-2), white 60%)), color-stop(63%, color-mix(in srgb, var(--clr-accent-1), white 20%)));
  background: linear-gradient(to left, color-mix(in srgb, var(--clr-accent-2), white 60%) 0%, color-mix(in srgb, var(--clr-accent-1), white 20%) 63%);
  border: 1px solid var(--clr-accent-1);
  border-bottom: none;
  border-radius: var(--border-radius-primary) var(--border-radius-primary) 0 0;
  padding: var(--padding-box);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--column-gap);
  overflow: clip;
  z-index: 2;
}
section.notices-rules .rules .rule-unit .rule-title h1 {
  position: absolute;
  color: var(--clr-accent-1);
  font-size: 7.1rem;
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(16%, rgba(0, 0, 0, 0)), color-stop(55%, rgb(0, 0, 0)));
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 16%, rgb(0, 0, 0) 55%);
          mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(16%, rgba(0, 0, 0, 0)), color-stop(55%, rgb(0, 0, 0)));
          mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 16%, rgb(0, 0, 0) 55%);
  opacity: 0.38;
  top: -3rem;
  left: -2rem;
  z-index: 1;
  -webkit-filter: url(#inset-shadow);
          filter: url(#inset-shadow);
}
section.notices-rules .rules .rule-unit .rule-title h2 {
  position: relative;
  line-height: 0.85;
  z-index: 3;
  -webkit-filter: url(#inset-shadow);
          filter: url(#inset-shadow);
}
section.notices-rules .rules .rule-unit .rule-title h3 {
  position: relative;
  z-index: 3;
  -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3647058824));
          filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3647058824));
}
section.notices-rules .rules .rule-unit .rule-title .rule-icon {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 3;
  -webkit-filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.5411764706));
          filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.5411764706));
}
section.notices-rules .rules .rule-unit .rule-title .rule-icon i {
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(0, 0, 0, 0.219)), color-stop(85%, rgb(0, 0, 0)));
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.219) 10%, rgb(0, 0, 0) 85%);
          mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(0, 0, 0, 0.219)), color-stop(85%, rgb(0, 0, 0)));
          mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.219) 10%, rgb(0, 0, 0) 85%);
  font-size: 2rem;
}
section.notices-rules .rules .rule-unit .rule-title::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: overlay;
  opacity: 0.2;
  z-index: 2;
  pointer-events: none;
}
section.notices-rules .rules .rule-unit .rule-title::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.3;
  pointer-events: none;
}
section.notices-rules .rules .rule-unit .rule-body-wrapper {
  position: relative;
  background-color: var(--clr-light-1);
  padding: var(--padding-primary);
  border-radius: 0 0 var(--border-radius-primary) var(--border-radius-primary);
  border: 1px solid var(--clr-dark-border);
  border-top: none;
  overflow: clip;
  z-index: 2;
}
section.notices-rules .rules .rule-unit .rule-body-wrapper .rule-body {
  position: relative;
  background-color: var(--clr-light-2);
  border-radius: var(--border-radius-primary);
  border: 1px solid var(--clr-light-border);
  padding: 16px;
  z-index: 1;
}
section.notices-rules .rules .rule-unit .rule-body-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: radial-gradient(ellipse farthest-side at center top, var(--clr-accent-3) 0%, hsla(0, 0%, 0%, 0) 100%);
  top: -8rem;
}
section.notices-rules .rules .rule-unit .stepped-frame {
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 1;
}
section.notices-rules .rules .rule-unit + hr {
  margin-block: 1rem;
}
section.notices-rules .tab-bg-glow {
  margin-top: 2rem;
  background-color: color-mix(in srgb, var(--clr-accent-3), transparent 40%);
}
section.notices-rules .tab-bg-glow::before {
  margin-top: -2rem;
}
@container (max-width: 760px) {
  section.notices-rules .tab-bg-glow {
    display: none;
  }
}

/* ! ------------------------------- 
            Tab 2
------------------------------------ ! */
.banner-top {
  position: relative;
  padding: 1.5rem var(--padding-primary);
  background-color: var(--clr-dark-3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-left: 1px solid var(--clr-dark-border-1);
  border-right: 1px solid var(--clr-dark-border-1);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(var(--column-gap) * 1.8);
  z-index: 2;
}
.banner-top hgroup {
  position: relative;
  line-height: 0.8;
  z-index: 3;
}
.banner-top hgroup h2 {
  font-size: 1.7em;
}
.banner-top .icon-40px {
  position: relative;
  border: 1px solid var(--clr-dark-border-2);
  z-index: 3;
}
.banner-top .icon-40px img {
  border: none;
  -webkit-filter: brightness(70%);
          filter: brightness(70%);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.banner-top .bt-gradient {
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: radial-gradient(ellipse farthest-side at left top, var(--clr-accent-1) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
}
.banner-top:hover .icon-40px img {
  -webkit-filter: brightness(100%);
          filter: brightness(100%);
}

.basics-img-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1rem;
  container-type: inline-size;
}
.basics-img-banner .central-img-wrapper {
  position: absolute;
  width: 100%;
  height: 361px;
  inset: 0;
  overflow: clip;
}
.basics-img-banner .central-img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.basics-img-banner .banner-fr {
  position: relative;
  width: 100%;
  z-index: 2;
  --primary-value: 11px;
}
.basics-img-banner .banner-fr .fr-inline, .basics-img-banner .banner-fr .fr-block {
  position: absolute;
  background-color: var(--clr-dark-1);
}
.basics-img-banner .banner-fr .fr-inline::before, .basics-img-banner .banner-fr .fr-block::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: darken;
  opacity: 0.3;
  z-index: 1;
}
.basics-img-banner .banner-fr .fr-inline::after, .basics-img-banner .banner-fr .fr-block::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  z-index: 2;
}
.basics-img-banner .banner-fr .fr-inline {
  width: var(--primary-value);
  top: var(--primary-value);
  bottom: var(--primary-value);
}
.basics-img-banner .banner-fr .fr-inline.left {
  left: 0;
}
.basics-img-banner .banner-fr .fr-inline.right {
  right: 0;
}
.basics-img-banner .banner-fr .fr-block {
  width: 100%;
  height: var(--primary-value);
}
.basics-img-banner .banner-fr .fr-block.top {
  left: 0;
  right: 0;
  top: 0;
}
.basics-img-banner .banner-fr .fr-block.bottom {
  left: 0;
  right: 0;
  bottom: 0;
}
.basics-img-banner .banner-fr.fr-a {
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 6;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.basics-img-banner .banner-fr.fr-a .stepped-frame {
  width: 100%;
  height: 100%;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  inset: 0;
  border: 25px solid transparent;
  -o-border-image: var(--svg-stepped-border);
     border-image: var(--svg-stepped-border);
  border-image-slice: 9% fill;
  -webkit-filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8078431373)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3294117647));
          filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8078431373)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3294117647));
  z-index: 3;
  border-bottom: none;
}
.basics-img-banner .banner-fr.fr-a .fr-block.bottom {
  display: none;
}
.basics-img-banner .banner-fr.fr-a .framing-el {
  position: absolute;
  width: 247px;
  height: 271px;
  bottom: -3px;
  left: -5px;
  z-index: 5;
}
.basics-img-banner .banner-fr.fr-a .framing-el.right {
  inset: unset;
  right: -6px;
  bottom: -5px;
}
.basics-img-banner .banner-fr.fr-b {
  position: relative;
  height: 62px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4px;
  z-index: 4;
}
.basics-img-banner .banner-fr.fr-b .stepped-frame {
  width: 100%;
  height: 100%;
  inset: 0;
  top: 3px;
}
.basics-img-banner .banner-fr.fr-b .border-pat-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.basics-img-banner .banner-fr.fr-b .border-pat-wrap .pat-a {
  width: 100%;
  height: 100%;
  background-image: url(https://i.imgur.com/kKD6wDs.png);
  background-position: center;
  z-index: 4;
}
.basics-img-banner .banner-fr.fr-b .border-pat-wrap .pat-b {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--clr-dark-1);
  -webkit-mask: url(https://i.imgur.com/FAfLmG0.png), -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/FAfLmG0.png), linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/FAfLmG0.png), -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/FAfLmG0.png), linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  -webkit-mask-position: center;
          mask-position: center;
  z-index: 2;
}
.basics-img-banner .banner-fr.fr-b .border-pat-wrap .pat-c {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://i.imgur.com/kvXqjEJ.png);
  background-position: center;
  z-index: 3;
  -webkit-filter: brightness(0.8);
          filter: brightness(0.8);
}
.basics-img-banner .banner-fr.fr-c {
  position: relative;
  height: 39px;
  background-color: var(--clr-dark-1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: -3px;
}
.basics-img-banner .banner-fr.fr-c .fr-repeat {
  position: relative;
  width: calc(100% - 14px);
  height: 22px;
  background-image: url(https://i.imgur.com/GNh88qE.png);
  -webkit-filter: url(#drop-shadow-2);
          filter: url(#drop-shadow-2);
}
.basics-img-banner .banner-fr.fr-c .stepped-frame {
  width: 100%;
  height: 100%;
  -webkit-filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8078431373));
          filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8078431373));
  z-index: 3;
}
@container (max-width: 700px) {
  .basics-img-banner .banner-fr.fr-a .fr-block.bottom {
    display: block;
  }
  .basics-img-banner .banner-fr.fr-a .stepped-frame {
    border-bottom: 25px solid transparent;
  }
  .basics-img-banner .banner-fr.fr-a .framing-el {
    display: none;
  }
}

section.basics {
  container-type: inline-size;
}
section.basics .col-wrap {
  position: relative;
  width: 100%;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--column-gap);
  margin-top: 3px;
}
section.basics .col-wrap .stepped-frame {
  width: 100%;
  height: 100%;
  inset: 0;
}
section.basics .image-col {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 400px;
          flex: 1 1 400px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
section.basics .image-col .spine {
  position: relative;
  width: 80px;
  height: 100%;
  overflow: clip;
  padding: 7px 5px;
}
section.basics .image-col .spine .spine-inner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 1px 3px;
  padding-top: 2px;
  left: -1px;
  overflow: clip;
}
section.basics .image-col .spine .spine-inner img {
  position: relative;
  left: -2px;
}
section.basics .image-col .spine .spine-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: #151515;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0.631372549)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.631372549) 50%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
}
section.basics .image-col .spine .stepped-frame {
  -webkit-filter: brightness(0.9) drop-shadow(0px -2px 1px #000000);
          filter: brightness(0.9) drop-shadow(0px -2px 1px #000000);
  z-index: 5;
}
section.basics .image-col .muse-aspect {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%;
  overflow: clip;
  padding: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
section.basics .image-col .muse-aspect .aspect-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: clip;
}
section.basics .image-col .muse-aspect .win-el {
  position: absolute;
  top: -10px;
  left: -9.3rem;
  width: 432px;
  height: 240px;
  overflow: clip;
}
section.basics .image-col .muse-aspect .win-el.l-a {
  z-index: 5;
}
section.basics .image-col .muse-aspect .win-el.l-b {
  z-index: 4;
  -webkit-mask-image: url(https://i.imgur.com/QXqgftD.png);
          mask-image: url(https://i.imgur.com/QXqgftD.png);
  background-color: var(--clr-dark-3);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(40%, rgba(0, 0, 0, 0)), to(rgba(70, 70, 70, 0.808)));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 40%, rgba(70, 70, 70, 0.808) 100%);
}
section.basics .image-col .muse-aspect .win-el.l-b::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: difference;
  opacity: 0.2;
  z-index: 1;
  pointer-events: none;
}
section.basics .image-col .muse-aspect .win-el.l-b::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
}
section.basics .image-col .muse-aspect .win-el-b {
  position: absolute;
  top: 39rem;
  right: -3px;
  width: 263px;
  height: 306px;
  overflow: clip;
  z-index: 5;
}
section.basics .image-col .muse-aspect .win-el-b.l-a {
  z-index: 5;
  -webkit-filter: drop-shadow(0px -1px 1px rgba(161, 161, 161, 0.1921568627));
          filter: drop-shadow(0px -1px 1px rgba(161, 161, 161, 0.1921568627));
  opacity: 0.9;
}
section.basics .image-col .muse-aspect .win-el-b.l-b {
  z-index: 4;
  -webkit-mask-image: url(https://i.imgur.com/jr5ObLQ.png);
          mask-image: url(https://i.imgur.com/jr5ObLQ.png);
  background-color: var(--clr-dark-1);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(40%, rgba(34, 34, 34, 0.226)), to(rgba(2, 2, 2, 0.288)));
  background-image: linear-gradient(to right, rgba(34, 34, 34, 0.226) 40%, rgba(2, 2, 2, 0.288) 100%);
}
section.basics .image-col .muse-aspect .win-el-b.l-b::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: difference;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}
section.basics .image-col .muse-aspect .win-el-b.l-b::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
}
section.basics .image-col .muse-aspect .win-layer {
  position: absolute;
  top: -10px;
  left: -9.3rem;
  width: 432px;
  height: 240px;
  overflow: clip;
  -webkit-mask-image: url(https://i.imgur.com/p7lHG7i.png);
          mask-image: url(https://i.imgur.com/p7lHG7i.png);
}
section.basics .image-col .muse-aspect .win-layer.window-b {
  position: absolute;
  top: 39rem;
  right: -3px;
  width: 263px;
  height: 306px;
  overflow: clip;
  z-index: 5;
  -webkit-mask-image: url(https://i.imgur.com/kuhFJjo.png);
          mask-image: url(https://i.imgur.com/kuhFJjo.png);
  left: unset;
  z-index: 3;
}
section.basics .image-col .muse-aspect .window-b.aspect-window {
  -webkit-backdrop-filter: blur(11px);
          backdrop-filter: blur(11px);
}
section.basics .image-col .muse-aspect .aspect-window {
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 3;
}
section.basics .image-col .muse-aspect .window-clr {
  background-color: var(--clr-accent-3);
  mix-blend-mode: soft-light;
  z-index: 4;
  opacity: 0.2;
}
section.basics .image-col .muse-aspect .window-grd {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--clr-dark-2)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to bottom, var(--clr-dark-2) 0%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: multiply;
  z-index: 5;
  opacity: 0.6;
}
section.basics .image-col .muse-aspect .window-sfx {
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  z-index: 6;
}
section.basics .image-col .muse-aspect .aspect-image {
  position: relative;
  width: 100%;
  height: 820px;
  background-color: var(--clr-dark-3);
  z-index: 2;
  overflow: clip;
  -webkit-mask: var(--svg-circle) bottom -33.3rem left -8rem/calc(100% + 7.5rem) calc(100% - 0.9rem) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: var(--svg-circle) bottom -33.3rem left -8rem/calc(100% + 7.5rem) calc(100% - 0.9rem) no-repeat, linear-gradient(#000 0 0);
          mask: var(--svg-circle) bottom -33.3rem left -8rem/calc(100% + 7.5rem) calc(100% - 0.9rem) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: var(--svg-circle) bottom -33.3rem left -8rem/calc(100% + 7.5rem) calc(100% - 0.9rem) no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
section.basics .image-col .muse-aspect .aspect-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.basics .image-col .muse-aspect .aspect-background {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-1);
  background-image: linear-gradient(34deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4340044743) 55%, rgba(0, 0, 0, 0.452) 100%), linear-gradient(34deg, rgba(68, 68, 68, 0.295) 20%, rgba(0, 0, 0, 0) 70%);
  overflow: clip;
  z-index: 1;
}
section.basics .image-col .muse-aspect .aspect-background .aspect-trees {
  position: absolute;
  width: 800px;
  height: 348px;
  bottom: 0;
  left: -5rem;
  background-image: var(--element-trees);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  -webkit-filter: brightness(85%);
          filter: brightness(85%);
}
section.basics .image-col .muse-aspect .aspect-background::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: difference;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}
section.basics .image-col .muse-aspect .aspect-background::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.8;
  z-index: 2;
  pointer-events: none;
}
section.basics .image-col .muse-aspect .stepped-frame {
  z-index: 10;
}
section.basics .info-col {
  position: relative;
  border-left: 1px solid var(--clr-dark-border-1);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 77%;
          flex: 1 1 77%;
  border-top: 1px solid var(--clr-dark-border-1);
}
section.basics .info-col .info-col-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.89);
  z-index: -1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: clip;
}
section.basics .info-col .info-col-bg .col-gradient {
  position: absolute;
  width: calc(100% + 10rem);
  height: 250px;
  background-image: radial-gradient(ellipse farthest-side at center top, rgba(255, 255, 255, 0.438) 0%, rgba(0, 0, 0, 0) 100%);
}
section.basics .info-col .info-col-bg::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: difference;
  opacity: 0.2;
  z-index: 2;
}
section.basics .info-col .info-col-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  z-index: 3;
}
section.basics .info-col-top {
  position: relative;
  padding: 2.2rem var(--padding-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--clr-dark-3);
  -webkit-filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8078431373)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3294117647));
          filter: drop-shadow(0px -2px 0px rgba(0, 0, 0, 0.8078431373)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3294117647));
  margin-bottom: 8px;
}
section.basics .info-col-top .muse-summary {
  position: relative;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: var(--border-radius-primary);
  z-index: 2;
  padding: 11px;
}
section.basics .info-col-top .muse-summary .ms-inner {
  background-color: var(--clr-light-1);
  padding: 1rem 12px;
}
section.basics .info-col-top .muse-summary p {
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 1px;
  color: var(--clr-font-dark);
}
section.basics .info-col-top .muse-summary::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  height: calc(100% + 1px);
  top: -1px;
  z-index: -1;
  background-color: var(--clr-dark-3);
}
section.basics .info-col-top .backdrop {
  position: absolute;
  width: calc(100% - 15px);
  height: 100%;
  z-index: 1;
  overflow: clip;
}
section.basics .info-col-top .backdrop::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--clr-dark-3)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to bottom, var(--clr-dark-3) 0%, rgba(0, 0, 0, 0) 100%);
}
section.basics .info-col-top .backdrop img {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  bottom: 0;
  z-index: 1;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(30%, #000));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 30%);
          mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(30%, #000));
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 30%);
}
section.basics .info-col-top .stepped-border {
  width: calc(100% - 15px);
  z-index: 5;
  bottom: -1.29rem;
  -webkit-filter: drop-shadow(0px -1px 0px #000000) brightness(1.4);
          filter: drop-shadow(0px -1px 0px #000000) brightness(1.4);
}
section.basics .iconsq-wrap {
  float: left;
  width: 80px;
  height: 80px;
  background-color: var(--clr-dark-1);
  border-radius: var(--border-radius-primary);
  line-height: 0px;
  margin-top: 6px;
  margin-bottom: 10px;
  margin-right: 1.6rem;
  margin-left: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@container (max-width: 900px) {
  section.basics .col-wrap .spine {
    display: none;
  }
  section.basics .image-col {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 300px;
            flex: 1 1 300px;
  }
  section.basics .image-col .muse-aspect .aspect-image {
    -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #000), to(rgba(0, 0, 0, 0)));
    -webkit-mask: linear-gradient(to bottom, #000 20%, rgba(0, 0, 0, 0) 100%);
            mask: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #000), to(rgba(0, 0, 0, 0)));
            mask: linear-gradient(to bottom, #000 20%, rgba(0, 0, 0, 0) 100%);
  }
  section.basics .image-col .muse-aspect .win-el, section.basics .image-col .muse-aspect .win-el-b, section.basics .image-col .muse-aspect .win-layer {
    display: none;
  }
}
@container (max-width: 700px) {
  section.basics .col-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
  }
  section.basics .col-wrap .info-col {
    border-left: none;
  }
  section.basics .col-wrap .info-col-top .backdrop img {
    width: 100%;
    height: 100%;
  }
  section.basics .col-wrap .image-col {
    display: none;
  }
  section.basics .col-wrap .spine {
    display: none;
  }
}

section.information-blocks-container {
  position: relative;
  width: 100%;
  padding: var(--row-gap) var(--padding-primary) var(--padding-primary);
}

.list-unit {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 9px;
}
.list-unit .lu-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--clr-dark-3);
  background-image: radial-gradient(ellipse farthest-corner at center top, var(--clr-accent-3) 0%, rgba(0, 0, 0, 0) 80%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.list-unit .lu-inner::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: difference;
  opacity: 0.2;
  z-index: 1;
  pointer-events: none;
}
.list-unit .lu-inner::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
}
.list-unit .list-unit-top {
  position: relative;
  color: var(--clr-font-dark);
  background-color: var(--clr-light-3);
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(158, 158, 158, 0.26)), to(var(--clr-light-1)));
  background-image: linear-gradient(0deg, rgba(158, 158, 158, 0.26) 0%, var(--clr-light-1) 100%);
  padding: 1rem 12px;
  border-top-left-radius: var(--border-radius-primary);
  border-top-right-radius: var(--border-radius-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
  z-index: 3;
  -webkit-box-shadow: inset 0px -1px 1px 0px rgba(0, 0, 0, 0.315);
          box-shadow: inset 0px -1px 1px 0px rgba(0, 0, 0, 0.315);
}
.list-unit .list-unit-top h2 {
  width: 100%;
  position: absolute;
  font-size: clamp(2em, 1vw + 0.75rem, 2.2em);
  font-size: 3.7em;
  text-transform: lowercase;
  font-style: oblique;
  background: -webkit-gradient(linear, right top, left bottom, from(var(--clr-accent-1)), to(color-mix(in srgb, var(--clr-accent-2), rgb(218, 218, 218) 50%)));
  background: linear-gradient(to bottom left, var(--clr-accent-1) 0%, color-mix(in srgb, var(--clr-accent-2), rgb(218, 218, 218) 50%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
  left: -9px;
  bottom: -12px;
  -webkit-mask: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.233)), color-stop(55%, rgb(0, 0, 0)));
  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.233) 0%, rgb(0, 0, 0) 55%);
          mask: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.233)), color-stop(55%, rgb(0, 0, 0)));
          mask: linear-gradient(0deg, rgba(0, 0, 0, 0.233) 0%, rgb(0, 0, 0) 55%);
  -webkit-filter: url(#inset-shadow);
          filter: url(#inset-shadow);
}
.list-unit .list-unit-top h3 {
  position: relative;
  font-weight: 600;
  letter-spacing: 2px;
  z-index: 2;
  -webkit-filter: drop-shadow(0px 2px 0px rgba(238, 238, 238, 0.719));
          filter: drop-shadow(0px 2px 0px rgba(238, 238, 238, 0.719));
}
.list-unit .list-unit-top svg, .list-unit .list-unit-top i {
  position: relative;
  width: 14px;
  color: var(--clr-accent-1);
  fill: var(--clr-accent-1);
  margin-right: 10px;
  z-index: 2;
  -webkit-mask: linear-gradient(340deg, rgba(0, 0, 0, 0.377) 10%, rgb(0, 0, 0) 70%);
          mask: linear-gradient(340deg, rgba(0, 0, 0, 0.377) 10%, rgb(0, 0, 0) 70%);
  -webkit-filter: drop-shadow(0px 2px 0px rgba(238, 238, 238, 0.8078431373));
          filter: drop-shadow(0px 2px 0px rgba(238, 238, 238, 0.8078431373));
}
.list-unit .list-unit-top::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.5;
  z-index: 1;
}
.list-unit ul {
  list-style-type: none;
  padding: 8px;
  -webkit-filter: drop-shadow(0px 1px 0px #000000) drop-shadow(0px 1px 0px rgba(139, 139, 139, 0.3882352941)) drop-shadow(0px -1px 0px rgba(139, 139, 139, 0.1215686275));
          filter: drop-shadow(0px 1px 0px #000000) drop-shadow(0px 1px 0px rgba(139, 139, 139, 0.3882352941)) drop-shadow(0px -1px 0px rgba(139, 139, 139, 0.1215686275));
}
.list-unit li {
  position: relative;
  text-align: right;
  border-radius: var(--border-radius-primary);
  background-color: rgba(20, 20, 20, 0.3019607843);
  padding: 8px;
  margin-bottom: 8px;
  overflow: clip;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  z-index: 3;
  -webkit-filter: drop-shadow(0px 1px 0px #000000);
          filter: drop-shadow(0px 1px 0px #000000);
}
.list-unit li span, .list-unit li a {
  position: relative;
  -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3882352941));
          filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3882352941));
}
.list-unit li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--clr-accent-2);
  float: left;
  -webkit-filter: drop-shadow(0px -1px 1px rgba(160, 160, 160, 0.3294117647));
          filter: drop-shadow(0px -1px 1px rgba(160, 160, 160, 0.3294117647));
}
.list-unit li:last-of-type {
  margin-bottom: 0;
}
.list-unit .stepped-frame {
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 3;
}
.list-unit::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-3);
  border-radius: var(--border-radius-primary);
  top: -1px;
  z-index: -1;
}
.list-unit.secondary {
  min-width: unset;
}
.list-unit.secondary .lu-inner {
  background-image: radial-gradient(ellipse farthest-corner at center top, var(--clr-dark-2) 0%, rgba(0, 0, 0, 0) 80%);
}
.list-unit.secondary .list-unit-top {
  color: var(--clr-font-light-secondary);
}
.list-unit.secondary .list-unit-top h3 {
  -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5411764706));
          filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5411764706));
}
.list-unit.secondary .list-unit-top svg, .list-unit.secondary .list-unit-top i {
  -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5411764706));
          filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5411764706));
}
.list-unit.secondary .list-unit-top {
  background-color: var(--clr-dark-3);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, rgba(0, 0, 0, 0)), to(var(--clr-accent-2)));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, var(--clr-accent-2) 100%);
}
.list-unit.secondary::before {
  display: none;
}
.list-unit.secondary .stepped-frame {
  opacity: 0.5;
}

section.personality {
  position: relative;
  width: 100%;
  container-type: inline-size;
  margin-bottom: var(--row-gap);
}
section.personality .col-wrap {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--column-gap);
}
section.personality .col-wrap .information-block {
  margin-bottom: var(--row-gap);
}
section.personality .col-wrap .stats-col {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 400px;
          flex: 1 1 400px;
  border-radius: var(--border-radius-primary);
  padding: var(--padding-primary);
  border: 1px solid var(--clr-dark-border-1);
}
section.personality .col-wrap .traits-col {
  position: relative;
  max-width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 30%;
          flex: 1 1 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--column-gap);
}
section.personality .col-wrap .traits-col .traits-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--column-gap);
}
section.personality .col-wrap .traits-col .trait-box {
  border-radius: var(--border-radius-primary);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 200px;
          flex: 1 1 200px;
}
section.personality .col-wrap .traits-col .pers-progress {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--border-radius-primary);
}
section.personality .col-wrap .traits-col .pers-progress .pr-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--clr-dark-3);
  background-image: radial-gradient(ellipse farthest-corner at center top, var(--clr-dark-1) 0%, rgba(0, 0, 0, 0) 80%);
  padding: 9px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
section.personality .col-wrap .traits-col .pers-progress .pr-inner::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: difference;
  opacity: 0.2;
  z-index: 1;
  pointer-events: none;
}
section.personality .col-wrap .traits-col .pers-progress .pr-inner::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
}
section.personality .col-wrap .traits-col .pers-progress .comparison {
  position: relative;
  text-align: center;
  width: 100%;
  border-radius: var(--border-radius-primary);
  padding: 2px 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--column-gap);
  z-index: 3;
}
section.personality .col-wrap .traits-col .pers-progress .comparison h5 {
  font-family: var(--font-body);
  font-size: 0.9em;
  font-weight: 500;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: left;
  color: var(--clr-font-light-secondary);
  -webkit-filter: drop-shadow(0px -1px 0px rgba(8, 8, 8, 0.4431372549));
          filter: drop-shadow(0px -1px 0px rgba(8, 8, 8, 0.4431372549));
}
section.personality .col-wrap .traits-col .pers-progress .comparison h5:last-child {
  text-align: right;
}
section.personality .col-wrap .traits-col .pers-progress .comparison .stat-bar {
  width: 45%;
  height: 3px;
  border-radius: 20px;
  background-color: var(--clr-dark-1);
  -webkit-filter: drop-shadow(0px -1px 2px rgba(8, 8, 8, 0.4431372549));
          filter: drop-shadow(0px -1px 2px rgba(8, 8, 8, 0.4431372549));
}
section.personality .col-wrap .traits-col .pers-progress .comparison .stat-bar .stat-bar-inner {
  height: 100%;
  background-color: var(--clr-accent-2);
  border-radius: 20px 0 0 20px;
}
section.personality .col-wrap .stepped-frame {
  opacity: 0.5;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}
section.personality .preferences {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: var(--column-gap);
  width: 100%;
}
section.personality .preferences .list-unit {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 230px;
          flex: 1 0 230px;
}

.stats-col-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.89);
  z-index: -1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: clip;
}
.stats-col-bg .col-gradient {
  position: absolute;
  width: calc(100% + 10rem);
  height: 250px;
  background-image: radial-gradient(ellipse farthest-side at center top, rgba(255, 255, 255, 0.438) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.45;
}
.stats-col-bg::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: difference;
  opacity: 0.2;
  z-index: 2;
}
.stats-col-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  z-index: 3;
}

.personality-banner-container {
  position: relative;
  width: 100%;
  padding: 6px;
  margin-bottom: var(--column-gap);
  container-type: inline-size;
}
.personality-banner-container .personality-banner {
  position: relative;
  width: 100%;
  border-radius: var(--border-radius-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  overflow: clip;
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.personality-banner-container .personality-banner .banner-within {
  position: relative;
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5.8rem;
  background: rgba(7, 7, 7, 0.8823529412);
  z-index: 2;
  padding-block: 0.9rem;
}
.personality-banner-container .personality-banner .banner-within .stepped-border {
  z-index: 3;
  top: 1px;
}
.personality-banner-container .personality-banner .banner-within .motif-img {
  position: absolute;
  background-color: rgb(117, 117, 117);
  mix-blend-mode: color-dodge;
  z-index: 1;
}
.personality-banner-container .personality-banner .banner-within::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--pattern-grain);
  opacity: 0.3;
  mix-blend-mode: soft-light;
  z-index: 2;
}
.personality-banner-container .personality-banner .banner-within::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--pattern-noise);
  opacity: 0.3;
  mix-blend-mode: difference;
  z-index: 3;
}
.personality-banner-container .personality-banner .col-pers-text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -ms-flex-line-pack: center;
      align-content: center;
  padding: var(--padding-primary);
  z-index: 4;
}
.personality-banner-container .personality-banner .col-pers-text .text-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--column-gap);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: -4px;
}
.personality-banner-container .personality-banner .col-pers-text .text-title svg {
  position: relative;
  width: 48px;
  fill: var(--clr-accent-2);
  -webkit-mask: linear-gradient(340deg, rgba(0, 0, 0, 0.24) 10%, rgb(0, 0, 0) 70%);
          mask: linear-gradient(340deg, rgba(0, 0, 0, 0.24) 10%, rgb(0, 0, 0) 70%);
  z-index: 1;
}
.personality-banner-container .personality-banner .col-pers-text .text-title hgroup p {
  line-height: 0.7;
}
.personality-banner-container .personality-banner .col-pers-text hr {
  margin-block: 6px;
}
.personality-banner-container .personality-banner .col-pers-frame {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 55%;
          flex: 1 0 55%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  z-index: 4;
}
.personality-banner-container .personality-banner .col-pers-frame .pers-img {
  position: absolute;
  max-width: 570px;
  width: 100%;
  height: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px;
  top: -5.2rem;
  left: 2.3rem;
  background-color: var(--clr-dark-3);
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/25px 25px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/25px 25px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/25px 25px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/25px 25px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/25px 25px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/25px 25px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/25px 25px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/25px 25px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/25px 25px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/25px 25px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/25px 25px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/25px 25px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/25px 25px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/25px 25px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/25px 25px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/25px 25px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.personality-banner-container .personality-banner .col-pers-frame .pers-img img {
  position: relative;
  width: 100%;
  height: 100%;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/19px 19px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/19px 19px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/19px 19px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/19px 19px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/19px 19px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/19px 19px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/19px 19px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/19px 19px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/19px 19px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/19px 19px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/19px 19px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/19px 19px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/19px 19px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/19px 19px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/19px 19px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/19px 19px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.personality-banner-container .personality-banner .col-pers-frame .pers-img .pers-img-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 40px solid transparent;
  -o-border-image: var(--svg-inverted-border-secondary);
     border-image: var(--svg-inverted-border-secondary);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
}
.personality-banner-container .personality-banner .pers-banner-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--clr-dark-1);
  overflow: clip;
  z-index: 1;
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/27px 27px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/27px 26px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.personality-banner-container .personality-banner .pers-banner-bg .grade {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgba(0, 0, 0, 0)), to(var(--clr-accent-1)));
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 20%, var(--clr-accent-1) 100%);
  mix-blend-mode: soft-light;
  opacity: 0;
  z-index: 4;
}
.personality-banner-container .personality-banner .pers-banner-bg .motif-img {
  position: absolute;
  -webkit-mask: -webkit-gradient(linear, left bottom, left top, color-stop(75%, rgba(0, 0, 0, 0.8235294118)), to(rgba(0, 0, 0, 0))), var(--motif) no-repeat;
  -webkit-mask: linear-gradient(to top, rgba(0, 0, 0, 0.8235294118) 75%, rgba(0, 0, 0, 0) 100%), var(--motif) no-repeat;
          mask: -webkit-gradient(linear, left bottom, left top, color-stop(75%, rgba(0, 0, 0, 0.8235294118)), to(rgba(0, 0, 0, 0))), var(--motif) no-repeat;
          mask: linear-gradient(to top, rgba(0, 0, 0, 0.8235294118) 75%, rgba(0, 0, 0, 0) 100%), var(--motif) no-repeat;
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
  mix-blend-mode: difference;
  background-color: var(--clr-accent-2);
  z-index: 3;
}
.personality-banner-container .personality-banner .pers-banner-bg .el-trees {
  position: absolute;
  width: 800px;
  height: 348px;
  bottom: 3rem;
  left: -3rem;
  background-image: var(--element-trees);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(5%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
          mask-image: -webkit-gradient(linear, left top, right top, color-stop(5%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
          mask-image: linear-gradient(to right, rgb(0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
  -webkit-filter: brightness(50%);
          filter: brightness(50%);
  z-index: 2;
}
.personality-banner-container .personality-banner .pers-banner-bg::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--pattern-grain);
  opacity: 0.8;
  mix-blend-mode: soft-light;
  z-index: 6;
}
.personality-banner-container .personality-banner .pers-banner-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--pattern-noise);
  opacity: 0.3;
  mix-blend-mode: difference;
  z-index: 5;
}
@container (max-width: 820px) {
  .personality-banner-container .personality-banner .banner-within {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, var(--clr-dark-3)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to bottom, var(--clr-dark-3) 50%, rgba(0, 0, 0, 0) 100%);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2.2rem;
    row-gap: var(--row-gap);
    padding: 2rem var(--padding-primary);
    margin-top: 0;
  }
  .personality-banner-container .personality-banner .banner-within .stepped-border {
    display: none;
  }
  .personality-banner-container .personality-banner .banner-within .motif-img {
    -webkit-mask: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8235294118)), color-stop(70%, rgba(0, 0, 0, 0))), var(--motif) no-repeat;
    -webkit-mask: linear-gradient(to top, rgba(0, 0, 0, 0.8235294118) 0%, rgba(0, 0, 0, 0) 70%), var(--motif) no-repeat;
            mask: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8235294118)), color-stop(70%, rgba(0, 0, 0, 0))), var(--motif) no-repeat;
            mask: linear-gradient(to top, rgba(0, 0, 0, 0.8235294118) 0%, rgba(0, 0, 0, 0) 70%), var(--motif) no-repeat;
    -webkit-mask-composite: source-in, xor;
            mask-composite: intersect;
  }
  .personality-banner-container .personality-banner .banner-within::before, .personality-banner-container .personality-banner .banner-within::after {
    -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(60%, rgba(0, 0, 0, 0)));
    -webkit-mask: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%);
            mask: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(60%, rgba(0, 0, 0, 0)));
            mask: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%);
  }
  .personality-banner-container .personality-banner .col-pers-frame {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: unset;
  }
  .personality-banner-container .personality-banner .col-pers-frame .pers-img {
    position: relative;
    top: unset;
    left: unset;
  }
  .personality-banner-container .personality-banner .pers-banner-bg {
    display: none;
  }
  .personality-banner-container .personality-banner::after {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% - 2px);
    height: 100%;
    inset: 0;
    border: 1px solid var(--clr-dark-border-1);
    -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(67%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
    -webkit-mask: linear-gradient(180deg, rgb(0, 0, 0) 67%, rgba(0, 0, 0, 0) 100%);
            mask: -webkit-gradient(linear, left top, left bottom, color-stop(67%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
            mask: linear-gradient(180deg, rgb(0, 0, 0) 67%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
  }
}
.personality-banner-container .pers-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border: 45px solid transparent;
  border-top: none;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.5490196078)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
  z-index: 4;
  pointer-events: none;
}
@container (max-width: 820px) {
  .personality-banner-container {
    border: none;
    padding-top: 0;
  }
  .personality-banner-container::after {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% - 2px);
    height: 100%;
    inset: 0;
    border: 1px solid var(--clr-dark-border-1);
    border-top: none;
    -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
    -webkit-mask: linear-gradient(180deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
            mask: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
            mask: linear-gradient(180deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  }
  .personality-banner-container .pers-frame {
    -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(90%, rgba(0, 0, 0, 0)));
    -webkit-mask: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 90%);
            mask: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(90%, rgba(0, 0, 0, 0)));
            mask: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 90%);
  }
}

section.history {
  margin-top: var(--column-gap);
  margin-bottom: var(--row-gap);
  container-type: inline-size;
}
section.history .col-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--column-gap);
  row-gap: var(--row-gap);
}
section.history .col-wrap .history-sidebar {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 311px;
          flex: 1 1 311px;
  max-height: 750px;
}
section.history .col-wrap .history-sidebar .history-sidebar-inner {
  position: relative;
  height: 100%;
  border: 1px solid var(--clr-dark-border-1);
  border-radius: var(--border-radius-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: clip;
}
section.history .col-wrap .history-sidebar .history-sidebar-inner .sidebar-desc {
  margin-top: -1rem;
  position: relative;
  padding: var(--padding-primary);
  margin-bottom: 0.6rem;
  z-index: 5;
}
section.history .col-wrap .history-sidebar .history-sidebar-inner .sidebar-desc h2 {
  font-size: clamp(1.8em, 1vw + 0.75rem, 2em);
  text-transform: lowercase;
  text-align: justify;
  -moz-text-align-last: justify;
       text-align-last: justify;
  -webkit-filter: url(#inset-shadow);
          filter: url(#inset-shadow);
}
section.history .col-wrap .history-sidebar .history-sidebar-inner .sidebar-desc p {
  font-size: 0.92em;
  color: var(--clr-font-light);
  text-align: justify;
  font-family: var(--font-secondary);
  text-transform: uppercase;
  -moz-text-align-last: justify;
       text-align-last: justify;
}
section.history .col-wrap .history-sidebar .hs-bg {
  position: absolute;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-3);
  border-radius: var(--border-radius-primary);
  overflow: clip;
  -webkit-filter: brightness(0.8);
          filter: brightness(0.8);
}
section.history .col-wrap .history-sidebar .hs-bg .bg-el {
  position: absolute;
  width: 800px;
  height: 348px;
  bottom: -2rem;
  right: -2rem;
  background-image: var(--element-trees);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  -webkit-filter: brightness(80%);
          filter: brightness(80%);
  z-index: 2;
  display: none;
}
section.history .col-wrap .history-sidebar .hs-bg::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: difference;
  opacity: 0.3;
  z-index: 3;
}
section.history .col-wrap .history-sidebar .hs-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 1;
  z-index: 4;
}
section.history .col-wrap .history-sidebar .sidebar-img-wrapper {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 590px;
  z-index: 5;
  overflow: clip;
}
section.history .col-wrap .history-sidebar .s-img {
  position: absolute;
  width: 311px;
  height: 662px;
}
section.history .col-wrap .history-sidebar .s-img.ln {
  z-index: 10;
  -webkit-filter: drop-shadow(0px 1px 1px #000000) brightness(0.8);
          filter: drop-shadow(0px 1px 1px #000000) brightness(0.8);
}
section.history .col-wrap .history-sidebar .s-img.masked {
  -webkit-mask-image: url(https://i.imgur.com/jNBguch.png);
          mask-image: url(https://i.imgur.com/jNBguch.png);
}
section.history .col-wrap .history-sidebar .s-img.mask-base {
  z-index: 5;
}
section.history .col-wrap .history-sidebar .s-img.mask-base img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.history .col-wrap .history-sidebar .s-img.m-a {
  z-index: 6;
  -webkit-mask-image: url(https://i.imgur.com/oKIdCO1.png);
          mask-image: url(https://i.imgur.com/oKIdCO1.png);
  -webkit-backdrop-filter: blur(1px) grayscale(100%);
          backdrop-filter: blur(1px) grayscale(100%);
}
section.history .col-wrap .history-sidebar .s-img.m-b {
  z-index: 7;
  -webkit-mask-image: url(https://i.imgur.com/oKIdCO1.png);
          mask-image: url(https://i.imgur.com/oKIdCO1.png);
  background: var(--clr-accent-2);
  mix-blend-mode: soft-light;
  opacity: 0.5;
}
section.history .col-wrap .history-sidebar .s-img.m-c {
  z-index: 8;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, var(--clr-dark-2)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, var(--clr-dark-2) 10%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: overlay;
}
section.history .col-wrap .history-sidebar .s-img.m-d {
  z-index: 9;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
}
section.history .col-wrap .history-body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 65%;
          flex: 1 1 65%;
  overflow: clip;
  border: 1px solid var(--clr-dark-border-1);
  border-radius: var(--border-radius-primary);
  max-height: 750px;
  overflow: auto;
}
section.history .col-wrap .history-body hr {
  margin-block: 1.1rem;
}
section.history .col-wrap .history-body-inner {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  color: var(--clr-font-light-secondary);
  background-color: #0e0e0e;
  padding: var(--padding-primary);
  padding-top: 8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 2;
}
section.history .col-wrap .history-body-inner .text-within {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
  padding-inline: var(--padding-primary);
}
section.history .col-wrap .history-body-inner .decorative-frame {
  position: absolute;
  width: calc(100% - 12px);
  height: 200px;
  top: 5px;
  z-index: 1;
  padding: 10px;
  overflow: clip;
  -webkit-mask: radial-gradient(ellipse farthest-corner at center bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%), -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: radial-gradient(ellipse farthest-corner at center bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(#000 0 0);
          mask: radial-gradient(ellipse farthest-corner at center bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%), -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: radial-gradient(ellipse farthest-corner at center bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
section.history .col-wrap .history-body-inner .decorative-frame .motif-img {
  position: relative;
  background-color: var(--clr-accent-1);
}
section.history .col-wrap .history-body-inner .decorative-frame .stepped-frame {
  width: 100%;
  height: 100%;
  inset: 0;
  -webkit-filter: drop-shadow(0px 1px 0px #020202) drop-shadow(0px -2px 0px #020202);
          filter: drop-shadow(0px 1px 0px #020202) drop-shadow(0px -2px 0px #020202);
}
section.history .col-wrap .history-body-inner::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: difference;
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
  display: none;
}
section.history .col-wrap .history-body-inner::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: soft-light;
  opacity: 0.8;
  z-index: 2;
  pointer-events: none;
}
@container (max-width: 770px) {
  section.history .col-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  section.history .col-wrap .history-sidebar {
    -webkit-box-flex: unset;
        -ms-flex: unset;
            flex: unset;
  }
  section.history .col-wrap .history-sidebar .history-sidebar-inner {
    padding: var(--padding-primary);
  }
  section.history .col-wrap .history-sidebar .sidebar-img-wrapper {
    display: none;
  }
  section.history .col-wrap .history-body-inner .text-within {
    margin-bottom: unset;
  }
}
section.history .history-section-title {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--column-gap);
  text-align: center;
}
section.history .history-section-title hgroup {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
section.history .history-section-title hgroup h1 {
  width: 100%;
  position: absolute;
  color: var(--clr-accent-3);
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(90%, rgba(0, 0, 0, 0)));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 90%);
          mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(90%, rgba(0, 0, 0, 0)));
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 90%);
  font-size: 4.7em;
  z-index: 1;
  bottom: 1.5rem;
  -webkit-filter: url(#inset-shadow);
          filter: url(#inset-shadow);
}
section.history .history-section-title hgroup h2 {
  position: relative;
  font-weight: 900;
  text-transform: lowercase;
  font-style: oblique;
  font-size: clamp(2.2em, 1vw + 0.75rem, 3.5em);
  z-index: 2;
}
section.history .history-section-title hgroup h4 {
  position: relative;
  z-index: 2;
}
@container (max-width: 770px) {
  section.history .history-section-title hgroup {
    margin-top: 1rem;
  }
}
section.history .history-section-title:not(:first-of-type) {
  margin-top: 3rem;
}
section.history .icon-100px {
  margin-bottom: 3.3rem;
}

section.directory {
  margin-top: var(--column-gap);
}
section.directory .dir-wrap {
  position: relative;
  width: 100%;
  padding: 6px;
  border: 1px solid var(--clr-dark-border-1);
  border-radius: 0 0 var(--border-radius-primary) var(--border-radius-primary);
  border-top: none;
}
section.directory .dir-wrap .dir-inner {
  position: relative;
  width: 100%;
  min-height: 220px;
  padding: 2.7rem var(--padding-primary);
  border: 1px solid var(--clr-dark-border-1);
  background-color: rgba(0, 0, 0, 0.2039215686);
  border-radius: var(--border-radius-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
}
section.directory .dir-wrap .dir-inner .dir-radial {
  position: absolute;
  width: 90%;
  height: 200px;
  -webkit-mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0) 100%);
  -webkit-mask-size: 100% auto;
          mask-size: 100% auto;
  background-color: var(--clr-accent-2);
  top: -3rem;
  opacity: 0.6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
section.directory .dir-wrap .dir-inner .dir-radial::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: var(--element-glint);
  background-position: left 3rem top 0;
  -webkit-mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 10%, hsla(0, 0%, 0%, 0) 100%);
          mask: radial-gradient(ellipse farthest-side at center top, hsl(0, 0%, 0%) 10%, hsla(0, 0%, 0%, 0) 100%);
  mix-blend-mode: overlay;
  opacity: 0.3;
}
section.directory .dir-wrap .directory-container {
  position: relative;
  max-width: 618px;
  width: 100%;
  min-height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px;
}
section.directory .dir-wrap .directory-container .dir-top {
  position: relative;
  width: 100%;
  height: 150px;
  border-bottom: 1px solid var(--clr-dark-border-1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2px;
  padding-top: 0;
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/19px 19px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/18px 18px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/19px 19px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/18px 18px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/19px 19px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/18px 18px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/19px 19px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/18px 18px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
section.directory .dir-wrap .directory-container .dir-top img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.directory .dir-wrap .directory-container .dir-body {
  position: relative;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 1rem var(--padding-primary);
  background-color: var(--clr-light-1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--column-gap);
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/18px 18px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/18px 18px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/18px 18px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/18px 18px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 3;
}
section.directory .dir-wrap .directory-container .dir-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border: 30px solid transparent;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.9529411765)) drop-shadow(1px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.9529411765)) drop-shadow(1px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
  z-index: 2;
}
section.directory .dir-wrap .directory-container .list-unit {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 230px;
          flex: 1 0 230px;
}
section.directory .dir-wrap .directory-container .list-unit .stepped-frame {
  -webkit-filter: drop-shadow(0px 1px 0px rgba(128, 128, 128, 0.4941176471));
          filter: drop-shadow(0px 1px 0px rgba(128, 128, 128, 0.4941176471));
}

/* ! ------------------------------- 
            Tab 3
------------------------------------ ! */
section.verses {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 3rem;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 2rem var(--padding-box);
}

.verse-unit {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 380px;
          flex: 1 1 380px;
  position: relative;
  max-width: 490px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  container-type: inline-size;
}
.verse-unit .verse-unit-inner {
  position: relative;
  width: calc(100% - 12px);
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/15px 15px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/15px 15px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/15px 15px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/15px 15px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/15px 15px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/15px 15px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/15px 15px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/15px 15px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 5;
  margin-top: 5px;
}
.verse-unit .verse-unit-inner .verse-img, .verse-unit .verse-unit-inner .verse-info {
  position: relative;
  z-index: 2;
}
.verse-unit .verse-unit-inner .verse-img {
  width: 50%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 45%;
          flex: 1 1 45%;
  padding-bottom: 1.1rem;
  -webkit-filter: drop-shadow(0px 1px 1px rgba(49, 49, 49, 0.3137254902)) drop-shadow(0px 1px 1px rgba(17, 17, 17, 0.862745098));
          filter: drop-shadow(0px 1px 1px rgba(49, 49, 49, 0.3137254902)) drop-shadow(0px 1px 1px rgba(17, 17, 17, 0.862745098));
}
.verse-unit .verse-unit-inner .verse-img .v-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.verse-unit .verse-unit-inner .verse-img .v-img-wrap::after {
  content: "";
  display: block;
  position: absolute;
  width: 55px;
  height: 33px;
  border-top: 1px solid var(--clr-dark-border-1);
  border-radius: 10rem 10rem 0 0;
  justify-self: center;
  bottom: -7px;
  z-index: 6;
  -webkit-filter: drop-shadow(0px -2px 2px rgba(0, 0, 0, 0.9529411765)) brightness(150%);
          filter: drop-shadow(0px -2px 2px rgba(0, 0, 0, 0.9529411765)) brightness(150%);
}
.verse-unit .verse-unit-inner .verse-img .v-img-within {
  position: relative;
  max-width: 190px;
  width: 100%;
  height: 370px;
  padding: 0 14px 14px 14px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(27%, rgba(0, 0, 0, 0.726)), color-stop(81%, rgba(0, 0, 0, 0)));
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.726) 27%, rgba(0, 0, 0, 0) 81%);
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/23px 23px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/23px 23px no-repeat, var(--svg-circle) bottom -2rem right 50%/55px 57px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/23px 23px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/23px 23px no-repeat, var(--svg-circle) bottom -2rem right 50%/55px 57px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/23px 23px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/23px 23px no-repeat, var(--svg-circle) bottom -2rem right 50%/55px 57px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/23px 23px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/23px 23px no-repeat, var(--svg-circle) bottom -2rem right 50%/55px 57px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.verse-unit .verse-unit-inner .verse-img .v-img-within .img-holder {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--clr-dark-2);
  --size: 19px 19px;
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/var(--size) no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/var(--size) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/var(--size) no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/var(--size) no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/var(--size) no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/var(--size) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/var(--size) no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/var(--size) no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  overflow: clip;
  -webkit-filter: drop-shadow(-1px 1px 1px #000000);
          filter: drop-shadow(-1px 1px 1px #000000);
}
.verse-unit .verse-unit-inner .verse-img .v-img-within .img-holder img {
  height: 100%;
  width: 100%;
  position: relative;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  -webkit-filter: grayscale(1) brightness(60%);
          filter: grayscale(1) brightness(60%);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.verse-unit .verse-unit-inner .verse-img .v-img-within .img-holder::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--clr-accent-1)), color-stop(60%, rgba(0, 0, 0, 0)));
  background: linear-gradient(0deg, var(--clr-accent-1) 0%, rgba(0, 0, 0, 0) 60%);
  z-index: 2;
  mix-blend-mode: lighten;
  opacity: 0.9;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.verse-unit .verse-unit-inner .verse-img .v-img-within .img-holder::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--pattern-noise);
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(20%, #000), to(rgba(0, 0, 0, 0)));
  -webkit-mask-image: linear-gradient(0deg, #000 20%, rgba(0, 0, 0, 0) 100%);
          mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(20%, #000), to(rgba(0, 0, 0, 0)));
          mask-image: linear-gradient(0deg, #000 20%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.4;
  z-index: 4;
  mix-blend-mode: darken;
}
.verse-unit .verse-unit-inner .verse-img .v-img-within .img-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 38px solid transparent;
  border-top: none;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.8235294118)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.662745098)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.8235294118)) drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.662745098)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961));
  inset: 0;
  z-index: 5;
}
.verse-unit .verse-unit-inner .verse-info {
  position: relative;
  width: 50%;
  max-height: 300px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  overflow: auto;
  padding-block: 2rem;
}
.verse-unit .verse-unit-inner .verse-info .verse-title {
  position: relative;
  margin-bottom: 6px;
}
.verse-unit .verse-unit-inner .verse-info hgroup {
  -webkit-filter: drop-shadow(5px 5px 10px #000000);
          filter: drop-shadow(5px 5px 10px #000000);
}
.verse-unit .verse-unit-inner .verse-info hr {
  margin-bottom: 8px;
}
.verse-unit .verse-unit-inner .verse-info .info-inner {
  padding: 1.2rem;
}
.verse-unit .verse-unit-inner .v-bg {
  position: absolute;
  width: 100%;
  height: calc(100% + 3px);
  bottom: 0;
  -webkit-filter: brightness(90%);
          filter: brightness(90%);
  background-color: var(--clr-dark-1);
  background-image: linear-gradient(190deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.126) 36%), linear-gradient(30deg, rgba(53, 53, 53, 0.7) 30%, rgba(0, 0, 0, 0.5) 90%);
  overflow: clip;
  z-index: 1;
}
.verse-unit .verse-unit-inner .v-bg::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: darken;
  opacity: 0.6;
}
.verse-unit .verse-unit-inner .v-bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 800px;
  height: 348px;
  bottom: -2rem;
  left: -10rem;
  background-image: var(--element-trees);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  rotate: 5deg;
  -webkit-mask-image: linear-gradient(243deg, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 50%);
          mask-image: linear-gradient(243deg, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 50%);
  -webkit-filter: brightness(50%);
          filter: brightness(50%);
}
.verse-unit .verse-footer {
  position: relative;
  width: calc(100% - 14px);
  border-top: 1px solid var(--clr-dark-border-1);
  z-index: 5;
  padding: 12px 14px;
  margin-bottom: 6px;
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/16px 16px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/15px 15px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/16px 16px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/15px 15px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/16px 16px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/15px 15px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/16px 16px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/15px 15px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.verse-unit .verse-footer .vf-within {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--column-gap);
  z-index: 3;
}
.verse-unit .verse-footer::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-1);
  opacity: 0.1;
  z-index: 1;
}
.verse-unit .verse-footer::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  opacity: 0.1;
  z-index: 2;
}
.verse-unit .v-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 30px solid transparent;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.9529411765)) drop-shadow(1px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.9529411765)) drop-shadow(1px -1px 0px rgba(0, 0, 0, 0.5333333333)) drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.5254901961)) drop-shadow(0px 1px 0px rgba(65, 65, 65, 0.1843137255));
  z-index: 3;
}
.verse-unit:hover .verse-unit-inner .verse-img .v-img-within .img-holder img {
  -webkit-filter: grayscale(0) brightness(100%);
          filter: grayscale(0) brightness(100%);
}
.verse-unit:hover .verse-unit-inner .verse-img .v-img-within .img-holder::after {
  opacity: 0.5;
}
@container (max-width: 455px) {
  .verse-unit .verse-unit-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: none;
  }
  .verse-unit .verse-unit-inner .verse-img {
    width: 100%;
    padding: clamp(0.938rem, 1vw + 1rem, var(--padding-primary));
  }
  .verse-unit .verse-unit-inner .verse-img .v-img-wrap::after {
    bottom: -8px;
  }
  .verse-unit .verse-unit-inner .verse-img .v-img-within {
    max-width: 300px;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: none;
    -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/23px 23px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/23px 23px no-repeat, var(--svg-circle) bottom -1.9rem right 50%/55px 57px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
    -webkit-mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/23px 23px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/23px 23px no-repeat, var(--svg-circle) bottom -1.9rem right 50%/55px 57px no-repeat, linear-gradient(#000 0 0);
            mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/23px 23px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/23px 23px no-repeat, var(--svg-circle) bottom -1.9rem right 50%/55px 57px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
            mask: url(https://i.imgur.com/mnl5Dtd.png) bottom left/23px 23px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/23px 23px no-repeat, var(--svg-circle) bottom -1.9rem right 50%/55px 57px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
  .verse-unit .verse-unit-inner .verse-img .v-img-within .img-holder {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/23px 23px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/23px 24px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/24px 24px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/24px 24px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
    -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/23px 23px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/23px 24px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/24px 24px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/24px 24px no-repeat, linear-gradient(#000 0 0);
            mask: url(https://i.imgur.com/LMxH72D.png) top left/23px 23px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/23px 24px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/24px 24px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/24px 24px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
            mask: url(https://i.imgur.com/LMxH72D.png) top left/23px 23px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/23px 24px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/24px 24px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/24px 24px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
  .verse-unit .verse-unit-inner .verse-img .v-img-within .img-frame {
    border-top: unset;
    border: 38px solid transparent;
    -o-border-image: var(--svg-inverted-border);
       border-image: var(--svg-inverted-border);
    border-image-slice: 21%;
  }
  .verse-unit .verse-unit-inner .verse-info {
    background-image: linear-gradient(195deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.705) 100%);
    width: 100%;
    max-height: unset;
    padding-block: unset;
  }
  .verse-unit .verse-unit-inner .verse-info hgroup.svg-centered {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    text-align: left;
    gap: var(--column-gap);
  }
  .verse-unit .verse-unit-inner .verse-info hgroup.svg-centered svg {
    top: unset;
    position: relative;
    width: 40px;
  }
  .verse-unit .verse-unit-inner .v-bg {
    background-image: linear-gradient(190deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.226) 36%), linear-gradient(10deg, rgba(53, 53, 53, 0.623) 0%, rgba(0, 0, 0, 0) 56%);
  }
}

/* ! ------------------------------- 
            Tab 4
------------------------------------ ! */
section.connections {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-column-gap: 3rem;
     -moz-column-gap: 3rem;
          column-gap: 3rem;
  row-gap: 3rem;
  padding: 2rem var(--padding-box);
  margin-bottom: 2rem;
}

.connection-unit {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 350px;
          flex: 1 1 350px;
  position: relative;
  max-width: 470px;
  width: 100%;
  height: 262px;
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/18px 18px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/18px 18px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/18px 18px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/18px 18px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/18px 18px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/18px 18px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/18px 18px no-repeat, url(https://i.imgur.com/mnl5Dtd.png) bottom left/18px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/18px 18px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  overflow: clip;
}
.connection-unit a, .connection-unit a:hover, .connection-unit a:focus {
  color: var(--clr-font-light-secondary);
  text-decoration: none;
}
.connection-unit .cu-inner {
  position: relative;
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  padding: var(--padding-primary);
  padding-bottom: 1.2rem;
  display: grid;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  z-index: 7;
  overflow: clip;
}
.connection-unit .cu-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--column-gap);
  opacity: 1;
}
.connection-unit .cu-title hgroup {
  -ms-flex-item-align: center;
      align-self: center;
}
.connection-unit .cu-title hgroup h4 {
  line-height: 0.9;
}
.connection-unit .cu-title hgroup h2 {
  line-height: 0.9;
}
.connection-unit .cu-title hgroup p {
  font-style: italic;
  line-height: 0.8;
  font-size: 0.85em;
}
.connection-unit .cu-img {
  position: absolute;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border-radius: var(--border-radius-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  z-index: 2;
  background-color: var(--clr-dark-1);
  overflow: clip;
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/19px 19px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/19px 19px no-repeat, linear-gradient(#000 0 0);
          mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/19px 19px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: url(https://i.imgur.com/LMxH72D.png) top left/18px 18px no-repeat, url(https://i.imgur.com/8pZPRJ9.png) top right/20px 18px no-repeat, url(https://i.imgur.com/w3gWYQs.png) bottom right/19px 19px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.connection-unit .cu-img .img-holder {
  position: relative;
  width: 90%;
  height: 100%;
  z-index: 3;
  -webkit-mask-image: linear-gradient(257deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 75%);
          mask-image: linear-gradient(257deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 75%);
}
.connection-unit .cu-img .img-holder::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--clr-dark-2);
  z-index: 2;
  mix-blend-mode: lighten;
  opacity: 1;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.connection-unit .cu-img::before {
  content: "";
  display: block;
  position: absolute;
  width: 200%;
  height: 200%;
  background: var(--element-trees) no-repeat;
  background-position: bottom 15rem left -0.1rem;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  mix-blend-mode: multiply;
  -webkit-filter: brightness(70%);
          filter: brightness(70%);
  left: -15rem;
  z-index: 1;
}
.connection-unit .cu-img::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  mix-blend-mode: difference;
  opacity: 0.3;
  z-index: 2;
}
.connection-unit::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  z-index: 4;
  mix-blend-mode: difference;
  opacity: 0.23;
}
.connection-unit::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: linear-gradient(10deg, var(--clr-dark-1) 5%, rgba(0, 0, 0, 0) 80%);
  z-index: 3;
  -webkit-filter: brightness(30%);
          filter: brightness(30%);
}
.connection-unit .txt-btn-sm {
  padding-right: 1.5rem;
  font-size: 0.87em;
  text-transform: uppercase;
}
.connection-unit .txt-btn-sm i {
  margin-left: 0.8rem;
}
.connection-unit .icon-btn-md {
  position: relative;
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--clr-light-1)), to(var(--clr-accent-2)));
  background-image: linear-gradient(0deg, var(--clr-light-1) 0%, var(--clr-accent-2) 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
}
.connection-unit .icon-btn-md::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
.connection-unit .icon-btn-md svg, .connection-unit .icon-btn-md i {
  -webkit-filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.5411764706));
          filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.5411764706));
}
.connection-unit hr {
  margin-block: 0.5rem;
}
.connection-unit img {
  width: 100%;
  height: 100%;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.connection-unit:hover img, .connection-unit:focus img {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
.connection-unit:hover .cu-img .img-holder::after, .connection-unit:focus .cu-img .img-holder::after {
  opacity: 0;
}
.connection-unit .cu-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  border: 30px solid transparent;
  -o-border-image: var(--svg-inverted-border);
     border-image: var(--svg-inverted-border);
  border-image-slice: 21%;
  -webkit-filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.9529411765)) drop-shadow(1px -1px 0px rgba(0, 0, 0, 0.5333333333));
          filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.9529411765)) drop-shadow(1px -1px 0px rgba(0, 0, 0, 0.5333333333));
  z-index: 6;
}

/* ! ------------------------------- 
             Frame & Aside
------------------------------------ ! */
.body-frame {
  position: fixed;
  z-index: 100;
  --primary-value: 8px;
}
.body-frame .frame-inline {
  position: fixed;
  width: var(--primary-value);
  top: var(--primary-value);
  bottom: var(--primary-value);
  -webkit-backdrop-filter: brightness(20%) blur(2px);
          backdrop-filter: brightness(20%) blur(2px);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
.body-frame .frame-inline.left {
  left: 0;
  border-right: 1px solid var(--clr-dark-border-2);
}
.body-frame .frame-inline.right {
  right: 0;
  border-left: 1px solid var(--clr-dark-border-2);
}
.body-frame .frame-block {
  position: fixed;
  height: var(--primary-value);
  -webkit-backdrop-filter: brightness(20%) blur(2px);
          backdrop-filter: brightness(20%) blur(2px);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
.body-frame .frame-block.top {
  left: 0;
  right: 0;
  top: 0;
  border-bottom: 1px solid var(--clr-dark-border-2);
}
.body-frame .frame-block.bottom {
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--clr-dark-border-2);
}

aside.blog-info {
  position: fixed;
  width: 44px;
  height: calc(100dvh - 16px);
  top: 8px;
  background-color: #050505;
  border-left: 1px solid var(--clr-dark-border-2);
  padding: 0 0.9rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  overflow: clip;
  right: 8px;
  z-index: 99;
}
aside.blog-info .blog-icon {
  width: 42px;
  height: 42px;
  background-color: var(--clr-dark-1);
  border: 1px solid var(--clr-dark-border-1);
  border-radius: var(--border-radius-primary);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
  padding: 4px;
  opacity: 1;
}
aside.blog-info .blog-icon .icon-within {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
  border-radius: var(--border-radius-primary);
}
aside.blog-info .blog-icon .icon-within img {
  position: relative;
  width: 50px;
  height: auto;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  -o-object-position: center;
     object-position: center;
  -webkit-filter: brightness(80%);
          filter: brightness(80%);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
aside.blog-info .blog-icon:hover .icon-within img {
  -webkit-filter: brightness(1);
          filter: brightness(1);
}
aside.blog-info .aside-desc {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-size: 0.75em;
  text-align: center;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  background-color: #101010;
  border: 1px solid #040404;
  border-radius: var(--border-radius-primary);
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.479);
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  padding: 1rem 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 1500px) {
  .body-frame, aside.blog-info {
    display: none;
  }
}
/* ! ------------------------------- 
            Music Player
------------------------------------ ! */
.music-player-container {
  position: relative;
  background-color: var(--clr-dark-1);
  border: 1px solid var(--clr-dark-border-1);
  border-radius: var(--border-radius-primary);
  cursor: pointer;
  text-transform: uppercase;
  padding: var(--padding-box);
  margin: 0.5rem 0 var(--row-gap) 0;
  overflow: clip;
}
.music-player-container .mp-inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: 12px;
     -moz-column-gap: 12px;
          column-gap: 12px;
  row-gap: 16px;
  z-index: 2;
}
.music-player-container .mp-a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 60%;
          flex: 1 0 60%;
}
.music-player-container .mp-a .play_button {
  position: relative;
  width: 45px;
  height: 45px;
  background-color: var(--clr-accent-2);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(20%, var(--clr-accent-3)), to(var(--clr-accent-1)));
  background-image: linear-gradient(0deg, var(--clr-accent-3) 20%, var(--clr-accent-1) 100%);
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  -webkit-transition: 0.7s ease;
  transition: 0.7s ease;
}
.music-player-container .mp-a .play_button::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}
.music-player-container .mp-a .play_button svg, .music-player-container .mp-a .play_button i {
  -webkit-filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.5411764706));
          filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.5411764706));
}
.music-player-container .mp-a .play_button i {
  position: absolute;
  font-size: 10px;
  color: var(--clr-font-light-secondary);
}
.music-player-container .mp-a .play_button i.fa-play {
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.music-player-container .mp-a .play_button i.fa-pause {
  opacity: 1;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.music-player-container .mp-a .play_button:hover {
  background-color: var(--clr-accent-1);
}
.music-player-container .mp-a .play_button.pause i.fa-play {
  opacity: 1;
}
.music-player-container .mp-a .play_button.pause i.fa-pause {
  opacity: 0;
}
.music-player-container .mp-a .mp-audio-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.music-player-container .mp-b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 0;
          flex: 1 0;
}
.music-player-container .song_slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.8em;
  gap: 0.5rem;
  width: 100%;
  -webkit-transition: 0.7s ease;
  transition: 0.7s ease;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.music-player-container .seek_bar {
  -webkit-appearance: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 2px;
  border-radius: 10px;
  background: grey;
  overflow: hidden;
  cursor: pointer;
}
.music-player-container h3.song-title {
  font-size: 0.8em;
}
.music-player-container h3.artist {
  font-weight: 500;
  font-size: 0.78em;
  color: var(--clr-font-medium);
}
.music-player-container::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-noise);
  opacity: 0.2;
  -webkit-filter: brightness(90%);
          filter: brightness(90%);
  z-index: 1;
}

/* ! ------------------------------- 
        Scroll to Top Button
------------------------------------ ! */
#scrolltop {
  position: fixed;
  padding: 6px;
  font-size: 12px;
  color: var(--clr-font-light-secondary);
  background-color: var(--clr-accent-2);
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--clr-light-1)), to(var(--clr-accent-2)));
  background-image: linear-gradient(0deg, var(--clr-light-1) 0%, var(--clr-accent-2) 100%);
  border: 1px solid var(--clr-accent-1);
  border-radius: var(--border-radius-primary);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  bottom: 2%;
  right: 1.2rem;
  z-index: 110;
  overflow: clip;
}
#scrolltop::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-image: var(--pattern-grain);
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
#scrolltop i {
  -webkit-filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.5411764706));
          filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.5411764706));
}

@media screen and (max-width: 900px) {
  #scrolltop {
    right: 1rem;
    bottom: 0.7rem;
  }
}
/* ! ------------------------------- 
           Info/Credits 
------------------------------------ ! */
#infohover {
  position: fixed;
  width: 30px;
  height: 30px;
  color: white;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
  bottom: 12px;
  left: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0.3;
  z-index: 100;
  -webkit-transition: 0.7s ease;
  transition: 0.7s ease;
}
#infohover svg {
  fill: var(--clr-light-2);
}

#infohover:hover {
  opacity: 9;
}

#infotab {
  position: fixed;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-size: 11px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  bottom: 10px;
  left: 50px;
  z-index: 100;
  padding: 8px 6px;
  padding-top: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: none;
}
#infotab img {
  -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5)) drop-shadow(5px 5px 10px #000000) grayscale(1);
          filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5)) drop-shadow(5px 5px 10px #000000) grayscale(1);
}

@media screen and (max-width: 700px) {
  #infohover {
    bottom: 3px;
    left: 3px;
  }
}
/* ! ------------------------------- 
         Tooltips
------------------------------------ ! */
.tippy-tooltip.custom-theme {
  padding: 8px 12px;
  font-family: var(--font-secondary);
  font-size: 0.85em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  border-radius: var(--border-radius-primary);
  color: var(--clr-font-light);
  background-color: var(--clr-dark-2);
  border: 1px solid var(--clr-dark-border-1);
  -webkit-filter: drop-shadow(1px 1px 2px rgba(17, 17, 17, 0.2));
          filter: drop-shadow(1px 1px 2px rgba(17, 17, 17, 0.2));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition-timing-function: scale-subtle;
          transition-timing-function: scale-subtle;
}

/* ! ------------------------------ 
            Animations
------------------------------ ! */
@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hidden {
  opacity: 0;
  -webkit-transition: 1.5s ease;
  transition: 1.5s ease;
}

.hiddentop {
  opacity: 0;
  -webkit-transform: translatey(30px);
          transform: translatey(30px);
  -webkit-transition: 0.9s ease;
  transition: 0.9s ease;
}

.show {
  opacity: 1;
  -webkit-transform: translatey(0);
          transform: translatey(0);
}

@media screen and (max-width: 1500px) {
  .hiddentop {
    opacity: 0;
    -webkit-transform: translatey(0);
            transform: translatey(0);
    -webkit-transition: 0.9s ease;
    transition: 0.9s ease;
  }
  .show {
    opacity: 1;
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
}
/* ! ------------------------------- 
            Color Utilities
------------------------------------ ! */
.bg-l1 {
  background-color: var(--clr-light-1);
}

.bg-d1 {
  background-color: var(--clr-dark-1);
}

.bg-d2 {
  background-color: var(--clr-dark-2);
}

.bg-a1 {
  background-color: var(--clr-accent-1);
}

.bg-a2 {
  background-color: var(--clr-accent-2);
}

.bg-a3 {
  background-color: var(--clr-accent-3);
}

/* ! ------------------------------- 
            Text Utilities
------------------------------------ ! */
.larger {
  font-size: 1.2em;
}

.ff-heading {
  font-family: var(--font-heading);
}

mark {
  background-color: var(--clr-accent-2);
  color: var(--clr-font-light-secondary);
  padding: 1px 6px;
  line-height: 1;
  border-radius: var(--border-radius-primary);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.clr-light {
  color: var(--clr-font-light);
}

.clr-a1 {
  color: var(--clr-accent-1);
}

.clr-a2 {
  color: var(--clr-accent-2);
}

.underline {
  border-bottom: 1px solid var(--clr-light-border);
}/*# sourceMappingURL=plexure-hakan-stylesheet.css.map */