dark.css

/*DARK COLOR SCHEME*/

/* dark.css: 👉 light-on-dark */

:root {
 
    --side-overlays: rgb(24, 26, 38);
    --slide-highlight: rgb(47, 47, 60);
    --text-color: #c0c5e1ff;
    --subdued-text: rgb(158, 162, 184);
    --h1: #fff;
    --top-header: #21232f;
    --gallery:  rgb(51, 52, 63);
    --general-background: rgb(13, 15, 26);
    --login: rgba(28, 31, 38, 0.7);
    --general-background-highlight: rgb(33, 33, 39); /*obsolete?*/
    --deeper-accent:  rgb(14, 14, 16);
    --header-accent: #a0c0d2fe;
    --button-1-1: #2d2d85;
    --button-1-1-over: #26266b;
    --button-1-2: #2929b5;
    --button-1-2-over: #262686;
    --button-2-1:#016191;
    --button-2-1-over:#013a60;
    --button-2-2:#236d96;
    --button-2-2-over:#143952;
    --shadow: #8484846b;
    --night: #13162b;

    --footer-background: #111735ff;
    --footer-text: #7ea9c2;
    --footer-header: #a4a7c2;
    --splash: #103e5dff;
    --splash-over: #103e5dff;
    --notification: #6388b3;
    --fuscia-button: #804280;
    --fuscia-button-over: #a93aa9;

    --facebook: #1d2e53;

 }

 
 .gobrik-logo {
    background: url(../svgs/gobrik-logo-dark.svg) center no-repeat;
    background-size: contain;
}


.top-settings-button {
    /*background: url(../svgs/settings-icon-dark.svg) no-repeat;*/
    background: url(../svgs/grey-emblem-button3-dark.svg) no-repeat;

    background-size: contain;
}

.top-settings-button:hover {
     /* background: url(../svgs/settings-icon-over-dark2.svg) no-repeat;*/
      background: url(../svgs/emblem-dark-over.svg) no-repeat;
      background-size: contain;
  }

.top-close-button {
  background: url(../svgs/down-arrow-night.svg) no-repeat;
  background-size: contain;
}

.top-close-button:hover {
  background: url(../svgs/up-arrow-night.svg) no-repeat;
  background-size: contain;
}


.main-menu-button {
    background: url(../svgs/login-icon-night.svg?v=3) no-repeat;
    background-size: contain;
}

.main-menu-button:hover  {
    background: url(../svgs/login-icon-night-over.svg) no-repeat;
    background-size: contain;
}


@media screen and (min-width: 0px) and (max-width: 700px) {
    .clouds-new2  {
      background-image: linear-gradient(black,var(--general-background),var(--general-background));
      }
    }


    @media screen and (min-width: 701px) {
/*      .clouds-new2  {
        background-image: linear-gradient(black,var(--general-background));
        }
      }*/


      .bottom-scope  {
        background-image: linear-gradient(var(--general-background),var(--general-background), black);

        }
        .main-landing-graphic {
          background: url(../svgs/richard-and-team-night.svg?v=3) no-repeat center center;
          background-size: contain;
          }

      /*
  @media screen and (min-width: 0px) and (max-width: 700px) {
    .clouds-new2  {
        background-image: linear-gradient(var(--top-header),var(--general-background),var(--general-background),var(--general-background));
     /* background: url(../svgs/ashim-top-clouds-mobile.svg?v1.3) center top repeat-x;
          box-sizing: border-box;
          background-size: 100%;*/
 
  

          .tree-coins {
            background: url(../svgs/earth-home-animated-night2.svg) no-repeat center;
            background-size: contain;
          }

  .bio-top {
    background: url(../svgs/biosphere-top-night.svg) no-repeat center top;
    background-size: cover;
  }

  .vision-landscape {
    background: url(../webp/ocean-footer-night3.webp?v=3) no-repeat center;
    background-size: contain;
    background-color: var(--general-background);

  }

  .splash-content-block {
  background: url(../svgs/brik-view-dark.svg?v=3.1) bottom no-repeat;
  background-size: cover;
  background-color: #103e5dff;
  }

  #splash-bar {
    background-color: #103e5dff;
    box-shadow: 0 8px 7px rgba(3, 3, 3, 0.4);
  }


  .kn-info-bar {
    background: black !important;
    box-shadow: none !important;
  }

  #forgot-pass {
    color:var(--fuscia-button) !important;
   }

  .remember {
    color:var(--fuscia-button) !important;
 
}

.earth-com {
  background: url(../svgs/earth-community-night.svg?v=2) no-repeat center;
  background-size: contain;
}


.city-image {
  background: url(../svgs/city-village-night.webp) no-repeat center;
  background-size: contain;
}

/*
.loader {
  background: url('svgs/bottle-loader-night.svg') center no-repeat !important;
  box-sizing: border-box;
background-size: 38px;
}

.loader-spin {
  background: url('svgs/bottle-loader-night.svg') center no-repeat !important;
  box-sizing: border-box;
background-size: 38px;
}

  .virtue img {
    filter: invert(100%);
  }
*/

.my-ecobricks {

background: url(../webp/my-ecobricks-night.webp) no-repeat;
background-size: contain;
}

.help-validate {
  background: url(../webp/help-validate-night.webp) no-repeat;
  background-size: contain;

}

.log-ecobricks {
  background: url(../webp/log-ecobricks-night.webp) no-repeat;
  background-size: contain;

}

.biosphere {
  background: url(../webp/biosphere2.webp) no-repeat center bottom;
  background-size: contain;

}


#main {
  /* background-image:linear-gradient(var(--main-background),var(--main-background),black); */
  background: url(../svgs/starry-night-2.svg) repeat-x bottom;
  background-size: contain;

  }