:root {
     color-scheme: light dark;
     supported-color-schemes: light dark;
 }

 [data-theme="light"] {
     --bg-color: #ffd900;
     --text-color: #cd0000;

 }

 [data-theme="dark"] {
     --bg-color: #cd0000;
     --text-color: #ffd900;
 }

 g.svg-uccp,
 path.svg-uccp {
     fill: var(--text-color);
     stroke-width: 0;
     stroke-opacity: 0.5;
     paint-order: stroke markers fill;
 }

 div.logo {
     height: 350px;
     width: 100%;
     text-align: center;
     margin: auto;
     display: flex;
 }

 div.logo svg,
 div.logo img {
     align-self: center;
     margin: 0 auto;
 }

 header {
     width: 100%;
     text-align: center;
 }

 button.jour-nuit {
     margin: 1rem auto;
 }

 html {
     background-color: var(--bg-color);
     color: var(--text-color);
 }

 div.logos {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap 2rem;
 }

 .sgv-fill {
     fill: var(--text-color);
 }


 #div-uccp-sq {
     background: url("./uccp-sq.png");
 }

 @media (prefers-color-scheme: dark) {
     img.logo-uucp {
         src: url(./uccp-yellow.png);
     }

     #div-uccp-sq {
         background: url("./uccp-sq-yellow.png");
     }

     #div-uccp-union-des-conseils-citoyens-parisiens {
         background: url("./uccp-union-des-conseils-citoyens-parisiens-yellow.png");
     }

     #div-union-des-conseils-citoyens-parisiens {
         background: url("./union-des-conseils-citoyens-parisiens-yellow.png");
     }
 }

 @media (max-width: 600px) {
     div.logos {
         grid-template-columns: 1fr;
     }

     div.logo-image {
         display: none;
     }
 }