#fw-section-rich-text-7ea8732a-8b48-447a-a51e-33c1b6328268 {
--color-primary: #ff8100;
--color-primary-rgb: 255, 129, 0;
--color-background: #3b9dfa;
--color-background-rgb: 59, 157, 250;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 138;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-custom-html-694e45dc-7da5-4776-b8bc-8b8337d61b87 {
--color-primary: #4effff;
--color-primary-rgb: 78, 255, 255;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
/* RESET */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Orbitron', sans-serif;
  background: #000;
  overflow-x: hidden;
}

/* Vidéo fond */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.77vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}

/* --- CONTENEUR PRINCIPAL --- */
.main-container {
  display: flex;
  justify-content: space-between; /* Ecarte la colonne gauche de la droite */
  align-items: flex-start;
  gap: 20px;
  margin-top: 30px;
  padding-bottom: 30px;
  position: relative;
  z-index: 2;
  
  /* Largeur maximale (98%) pour format cinéma */
  width: 98%; 
  max-width: 2000px; 
  margin-left: auto;
  margin-right: auto;
}

/* --- COLONNE GAUCHE (Infos) --- */
.link-container {
  position: relative;
  z-index: 2;
  width: 320px; /* Largeur fixe pour les infos */
  flex-shrink: 0;
  padding: 30px 15px;
  border-radius: 30px;
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.15);
  text-align: center;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
}

/* Avatar */
.avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px solid #00d2ff;
  display: block;
  margin: -65px auto 10px;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 15px rgba(0,210,255,0.6);
  object-fit: contain;
}

/* Texte */
h1 {
  font-size: 28px;
  margin: 10px 0;
  color: #00d2ff;
  text-shadow: 0 0 6px rgba(0,210,255,0.7);
}
.tagline {
  font-size: 13px;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Petites vidéos */
.videos {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}
.video {
  width: 135px;
  height: 75px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.video iframe { width: 100%; height: 100%; pointer-events: none; }
.video-1 { transform: rotate(-8deg); animation: float 6s ease-in-out infinite; }
.video-2 { transform: rotate(8deg); animation: float-reverse 6s ease-in-out infinite; }

@keyframes float {0%,100%{transform:translateY(0) rotate(-8deg);}50%{transform:translateY(10px) rotate(-6deg);}}
@keyframes float-reverse {0%,100%{transform:translateY(0) rotate(8deg);}50%{transform:translateY(10px) rotate(10deg);}}

/* Icônes */
.icon-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.icon {
  width: 45px; 
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #00d2ff;
  border-radius: 12px;
  font-size: 20px;
  color: white;
  transition: 0.3s;
  box-shadow: 0 0 12px rgba(0,210,255,0.4);
  text-decoration: none;
  line-height: 0;
}
.icon i { pointer-events: none; }
.icon:hover {
  transform: scale(1.1);
  background: #008cba;
  box-shadow: 0 0 20px rgba(0,210,255,0.7);
}

/* --- SECTION TWITCH DROITE (LARGE) --- */

.twitch-container {
  position: relative;
  z-index: 3;
  flex-grow: 1; /* Prend tout l'espace restant */
  display: flex;
  justify-content: center;
}

/* Wrapper : Contient Vidéo + Tchat */
.twitch-content-wrapper {
    display: flex;
    width: 100%;
    gap: 15px;
    height: 600px; /* Hauteur standard */
}

/* Style des cadres néons */
.twitch-neon-frame {
  padding: 4px;
  border: 3px solid #00d2ff;
  border-radius: 15px;
  box-shadow: 0 0 20px #00d2ff, 0 0 40px #00d2ff;
  background: rgba(0,0,0,0.8);
  position: relative;
  z-index: 3;
  animation: neon-glow 3s ease-in-out infinite alternate;
  height: 100%; 
}

/* -- LA VIDÉO (Élastique) -- */
.video-part {
    flex: 1; /* Remplit tout l'espace disponible */
    min-width: 0; 
}

/* -- LE TCHAT (Largeur Fixe) -- */
.chat-part {
    width: 340px; /* Largeur fixe pour le tchat */
    flex-shrink: 0; /* Ne rétrécit pas */
}

@keyframes neon-glow {
  0% { box-shadow: 0 0 15px #00d2ff, 0 0 30px #00d2ff; }
  100% { box-shadow: 0 0 25px #00d2ff, 0 0 50px #00d2ff; }
}

/* Footer */
footer {
  margin-top: 20px;
  font-size: 12px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* --- RESPONSIVE (Mobile & Tablette) --- */
@media(max-width: 1450px){
  /* Sur écrans moyens, on passe la colonne gauche au dessus */
  .main-container {
      flex-direction: column;
      align-items: center;
  }
  .link-container {
      width: 80%;
      max-width: 500px;
      margin-bottom: 30px;
  }
  .twitch-content-wrapper {
      height: 650px; 
  }
}

@media(max-width: 950px){
    /* Sur mobile, on met le tchat sous la vidéo */
    .twitch-content-wrapper {
        flex-direction: column;
        height: auto;
    }
    .twitch-neon-frame {
        width: 100%;
        margin-bottom: 15px;
    }
    .video-part { height: 250px; }
    .chat-part { 
        width: 100%; 
        height: 450px;
    }
}
}

#fw-section-hero-video-1e18812d-81fb-4d78-8d77-a2c1ed9f0204 {
--color-primary: #ff0004;
--color-primary-rgb: 255, 0, 4;
--color-background: #3b9dfa;
--color-background-rgb: 59, 157, 250;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #f1f1f1;
--color-on-background-rgb: 241, 241, 241;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 138;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-rich-text-06487174-8444-4b9f-b306-c17c5b64918b {
--color-primary: #ff8100;
--color-primary-rgb: 255, 129, 0;
--color-background: #3b9dfa;
--color-background-rgb: 59, 157, 250;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #f1f1f1;
--color-on-background-rgb: 241, 241, 241;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 138;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-recent-posts-25084846-8626-4cd3-ac6c-29ef91c4c17e {
--color-primary: #df03ec;
--color-primary-rgb: 223, 3, 236;
--color-background: #000102;
--color-background-rgb: 0, 1, 2;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #f1f1f1;
--color-on-background-rgb: 241, 241, 241;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 1;
background-color: var(--color-background);
color: var(--color-on-background);

}




#fw-section-rich-text-173936905300271 {
--color-primary: #ff8100;
--color-primary-rgb: 255, 129, 0;
--color-background: #3b9dfa;
--color-background-rgb: 59, 157, 250;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #f1f1f1;
--color-on-background-rgb: 241, 241, 241;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 138;
background-color: var(--color-background);
color: var(--color-on-background);

}





#fw-section-custom-html-bb6bc5ba-fe67-48f1-9227-874a5f65ee99 {

/* Définition des couleurs néon pour la cohérence */
:root {
    --discord-blue: #5865F2;
    --neon-purple: #720e9e;
    --neon-light: #b4b4ff;
}

/* Conteneur principal - La Base du Style Époustouflant */
.discord-cyber-glow-container {
    width: 400px; 
    height: 600px; 
    margin: 50px auto; 
    
    /* Le style principal */
    background: #1e1f24; /* Fond légèrement texturé pour l'effet */
    border: 3px solid var(--discord-blue); /* Bordure solide */
    border-radius: 12px;
    overflow: hidden; 
    
    /* L'effet de GLOW (Lueur) */
    box-shadow: 
        0 0 15px var(--neon-purple), /* Lueur interne violette */
        0 0 30px var(--discord-blue), /* Lueur moyenne bleue */
        0 0 45px var(--neon-light), /* Lueur externe claire */
        inset 0 0 20px var(--neon-purple); /* Lueur interne sombre pour la profondeur */
                
    /* Animation et fluidité */
    transition: all 0.5s ease-in-out;
}

/* Effet de Survol - Maximiser le Wow Factor */
.discord-cyber-glow-container:hover {
    /* Le widget s'élève et la lueur s'intensifie */
    transform: perspective(1000px) rotateX(2deg) translateY(-10px); 
    
    box-shadow: 
        0 0 20px var(--neon-purple), 
        0 0 40px var(--discord-blue),
        0 0 60px var(--neon-light),
        0 10px 60px 5px rgba(0, 0, 0, 0.7); /* Ajout d'une ombre portée sombre */
}

/* S'assurer que l'iframe remplit le conteneur stylisé */
.discord-glow-iframe {
    display: block;
    width: 100%;
    height: 100%;
    /* Réinitialisation de l'ombre portée propre à l'iframe si elle existe */
    box-shadow: none; 
}
}







#fw-section-rich-text-deec22cf-58ff-422d-811c-2280ad7ea287 {
--color-primary: #ff8100;
--color-primary-rgb: 255, 129, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-custom-html-a2b9448e-7e3c-43d5-b406-29d3f34b0025 {

/* RESET */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Orbitron', sans-serif;
  background: #000;
  overflow-x: hidden;
}

/* Vidéo fond */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.77vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}

/* --- CONTENEUR PRINCIPAL --- */
.main-container {
  display: flex;
  justify-content: space-between; /* Ecarte au max */
  align-items: flex-start;
  gap: 20px;
  margin-top: 30px; /* Un peu plus d'espace en haut */
  padding-bottom: 30px;
  position: relative;
  z-index: 2;
  
  /* Largeur maximale pour écrans géants */
  width: 98%; 
  max-width: 2000px; 
  margin-left: auto;
  margin-right: auto;
}

/* --- COLONNE GAUCHE (Infos) --- */
.link-container {
  position: relative;
  z-index: 2;
  width: 320px; /* Légèrement réduit pour donner encore plus de place à la vidéo */
  flex-shrink: 0;
  padding: 30px 15px;
  border-radius: 30px;
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.15);
  text-align: center;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
}

/* Avatar */
.avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px solid #00d2ff;
  display: block;
  margin: -65px auto 10px;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 15px rgba(0,210,255,0.6);
  object-fit: contain;
}

/* Texte */
h1 {
  font-size: 28px;
  margin: 10px 0;
  color: #00d2ff;
  text-shadow: 0 0 6px rgba(0,210,255,0.7);
}
.tagline {
  font-size: 13px;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Vidéos décoratives */
.videos {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}
.video {
  width: 135px;
  height: 75px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.video iframe { width: 100%; height: 100%; pointer-events: none; }
.video-1 { transform: rotate(-8deg); animation: float 6s ease-in-out infinite; }
.video-2 { transform: rotate(8deg); animation: float-reverse 6s ease-in-out infinite; }

@keyframes float {0%,100%{transform:translateY(0) rotate(-8deg);}50%{transform:translateY(10px) rotate(-6deg);}}
@keyframes float-reverse {0%,100%{transform:translateY(0) rotate(8deg);}50%{transform:translateY(10px) rotate(10deg);}}

/* Icônes */
.icon-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.icon {
  width: 45px; /* Un peu plus petites */
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #00d2ff;
  border-radius: 12px;
  font-size: 20px;
  color: white;
  transition: 0.3s;
  box-shadow: 0 0 12px rgba(0,210,255,0.4);
  text-decoration: none;
  line-height: 0;
}
.icon i { pointer-events: none; }
.icon:hover {
  transform: scale(1.1);
  background: #008cba;
  box-shadow: 0 0 20px rgba(0,210,255,0.7);
}

/* --- SECTION TWITCH DROITE (MODE ULTRA-LARGE) --- */

.twitch-container {
  position: relative;
  z-index: 3;
  flex-grow: 1; /* Prend tout l'espace restant */
  display: flex;
  justify-content: center;
}

/* Wrapper : C'EST ICI QUE SE JOUE LA LARGEUR */
.twitch-content-wrapper {
    display: flex;
    width: 100%;
    gap: 15px;
    
    /* CHANGEMENT MAJEUR : Hauteur fixe modérée.
       Sur un écran large, cela force un ratio panoramique très large pour la vidéo. */
    height: 600px; 
}

/* Cadre Néon Générique */
.twitch-neon-frame {
  padding: 4px;
  border: 3px solid #00d2ff;
  border-radius: 15px;
  box-shadow: 0 0 20px #00d2ff, 0 0 40px #00d2ff;
  background: rgba(0,0,0,0.8); /* Fond plus sombre */
  position: relative;
  z-index: 3;
  animation: neon-glow 3s ease-in-out infinite alternate;
  height: 100%; 
}

/* -- LA VIDÉO (Prend toute la largeur possible) -- */
.video-part {
    flex: 1; /* S'étire pour remplir tout l'espace horizontal */
    min-width: 0; 
}

/* -- LE TCHAT (Largeur fixe) -- */
.chat-part {
    width: 340px; /* Taille standard Twitch */
    flex-shrink: 0; /* Ne rétrécit jamais */
}

@keyframes neon-glow {
  0% { box-shadow: 0 0 15px #00d2ff, 0 0 30px #00d2ff; }
  100% { box-shadow: 0 0 25px #00d2ff, 0 0 50px #00d2ff; }
}

/* Footer */
footer {
  margin-top: 20px;
  font-size: 12px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* --- RESPONSIVE --- */

/* 1. Écrans moyens (Laptops) : On empile si ça devient trop serré */
@media(max-width: 1450px){
  .main-container {
      flex-direction: column;
      align-items: center;
  }
  
  .link-container {
      width: 80%;
      max-width: 500px;
      margin-bottom: 30px;
  }

  /* Quand on empile, on peut augmenter un peu la hauteur */
  .twitch-content-wrapper {
      height: 650px; 
  }
}

/* 2. Mobiles/Tablettes portrait */
@media(max-width: 950px){
    .twitch-content-wrapper {
        flex-direction: column;
        height: auto;
    }
    
    .twitch-neon-frame {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .video-part { height: 250px; } /* Hauteur vidéo mobile */
    .chat-part { 
        width: 100%; 
        height: 450px; /* Hauteur tchat mobile */
    }
}
}


#fw-section-hero-video-09a68c5b-3989-4764-b044-8d8268254fa1 {
--color-primary: #fd6c04;
--color-primary-rgb: 253, 108, 4;
--color-background: #0083ff;
--color-background-rgb: 0, 131, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 106;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-recent-posts-a16b6f43-e3cf-4c34-9fe4-a9e2c4092f41 {
--color-primary: #ff8100;
--color-primary-rgb: 255, 129, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-video-with-text-d5dcdb17-2122-44da-8933-4054b9a1be4f {
--color-primary: #ff8100;
--color-primary-rgb: 255, 129, 0;
--color-background: #ff8100;
--color-background-rgb: 255, 129, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #f1f1f1;
--color-on-background-rgb: 241, 241, 241;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 152;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-collection-template {
--color-primary: #ff8100;
--color-primary-rgb: 255, 129, 0;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #f1f1f1;
--color-on-background-rgb: 241, 241, 241;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-hero-video-562763cb-78f5-470b-a01a-c0b83d879e31 {
--color-primary: #ff0099;
--color-primary-rgb: 255, 0, 153;
--color-background: #22c7ef;
--color-background-rgb: 34, 199, 239;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #fff3f3;
--color-on-background-rgb: 255, 243, 243;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 154;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-recent-posts-c592ff47-a2c5-423f-8692-bd99d91f0952 {
--color-primary: #ff00e2;
--color-primary-rgb: 255, 0, 226;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-primary: #f5f5f5;
--color-on-primary-rgb: 245, 245, 245;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-recent-posts-c1480a75-8a2d-4a8e-abc6-1feaada6a06c {
--color-primary: #12aebc;
--color-primary-rgb: 18, 174, 188;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-video-with-text-cde916c3-ddc3-46d8-b9b4-d461f5e4beb2 {
--color-primary: #ff8100;
--color-primary-rgb: 255, 129, 0;
--color-background: #0079ff;
--color-background-rgb: 0, 121, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 100;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-featured-collection-a146bfef-af32-4832-b851-46e8bf58d866 {
--color-primary: #1dd3ef;
--color-primary-rgb: 29, 211, 239;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-newsletter-f6c0b0c2-fc06-448f-a3c0-b868d92cddef {
--color-primary: #fd00c2;
--color-primary-rgb: 253, 0, 194;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #eeeeee;
--color-on-background-rgb: 238, 238, 238;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-footer {
--color-primary: #ff8100;
--color-primary-rgb: 255, 129, 0;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #22c7ef;
--color-on-background-rgb: 34, 199, 239;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-announcement-bar-74b0b1ee-6cee-4d80-b188-e31d6e83eda3 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #000102;
--color-background-rgb: 0, 1, 2;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #f1f1f1;
--color-on-background-rgb: 241, 241, 241;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 1;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-header {
--color-primary: #000101;
--color-primary-rgb: 0, 1, 1;
--color-background: #0079ff;
--color-background-rgb: 0, 121, 255;
--color-on-primary: #6a016a;
--color-on-primary-rgb: 106, 1, 106;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 100;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-product {
--color-primary: #ff0099;
--color-primary-rgb: 255, 0, 153;
--color-background: #010a0a;
--color-background-rgb: 1, 10, 10;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #12d2e9;
--color-on-background-rgb: 18, 210, 233;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 7;
background-color: var(--color-background);
color: var(--color-on-background);

}





#fw-section-password {
--color-primary: #ff8100;
--color-primary-rgb: 255, 129, 0;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #b8b1b1;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}