:root {
    --basecolor-black: hsl(0, 9%, 13%);
    --basecolor-black_60: hsla(0, 9%, 13%, 0.6);
    --basecolor-white: hsl(187, 72%, 93%);
    --basecolor-white_90: hsla(187, 72%, 93%, 0.9);
    --basecolor-truegrey: 216, 9%, 7%;
    --greyscolors-90: hsl(216, 9%, 10%);
    --greyscolors-80: hsl(216, 9%, 20%);
    --greyscolors-65: hsl(216, 9%, 45%);
    --greyscolors-50: hsl(216, 9%, 50%);
    --greyscolors-35: hsl(216, 9%, 65%);
    --greyscolors-25: hsl(216, 9%, 75%);
    --greyscolors-15: hsl(216, 9%, 85%);
    --greyscolors-05: hsl(216, 9%, 95%);
    --brandcolor-primary: hsl(187, 63%, 70%);
    --brandcolor-primary_dark: hsl(187, 63%, 40%);
    --brandcolor-primary_light: hsl(187, 63%, 90%);
    --brandcolor-primary_light_two: hsl(187, 63%, 70%);
    --brandcolor-primary_50: hsla(187, 63%, 70%, 0.5);
    --brandcolor-primary_10: hsla(187, 63%, 70%, 0.1);
    --brandcolor-secondary: hsl(32, 74%, 58%);
    --brandcolor-secondary_light: hsl(32, 74%, 89%);
    --brandcolor-secondary_60: hsla(32, 74%, 58%, 0.6);
    --brandcolor-complementary: hsl(5, 45%, 44%);
    --brandcolor-complementary_light: hsl(5, 45%, 79%);
    --brandcolor-complementary_60: hsla(5, 45%, 44%, 0.6);
    --brandcolor-complementary_15: hsla(5, 45%, 44%, 0.15);
    --systemcolor-error: hsl(5, 45%, 55%);
    --systemcolor-error_light: hsl(5, 46%, 65%);
    --systemcolor-error_dark: hsl(5, 46%, 35%);
    --systemcolor-success: hsl(129, 63%, 70%);
    --systemcolor-success_light: hsl(129, 63%, 87%);
    --numbers_000: 0;
    --numbers_025: 4;
    --numbers_050: 8;
    --numbers_075: 12;
    --numbers_100: 16;
    --numbers_125: 20;
    --numbers_150: 24;
    --numbers_175: 28;
    --numbers_200: 32;
    --numbers_250: 40;
    --numbers_300: 48;
    --numbers_350: 56;
    --numbers_400: 64;
    --numbers_500: 80;
    --rem_012: 0.125rem;
    --rem_025: 0.25rem;
    --rem_050: 0.5rem;
    --rem_062: 0.625rem;
    --rem_075: 0.75rem;
    --rem_087: 0.875rem;
    --rem_100: 1rem;
    --rem_112: 1.125rem;
    --rem_125: 1.25rem;
    --rem_150: 1.5rem;
    --rem_175: 1.75rem;
    --rem_200: 2rem;
    --rem_250: 2.5rem;
    --rem_300: 3rem;
    --rem_350: 3.5rem;
    --rem_400: 4rem;
    --rem_500: 5rem;
    --fontfamily-primary: "Oxanium", sans-serif;
    --fontfamily-secondary: "Roboto Mono", sans-serif;
    --main-background: var(--basecolor-black);
    --text-clr-primary: var(--basecolor-white_90);
    --text-clr-primary_25: var(--greyscolors-25);
    --text-clr-primary_50: var(--greyscolors-50);
    --text-clr-primary_effects: var(--brandcolor-primary);
    --text-clr-primary_hover: var(--brandcolor-secondary);
    --text-clr-link_primary: var(--brandcolor-primary_light);
    --text-clr-link_secondary: var(--brandcolor-complementary_light);
    --text-clr-secondary: var(--baseColor-Black);
    --text-clr-hover: var(--brandcolor-secondary); 
    --text-clr-hover_secondary: var(--brandcolor-primary_light_two); 
    --text-clr-error: var(--systemcolor-error);
    --text-clr-error_primary: var(--systemcolor-error_light);
    --text-clr-error_effects: var(--systemcolor-error);
    --text-clr-success: var(--systemcolor-success);
    --text-clr-success_primary: var(--systemcolor-success_light);
    --text-clr-success_effects: var(--systemcolor-success);
    --text-family_headers: var(--fontfamily-primary);
    --text-family_body: var(--fontfamily-secondary);
    --text-size_100: var(--rem_050);
    --text-size_200: var(--rem_062);
    --text-size_300: var(--rem_075);
    --text-size_350: var(--rem_087);
    --text-size_400: var(--rem_100);
    --text-size_450: var(--rem_112);
    --text-size_500: var(--rem_125);
    --text-size_600: var(--rem_150);
    --text-size_650: var(--rem_175);
    --text-size_700: var(--rem_200);
    --text-size_800: var(--rem_250);
    --text-size_900: var(--rem_300);
    --text-size_1000: var(--rem_400);
    --text-weight_light: 300;
    --text-weight_regular: 400;
    --text-weight_medium: 500;
    --text-weight_semibold: 600;
    --text-weight_bold: 700;
    --spacing-xxs: var(--rem_025);
    --spacing-xs: var(--rem_050);
    --spacing-s: var(--rem_075);
    --spacing-n: var(--rem_100);
    --spacing-n_25: var(--rem_125);
    --spacing-m: var(--rem_200);
    --spacing-l: var(--rem_400);
    --spacing-xl: var(--rem_500);
    --text-spacing-xxs: var(--rem_012);
    --text-spacing-xs: var(--rem_025);
    --text-spacing-s: var(--rem_050);
    --text-spacing-n: var(--rem_087);
    --text-spacing-m: var(--rem_100);
    --text-spacing-l: var(--rem_125);
    --text-spacing-xl: var(--rem_150);
    --text-spacing-xxl: var(--rem_175);
    --icon-size-m: var(--rem_200);
    --icon-size-s: var(--rem_150);
    --icon-size-xs: var(--rem_100);
    --icon-clr_light: var(--basecolor-white);
    --icon-clr_dark: var(--greyscolors-65);
    --icon-clr_error: var(--systemcolor-error);
    --icon-clr_success: var(--systemcolor-success);
    --containers-clr-bg-primary: var(--basecolor-black_60);
    --containers-clr-bg-brand-primary: var(--brandcolor-primary_10);
    --containers-clr-bg-brand-terciary: var(--brandcolor-secondary_60);
    --containers-clr-bg-brand-complementary: var(--brandcolor-complementary_15);
    --containers-clr-bg-footer: var(--greyscolors-90);
    --containers-clr-border-primary: var(--brandcolor-primary_light);
    --containers-clr-border-terciary: var(--brandcolor-secondary_light);
    --containers-spacing-padding_xxsmall: var(--rem_025);
    --containers-spacing-padding_xsmall: var(--rem_050);
    --containers-spacing-padding_small: var(--rem_075);
    --containers-spacing-padding_normal: var(--rem_100);
    --header-nav_spacing: 2rem;
    --footer-bg-primary: var(--basecolor-black);
    --popups-clr-bg: var(--basecolor-black_60);
    --popups-clr-ui-bg: var(--basecolor-black_60);
    --popups-clr-fg: var(--brandcolor-primary_light);
    --popups-clr-success: var(--systemcolor-success);
    --popups-clr-error: var(--systemcolor-error);
    --button-clr-background-primary: var(--brandcolor-primary);
    --button-clr-background-secondary: var(--greyscolors-35);
    --button-clr-background-terciary: var(--brandcolor-secondary);
    --button-clr-background-error: var(--systemcolor-error);
    --button-clr-background-success: var(--systemcolor-success);
    --button-clr-foreground-primary: var(--greyscolors-90);
    --button-clr-foreground-secondary: var(--greyscolors-80);
    --button-clr-border-primary: var(--greyscolors-90);
    --effect-glow-success: var(--systemcolor-success);
}
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
#root, #__next {
    isolation: isolate;
}
ul, li {
    list-style: none;
} 
a {
    text-decoration: none;
    color: inherit;
}
.font-body {
    font-family: var(--text-family_body);
    font-style: normal;
    font-weight: var(--text-weight_regular);
    text-align: start;
    hyphens: auto;
}
.font-headers {
    font-family: var(--text-family_headers);
    font-style: normal;
    font-weight: var(--text-weight_regular);
    text-align: start;
    hyphens: auto;
}
.text-align_center {
    text-align: center;
}
.text-transform_upperc {
    text-transform: uppercase;
}
.text-transform_capitalize {
    text-transform: capitalize;
}
.text-style_italic {
    font-style: italic;
}
.text-clr-primary {
    color: var(--text-clr-primary);
}
.text-clr-primary_25 {
    color: var(--text-clr-primary_25);
}
.text-clr-primary_50 {
    color: var(--text-clr-primary_50);
}
.text-clr-error {
    color: var(--text-clr-error_primary);
}
.text-clr-success {
    color: var(--text-clr-success);
}
.text-size_h2 {
    font-size: var(--text-size_1000);
}
.text-size_h2 {
    font-size: var(--text-size_900);
}
.text-size_h3 {
    font-size: var(--text-size_800);
}
.text-size_h4 {
    font-size: var(--text-size_700);
}
.text-size_h5 {
    font-size: var(--text-size_600);
}
.text-size_h6 {
    font-size: var(--text-size_500);
}
.text-size_body {
    font-size: var(--text-size_400);
}
.text-size_bodysmall {
    font-size: var(--text-size_300);
}
.text-size_xsmall {
    font-size: var(--text-size_350);
}
.text-size_label {
    font-size: var(--text-size_200);
}
.text-lineh_200 {
    line-height: 200%;
}
.text-lineh_150 {
    line-height: 150%;
}
.text-lineh_140 {
    line-height: 140%;
}
.text-lineh_130 {
    line-height: 130%;
}
.text-lineh_120 {
    line-height: 120%;
}
.text-lineh_110 {
    line-height: 110%;
}
.text-lineh_100 {
    line-height: 100%;
}
.text-lineh_90 {
    line-height: 90%;
}
.text-lineh_80 {
    line-height: 50%;
}
.text-spacing_xxs {
    margin-bottom: var(--text-spacing-xxs);
}
.text-spacing_xs {
    margin-bottom: var(--text-spacing-xs);
}
.text-spacing_s {
    margin-bottom: var(--text-spacing-s);
}
.text-spacing_n {
    margin-bottom: var(--text-spacing-n);
}
.text-spacing_m {
    margin-bottom: var(--text-spacing-m);
}
.text-spacing_l {
    margin-bottom: var(--text-spacing-l);
}
.text-spacing_xl {
    margin-bottom: var(--text-spacing-xl);
}
.text-glow-primary {
    text-shadow: 0px 0px 6px var(--text-clr-primary_effects)
}
.text-glow-error-primary {
    text-shadow: 0px 0px 6px var(--text-clr-error_effects)
}
.text-glow-success-primary {
    text-shadow: 0px 0px 6px var(--effect-glow-success)
}
.stroke-glow-primary {
    box-shadow: 0px 0px 6px 2px var(--brandcolor-primary), 0px 0px 6px 4px var(--brandcolor-primary) inset;
}
.stroke-glow-primary_soft {
    box-shadow: 0px 0px 3px 2px var(--brandcolor-primary_50), 0px 0px 3px 2px var(--brandcolor-primary_50) inset;
}
.primary-button {
    background-color: var(--button-clr-background-primary);
    color: var(--button-clr-foreground-primary);
    border: none;
    padding: 0.25em 1em;
    border-radius: 4px;
    cursor: pointer;
}
.primary-button:hover, .primary-button:focus {
    background-color: var(--button-clr-background-terciary);
}
.buttonlink {
    cursor: pointer;
}
.buttonlink:focus {
    background-color: var(--button-clr-background-terciary);
}
.general-link {
    color: var(--text-clr-link_primary);
    text-decoration: underline;
    cursor: pointer;
}
.general-link:hover, .general-link:focus {
    color: var(--text-clr-hover);
}
.general-link.txt-error {
    animation: blink 0.3s ease-in-out 3;
    color: var(--text-clr-error) !important;
}
.secondary-link {
    color: var(--text-clr-link_secondary);
    text-decoration: underline;
}
.secondary-link:hover, .secondary-link:focus {
    color: var(--text-clr-hover);
}
.img_general {
    border-radius: 2px;
    object-fit: cover;
    width: 100%;
}
.icon-m {
    width: var(--icon-size-m);
    height: auto;
}
.icon-color_primary {
    filter: invert(89%) sepia(22%) saturate(182%) hue-rotate(146deg) brightness(103%) contrast(93%);
}
.icon-color_secondary {
    filter: brightness(0) saturate(100%) invert(8%) sepia(19%) saturate(416%) hue-rotate(315deg) brightness(97%) contrast(90%);
}
.video-full {
    border-radius: 2px;
    object-fit: cover;
    width: 100%;
}
body {
    background: url(/assets/images/blu-stripes-horizontal.png) var(--main-background) repeat;
}
.container {
    padding: 0 2rem;
    max-width: 1920px;
    margin-inline: auto;
    margin-bottom: var(--spacing-m);
}
.grid {
    display: grid;
    grid: 
        'sb . cs . cn'
        /1fr var(--spacing-m) 3fr var(--spacing-s) 3fr;
    gap: 0;
}
.sb {
    grid-area: sb;
}
.cs {
    grid-area: cs;
}
.cn {
    grid-area: cn;
}
.f-flex {
    display: flex;
}
.f-column {
    flex-direction: column;
}
.f-align-center {
    align-items: center;
}
.f-gap_auto {
    justify-content: space-between;
}
.f-justify-down {
    justify-content: end;
}
.f-gap_xs {
    gap: var(--spacing-xs);
}
.f-gap_n {
    gap: var(--spacing-n);
}
.f-gap_n_25 {
    gap: var(--spacing-n_25);
}
.f-gap_m {
    gap: var(--spacing-m);
}
.f-gap_xl {
    gap: var(--spacing-xl);
}
.f-gap_l {
    gap: var(--spacing-l);
}
.container-primary {
    padding: var( --containers-spacing-padding_normal);
    align-items: center;
    align-self: stretch;
    border: 2px solid var(--containers-clr-border-primary);
    background-color: var(--containers-clr-bg-primary);
    border-radius: 4px;
}
.container-spacing_header {
    margin: var(--spacing-n) 0 var(--spacing-n_25) 0;
}
.nav-container {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    align-items: end;
}
.header-back {
    display: block;
    background: url(/assets/SVG/header.svg) no-repeat local;
    background-size: 100% 100%;
}
.header-content {
    padding: var(--spacing-n_25);
    display: flex;
    justify-content: space-between;
}
.heading{
    display: flex;
    flex-direction: column;
    justify-content: end;
    flex: 1 1 0;
}
.heading > * {
    font-style: normal;
    hyphens: auto;
}
.heading > h1:nth-child(n) {
    font-family: var(--text-family_headers);
    font-size: var(--text-size_800);
    font-weight: var(--text-weight_regular);
    color: var(--text-clr-primary);
    line-height: 90%;
    text-wrap: balance;
    text-transform: uppercase;
}
.heading > p:nth-child(n) {
    font-family: var(--text-family_body);
    font-size: var(--text-size_500);   
    font-weight: var(--text-weight_regular);
    color: var(--greyscolors-25);
    line-height: 110%;
    margin-bottom: var(--spacing-xs);
}
nav {
    position: relative;
}
.navbar {
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--header-nav_spacing);
}
.navbar a {
    font-family: var(--text-family_body);
    font-size: var(--text-size_400);
    font-weight: var(--text-weight_regular);
    font-style: normal;
    line-height: 90%;
    hyphens: none;
    color: var(--text-clr-primary);
    cursor: pointer;
    text-transform: capitalize;
    text-decoration: underline;
    white-space: nowrap;
}
.navbar a:hover, a:focus{
    color: var(--text-clr-hover_secondary) !important;
}
.menu-button {
    display: none;
}
.header-svg {
    position: inherit;
}
.dropdown-nav {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    backdrop-filter: blur(5px);
    background-color: hsla(32, 74%, 58%, 0.6);
    border: 2px solid hsla(32, 74%, 89%, 0.8);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 8px;
}
.dropdown-nav > div > div:nth-child(1) {
    background-color: var(--button-clr-background-terciary);
    border-radius: 8px 8px 0 0;
    padding: 1rem 2rem;
    display: flex;
    justify-content: end;
}
  .dropdown-nav > div > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem ;
}
  .dropdown-nav > div > div:nth-child(2) > a {
    width: 100%;
    flex: 2;
}
.searchbar-container {
    background-color: var(--containers-clr-bg-primary);
    border: 1px solid var(--containers-clr-border-primary);
    border-radius: 2px;
    width: max(20em, 80%);
}
.searchbar-container > div {
    display: flex;
    padding: 0 0 0 1rem;
}
.searchbar-container > div > form {
    flex-grow: 1; 
    display: flex;
}
.searchbar-container > div > form > input::placeholder {
    color: var(--text-clr-primary_25);
}
.searchbar-input {
    width: 100%; 
    background-color: transparent;
    color: var(--text-clr-primary);
    outline: none;
    border: none;
    background: transparent;
    align-items: center;
}
.searchbar-button {
    flex-shrink: 0; 
    margin-left: 0.5rem; 
    background-color: var(--button-clr-background-primary);
    border: none;
    padding: 0.5em 1em;
    color: var(--button-clr-foreground-primary);
    cursor: pointer;
}
@keyframes blink {
    0%, 100% { background-color: var(--button-clr-background-primary) !important; }
    50% { background-color: var(--button-clr-background-error) !important; }
}
.searchbar-button.error {
    animation: blink 0.3s ease-in-out 3;
    background-color: var(--button-clr-background-error) !important;
}
.container-hero {
    padding: 1rem 2rem;
    max-width: 1920px;
    margin-inline: auto;
}
.sb-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-n_25);
}
.sb-container-primary {
    display: inline-block;
    height: fit-content;
    padding: var( --containers-spacing-padding_xsmall);
    align-self: stretch;
    border-radius: 4px;
    box-shadow: 0px 0px 6px 2px hsla(187, 63%, 70%, 0.75), 0px 0px 6px 4px hsla(187, 63%, 70%, 0.35) inset;
    border: 2px solid hsl(187, 63%, 90%, 1);
    background-color: var(--containers-clr-bg-brand-primary);
}
.sb-container-secondary {
    display: inline-block;
    height: fit-content;
    padding: var( --containers-spacing-padding_xsmall);
    align-self: stretch;
    border-radius: 4px;
    border: 2px solid hsl(187, 63%, 90%, .5);
    background-color: var(--containers-clr-bg-brand-complementary);
}
.sb-container-primary  p {
    font-family: var(--text-family_body);
    font-size: var(--text-size_300);
    font-weight: var(--text-weight_regular);
    color: var(--text-clr-primary);
    line-height: 150%;
    font-style: normal;
    text-align: start;
    hyphens: auto;
}
.sb-container-primary  .redacted-subtitle {
    font-family: var(--text-family_body);
    font-size: var(--text-size_500);
    font-weight: var(--text-weight_regular);
    color: var(--text-clr-error);
    line-height: 150%;
    font-style: normal;
    text-align: start;
    hyphens: auto;
    text-transform: uppercase;
}
.sb-container-primary  h2, .sb-title  {
    font-family: var(--text-family_body);
    font-size: var(--text-size_400);
    font-weight: var(--text-weight_semibold);
    color: var(--text-clr-primary);
    line-height: 120%;
    font-style: normal;
    text-align: start;
    text-wrap: balance;
}
.sb-container-primary  h3 {
    font-family: var(--text-family_body);
    font-size: var(--text-size_350);
    font-weight: var(--text-weight_regular);
    color: var(--text-clr-primary);
    line-height: 120%;
    font-style: normal;
    text-align: start;
    hyphens: auto;
    margin-bottom: var(--text-spacing-s);
}
.sb-container-primary > div {
    display: flex;
    flex-direction: column;
    gap: var(--text-spacing-m);
}
.sb-container-secondary > .ads {
    display: flex;
    flex-direction: column;
    gap: var(--text-spacing-xs);
}
.sb-container-secondary  p {
    font-family: var(--text-family_body);
    font-size: var(--text-size_300);
    font-weight: var(--text-weight_regular);
    color: var(--text-clr-primary);
    line-height: 150%;
    font-style: normal;
    text-align: start;
    hyphens: auto;
}
.container-button {
    padding: 0 2rem;
    position: sticky;
    top: 0.5rem;
    margin-bottom: var(--spacing-s);
    display: flex;
    justify-content: end;
    z-index: 900;
}
.lang-button {
    display: none;
    padding: var(--spacing-n);
    background-color: var(--button-clr-background-terciary);
    border: solid 2px var(--containers-clr-border-terciary);
    box-shadow: 0px 0px 6px 0px var(--brandcolor-secondary);
    border-radius: 8px;  
    font-family: var(--text-family_body);
    font-style: normal;
    font-weight: var(--text-weight_medium);
    font-size: var(--text-size_400);
    color: var(--button-clr-foreground-secondary);
    text-transform: uppercase;
    cursor: pointer;
}
.container-primary_blog {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-xl);
    padding: var( --containers-spacing-padding_normal);
    border-radius: 4px;
    backdrop-filter: blur(1px);
    border: 1px solid hsla(187, 63%, 70%, 0.80);
    background-color: hsla(0, 9%, 13%, 0.4);
    box-shadow: 0px 0px 6px 2px hsla(187, 63%, 70%, 0.7), 0px 0px 6px 4px hsla(187, 63%, 70%, 0.4) inset;
}
.blog-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.blog-title > h2 {
    font-family: var(--text-family_headers);
    font-style: normal;
    font-weight: var(--text-weight_medium);
    text-align: center;
    hyphens: auto;
    color: var(--text-clr-primary);
    font-size: var(--text-size_650);
    line-height: 120%;
    text-transform: uppercase;
}
.blog-title > div {
    margin-right: auto;
}
.blog-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
    font-family: var(--text-family_body);
    font-style: normal;
    font-weight: var(--text-weight_regular);
    text-align: left;
    hyphens: auto;
}
.blog-content h3 {
    font-size: var(--text-size_500);
    color: var(--text-clr-primary);
    font-weight: var(--text-weight_regular);
    line-height: 110%;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.blog-content h4 {
    font-size: var(--text-size_450);
    font-weight: var(--text-weight_semibold);
    color: var(--text-clr-primary);
    line-height: 110%;
    margin-bottom: var(--spacing-m);
}
.blog-content p {
    font-size: var(--text-size_400);
    color: var(--text-clr-primary);
    margin-bottom: 1rem;
    line-height: 160%;
}
.blog-content .paragraph-dialogue {
    font-size: var(--text-size_400);
    color: var(--text-clr-primary);
    font-style: italic;
    margin-bottom: 1.5rem;
    padding: 0.5em;
}
.blog-content .paragraph-quote {
    font-size: var(--text-size_400);
    color: var(--text-clr-primary);
    font-style: italic;
    margin-bottom: 1.5rem;
    padding: 1em;
}
.sb-container-primary > .blog-posts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}
.blog-posts > div {
    cursor: not-allowed;
}
.ads {
    cursor: not-allowed;
    height: 100%;
}
.ads img,
.ads video {
    background-color: var(--greyscolors-80);
    object-fit: cover;
    height: 100%;
}
.footer-container {
    padding: 0 2rem;
    max-width: 1920px;
    margin-inline: auto;
}
.footer-wrapper {
    background-color: var(--footer-bg-primary);
    margin: 1rem 0 0.25rem 0;
}
.footer-content {
    padding: 1.25rem 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-n);
}
.footer-content > * {
    text-decoration: none;
    font-family: var(--text-family_body);
    font-style: normal;
    font-weight: var(--text-weight_regular);
    font-size: var(--text-size_200);
    text-align: start;
    hyphens: auto;
    color: var(--text-clr-primary_25);
}
.footer-content h2 {
    font-family: var(--text-family_headers);
    font-size: var(--text-size_600);
    text-wrap: balance;
    white-space: wrap;
    hyphens: none;
    text-transform: uppercase;
}
.footer-content > div:nth-of-type(1) {
    display: flex;
    justify-content: space-between;
    flex: 1 1 100%;
}
.footer-content > div:nth-of-type(2) {
    display: flex;
    justify-content: space-between;
    flex: 1 1 100%;
}
.sitemap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
}
.sitemap > ul > li {
    color: var(--text-clr-primary);
    font-size: var(--text-size_350);
}
.sitemap > ul > li > a:hover, a:focus {
    color: var(--text-clr-hover);
}
.legal {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-n);
}
.glitch-date {
    animation: glitch-date 0.1s infinite;
}
@keyframes glitch-date {
    0% { transform: translate(1px, 1px); }
    25% { transform: translate(-1px, -1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, 1px); }
    100% { transform: translate(0, 0); }
}
.randomnumber-container {
    font-family: var(--text-family_body);
    font-style: normal;
    font-size: var(--text-size_350);
    font-weight: var(--text-weight_regular);
    text-align: start;
    hyphens: auto;
    color: var(--text-clr-primary_50);
}
.ran-number {
    position: relative;
    display: inline-block;
}
.ran-number::before {
    content: "0";
    color: var(--text-clr-primary);
    position: absolute;
    margin-left: 1.5rem;
}
.ip-container {
    font-family: var(--text-family_body);
    font-style: normal;
    font-size: var(--text-size_300);
    font-weight: var(--text-weight_regular);
    text-align: start;
    hyphens: auto;
    color: var(--text-clr-primary_25);
}
.ip-address {
    position: relative;
    display: inline-block;
    animation: glitch-ip 0.3s infinite;
}
@keyframes glitch-ip {
    0% { transform: translate(1px, -1px); }
    25% { transform: translate(-1px, 1px); }
    50% { transform: translate(1px, 1px); }
    75% { transform: translate(-1px, -1px); }
    100% { transform: translate(0, 0); }
}
.adress-container {
    font-family: var(--text-family_body);
    font-style: normal;
    font-size: var(--text-size_300);
    font-weight: var(--text-weight_regular);
    text-align: start;
    hyphens: auto;
    color: var(--text-clr-primary_25);
}
.address-glitch {
    display: inline-block;
    width: 100%;
    height: 16ch;
    overflow: hidden;
    hyphens: auto;
    animation: glitch-adress-animation 0.3s infinite;
}
@keyframes glitch-adress-animation {
    0% { transform: translateX(1px); }
    25% { transform: translateX(-1px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.popup-container {
    position: fixed;
    display: none;
    z-index: 9999;
    max-width: 100vw;
    max-height: 100vh;
}
.popup {
    width: 90vw;
    max-width: 500px;
    background-color: var(--basecolor-black_60); 
    border: 1px solid var(--brandcolor-primary_light);
    backdrop-filter: blur(3px);
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    word-wrap: break-word;
}
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--brandcolor-primary_light);
    color: var(--greyscolors-65);
    padding: 0 0 0 var(--spacing-s);
    text-align: left;
    border-bottom: 1px solid var(--containers-clr-border-primary);
    font-family: var(--text-family_headers);
    font-style: normal;
    font-weight: var(--text-weight_regular);
    text-align: start;
    hyphens: auto;
    font-size: var(--text-size_300);
}
.popup-btn-e {
    background-color: var(--systemcolor-error_dark);
    color: var(--brandcolor-primary_light);
    padding: var(--spacing-xxs) var(--spacing-s);
    margin: 0;
    border: 0;
    cursor: not-allowed;
}
.popup-content {
    padding: 10px;
    white-space: pre-line;
    font-family: var(--text-family_body);
    font-style: normal;
    font-weight: var(--text-weight_regular);
    text-align: start;
    hyphens: auto;
    font-size: var(--text-size_300);
    color: var(--greyscolors-15);
    min-height: 80px;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
}
.container404 {
    display: flex;
    flex-direction: column;
    height: 96vh;
}
.main404 {
    flex-grow: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-n);
}