@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
* {
  box-sizing: border-box;
}

:root {   /*dark mode variable*/
  --app-container: #F3F6FD;
  --main-color: #1F1C2E; /*colore dei testi */
  --secondary-color: #4A4A4A;
}

.dark:root {   /*dark mode variable*/
  --app-container: #1F1C2E;
  --main-color: #F3F6FD;
  --secondary-color: rgba(255,255,255,.8);
}

html, body {
  /*width:100%*/
  height: 100vh;
  margin: 0;
}

body {
  font-family: "DM Sans", sans-serif;
  /*overflow: auto; //con hidden vieta lo scroll, con overflow attivo sticky potrebbe non funzionare */
  background-color: var(--app-container);
}

button, a {
  cursor: pointer;
}


/*SEZIONI HEADER*/
.header {  /*solo header invece di .header, flex non funziona, non so perché*/
  background-color: var(--app-container);
  width: 100%;
  position: sticky;
  position: -webkit-sticky; /*senza di questa su Safari l'header non resta sticky*/
  top: 0;
  z-index: 999;
}
@media screen and (min-width: 500px) {  /*ambienti desktop*/
  .header {
    padding: 1% 5%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
  }
  .header-left {
    width: auto; /*per spostare i bottoni a destra toglierla*/
    float: left;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    padding: 0 2%;
  }
  .header-right {
    width: 100%; /*per spostare i bottoni a destra toglierla*/
    float: right;
    display: flex;
    justify-content: space-between; /*per spostare i bottoni a destra usare space-evenly o around*/ 
    align-items: center;
    padding: 0 2%;
  }

  /*effetti dei buttons solo su desktop*/
  .social-button {  /* transizione iniziale del bordo del bottone */
    transition: all 0.3s linear 0.3s;
  }
  .social-button * {  /* transizione iniziale dell'icona del bottone */
    transition: all 0.3s linear 0s;
  }
  .social-button:hover {  /* transizione finale del bordo del bottone */
    transition: all 0.3s linear 0s;
    border-color: rgba(255, 0, 0, 0) !important; /* l'ultimo valore gestisce la trasparenza del bordo del bottone */ /*senza important! ho notato che non funziona dopo che si passa alla dark mode*/
  }
  .social-button:hover * {  /* transizione finale dell'icona del bottone */
    transition: all 0.3s linear 0.3s;
    transform: scale(1.15);
  }
}
@media screen and (max-width: 500px) {   /*ambienti mobile*/
  .header {
    padding: 2% 5%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .header span, button {
    float: none;
    display: block;
  }
  .header-left {
    float: none;
    text-align: center;
    padding: 2%;
  }
  .header-right {
    float: none;
    display: flex;
    justify-content: space-evenly; /*per spostare i bottoni a destra usare space-evenly o around*/ 
    align-items: center;
    padding: 2%;
  }
}

#name {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--main-color);
}
#mode-switch {  /*button della dark mode */
  background-color: transparent;
  border: none;
  padding: 0;
  color: var(--main-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.social {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
}
.social-button {
  text-decoration: none !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 20px;
  position: relative;
  color: var(--main-color);   /* colore icona */
  border: 2px solid var(--main-color);  /* colore bordo */
  padding: 3px;
}

/*SEZIONI MAPPE*/
.maps-content {
  display: flex;
  flex-direction: column;
  padding: 0 5% 0 5%;
}
/* se voglio mettere in ordine piu mappe su una sezione */
.second.section, .third.section {
  display: flex;
  flex-direction: row;
  padding: 2% 0 0 0;
}


/*SEZIONI FOOTER*/
.footer {
  color: var(--main-color);
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
}
.footer-left {
  font-size: 11px;
}
@media screen and (min-width: 500px) {  /*ambienti desktop*/
  .footer {
    padding: 2% 2% 0.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-left {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .footer-right {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .rights, .sources, .credits {
    padding: 0 2%;
  }
}
@media screen and (max-width: 500px) {   /*ambienti mobile*/
  .footer {
    padding: 2% 5%;
    display: flex;
    flex-direction: column;
  }
  .footer-left {
    width: 100%;
    float: none;
    display: flex;
    flex-direction: column;
  }
  .footer-right {
    width: 100%;
    float: none;
    display: flex;
    justify-content: flex-end;
  }
  .rights, .sources, .credits {
    padding: 4% 0;
  }
}


.rights {
  font-weight: 500;
}
.credits {
  font-size: 14px;
  font-weight: 600;
}
#gif-hide {
  visibility: hidden;
}


/*SEZIONE MAPPA*/
#chart1, #chart2, #chart3 {
  border-radius: 5px; /*bordo del rettangolo della mappa*/
  padding: 0% 1% 0% 1%;
  background: #FFF;  /*dark mode variable*/
  border: 0px solid #DDD;   /*bordo della mappa*/
  box-shadow: 0 0px 0px 0px rgba(0,0,0, 0.1);
  width: 100%;
  margin: auto;
}
/*
#chart .apexcharts-tooltip { //per modificare ulteriormente la tooltip della mappa
  background: #ff0000;
  color: orange;
} 
#chart .apexcharts-toolbar { //per modificare posizione della toolbar
  right: auto;
  left: 0
}
*/


/*SEZIONE TOOLTIP SOURCES*/
.tooltip-sources {
  --balloon-font-size: 10px;
  --balloon-font-style: normal;
  --balloon-color: var(--main-color);
  --balloon-text-color: var(--app-container);
}