html,
body {
  width: 100%;
  height: 100%;
  color: rgb(31, 29, 29);
  text-align: center;
  font-family: helvetica, arial;
  margin: 0px;
  scroll-behavior: smooth;
}

article {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

header { 
  background-color: #2dc398;
  padding: 1rem;
}

main {
  background: whitesmoke;
  color: #444;
  padding: 0rem;
}

footer {
  background: #fff;
  padding: 1rem;
  color: #798189;
}


.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

.haloText {
  /* font-size:2vw; */
  text-shadow:
   -2px -2px 2px black,
  -2px 0px 2px black,
  -2px 2px 2px black,
  0px 2px 2px black, 
  0px -2px 2px black,
  2px -2px 2px black,
  2px 0px 2px black,
  2px 2px 2px black
}

.haloText2 {
  /* font-size:2vw; */
  text-shadow:
   -1px -1px 2px black,
  -1px 0px 2px black,
  -1px 1px 2px black,
  0px 1px 2px black, 
  0px -1px 2px black,
  1px -1px 2px black,
  1px 0px 2px black,
  1px 1px 2px black
}

.headercolor {
  background-color: #2dc398;
  padding: 1rem;
  color:white;
}

/* input[type=range] {    
    background-color: silver;
    width: 100%;
    height:100%;
} */


/* input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: #2dc398;
    opacity: 0.5;
    width: 50px;   
    height:50px; 
} */

.vignettesIGN{
    border-width: 1px;
    border-style: solid;
    cursor:pointer;
    color: grey!important;
    /* background-color: #fff!important; */
    border-width: 1px;
    background: none;
    border-radius: 10px;
    border-style: double;
    border-width: 5px;
}

.vignettesIGN.sel{
  padding: 2px;
  border-color: white;
  /* margin: 10px; */
}

.vignetteImage{
  width:100%;
  border-radius: 5px;
}

.sel {
  background-color: white;
}

.leaflet-control-layers {
    box-shadow: 0!important;
    background: #fff;
    border-radius: 0px!important;
    border: 1px solid #d7d7d7!important;
    box-shadow: none;
    box-sizing: border-box;
    font-size: 16px;
}

.leaflet-control-zoom-out, .leaflet-control-zoom-in, .leaflet-bar{
  box-shadow: 0!important;
    background: #fff;
    border-radius: 0px!important;
    border: 1px solid #d7d7d7!important;
    box-shadow: none;
    box-sizing: border-box;
    font-size: 16px;
}

.leaflet-touch .leaflet-bar a {
    width: 50px!important;
    height: 50px!important;
    line-height: 50px!important;
}

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
  .vignettesIGN {
    font-size: 2vw;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  .vignettesIGN {
    font-size: 4vw;
  }
}