/* --- Base Style --- */
@import "base/fonts";
@import "base/reset";

/* --- Abstract Style --- */
@import "abstracts/variables";
@import "abstracts/classes";
@import "abstracts/functions";
@import "abstracts/breakpoints";
@import "abstracts/utilites";
@import "abstracts/mixins";

/* --- Form Components Style --- */
@import "components/switcher";
@import "components/burger-menu";
@import "components/homepage-nav";


/* --- layout Style --- */
@import "layout/header";
@import "layout/footer";


@import "pages/home";
@import "pages/privace";
@import "pages/blog";
@import "pages/list";
@import "pages/rank";

body, html {
 font-family: 'firagoRegular';
 background-color: var(--bg-color);
}



:root[data-theme="theme-light"] {
 .main-wrapper {
  background-image: url("/images/bg_light-home-header.svg"), url("/images/bg_light_home-footer.svg");
  background-repeat: no-repeat;
  background-position:  top center, bottom center;
  background-size: 100% auto;
  .media-down(576px, {
    background-image: url("/images/jumbotron-light-mobile.svg"), url("/images/bg_light_home-footer.svg");
    background-repeat: no-repeat;
    background-position:  top 30px center, bottom center;
    background-size: 100% auto;
  });
    &--v2 {
     background-image: url("/images/bg_light_home-footer.svg");
     background-repeat: no-repeat;
     background-position:  bottom center;
     background-size: 100% auto;
   }
 }
 .wrapper--v2, .wrapper--v4,
 .wrapper--v3 {
  background-image: url("/images/bg_light-home-header.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 450px;
  padding-top: 230px;
 }
}

:root[data-theme="theme-dark"] {
 .footer-wrapper-homepage {
  background-image: url("/images/bg_dark_home_footer.svg"), url("/images/small-star-bottom3.svg");
  background-repeat: no-repeat, repeat-x;
  background-position: bottom center, bottom left;
  background-size: auto 100%,  auto 270px;
  height: 420px;
  margin-top: -80px;
  display: flex;
  align-items: flex-end;
}
 .wrapper{
  &--v2 {
   background-image: url("/images/wrapper--v2-bg.svg");
   background-repeat: no-repeat;
   background-position: top center;
   background-size: auto 350px;
   padding-top: 350px;
   margin-top: -200px;
  }
  &--v4 {
   background-image: url("/images/wrapper--v4-bg.svg");
   background-repeat: no-repeat;
   background-position: top center;
   .media-down(768px, {
    background-position: top left;
    background-size: auto 300px;
   });
   background-size: auto 350px;
   padding-top: 350px;
   margin-top: -200px;
  }
  &--v3 {
   background-image:  url("/images/wrapper--v3-bg.svg"), url("/images/wrapper--v3-bg1.svg");
   background-repeat:  no-repeat, repeat-x;
   background-position: top 10px center, top center;
   background-size:  82% auto, auto 400px;
   .media-down(576px, {
    background-image:  none, url("/images/wrapper--v3-bg1.svg");
   });
   padding-top: 230px;
  }
 }


}