:root{
  
  --cvet-sushi:#eef0f2;
  --cvet-granic:#ffffff;

  
  --fon-plyonka-cvet:252,253,255;
  --fon-plyonka:0;
  --fon-plyonka-globusy:0.75;
  --fon-plyonka-karta:0;
  

  
  --fon-verh:215px;

  

  
  --fon-skroll:140;
  --fon-skroll-ekran:40;
}

.fon-podlozhka{
  position:fixed;
  left:0; right:0;
  top:var(--fon-verh);
  bottom:0;
  z-index:-1;
  pointer-events:none;
}

.fon-podlozhka::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(var(--fon-plyonka-cvet),var(--fon-plyonka));
  pointer-events:none;
}

.fon-globus-gipso{--fon-plyonka:var(--fon-plyonka-globusy);}

.fon-karta-relief{--fon-plyonka:var(--fon-plyonka-karta);}

.fon-karta{
  
  background-image:url("../../img/fon/karta-lenta-fon.99df72aa7c27.svg");
  
  background-repeat:repeat-x;
  background-size:auto 84%;    
  background-position:0 44%;   
}

.fon-karta.fon-karta-relief{
  background-image:url("../../img/fon/karta-relief-lenta-fon.ac77e770db3e.webp");
}

.fon-shar{
  display:flex;
  align-items:center;
  justify-content:center;
  
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,.5) 96%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,.5) 96%,transparent 100%);
}

.fon-shar canvas{
  width:100vh;        
  height:100vh;       
  
  margin-top:calc(var(--fon-verh) + 6vh);
  display:block;
}

@media (max-width: 760px){
  
  :root{ --fon-verh:56px; }

  
  :root{--fon-skroll-ekran:none;}
  .fon-podlozhka{
    bottom:auto;
    height:calc(100vh - var(--fon-verh));
    height:calc(100lvh - var(--fon-verh));
  }
  .fon-shar canvas{
    width:min(88vw,60lvh);
    height:min(88vw,60lvh);
    margin-top:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .fon-podlozhka{transition:none !important;}
}