:root{
  --text-col1: 34, 34, 34;
  --text-col2: 51, 51, 51;
  --text-col3: 85, 85, 85;
  --text-highlight: 119, 119, 119;
  --background-col1: 153, 153, 153;
  --background-col2: 187, 187, 187;
  --background-col3: 221, 221, 221;
  --background-highlight: 255, 255, 255;
  --nav-col1: 0, 0, 153;
  --nav-col2: 0, 0, 204;
  --nav-col3: 150, 50, 255;
  --nav-highlight: 255, 204, 255;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-col1: 153, 153, 153;
    --text-col2: 170, 170, 170;
    --text-col3: 221, 221, 221;
    --text-highlight: 238, 238, 238;
    --background-col1: 34, 34, 34;
    --background-col2: 68, 68, 68;
    --background-col3: 119, 119, 119;
    --background-highlight: 153, 153, 153;
    --nav-col1: 0, 0, 153;
    --nav-col2: 0, 0, 204;
    --nav-col3: 150, 50, 255;
    --nav-highlight: 255, 204, 255;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

#map {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#selectContainer {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 11px 0;
}

#countrySelect {
  width: 200px;
  margin: 0 auto;
}

#pre-load, #weather-pre-load, #info-pre-load, #news-pre-load, #currency-pre-load {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
  &:before{
    content: "";
    position: fixed;
    border-radius: 50%;
  }
}

#pre-load:before {
  width: 80px;
  height: 80px;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  border: 8px solid #f2f2f2;
  border-top: 8px solid #2D8E5D;
  -webkit-animation: animate-preloader 1.5s ease-out infinite;
  animation: animate-preloader 1.5s ease-out infinite;
}

#weather-pre-load:before, #info-pre-load:before, #news-pre-load:before, #currency-pre-load:before{
  width: 60px;
  height: 60px;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #0e1e9a;
  -webkit-animation: animate-preloader 1s ease-out infinite;
  animation: animate-preloader 1s ease-out infinite;
}



@-webkit-keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}