@import url(header.css);
@import url(map.css);
@import url(fonts.css);
body {
  display: flex;
  flex-flow: column wrap;
  align-items: space-between;
  justify-content: space-between;
  background-color: rgb(65, 89, 155);
  font-family: 'passion_onebold', Verdana, 'Geneva', Tahoma, sans-serif;
  width: 100vw;
  height: auto;
  z-index: 0;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: auto;
  z-index: 0;
}
aside {
  display: flex;
  flex-flow: column wrap;
  align-items: space-around;
  justify-content: space-around;
  border-radius: 0 50px 50px 0;
  background: -moz-linear-gradient(90deg, rgba(60,116,189,1) 0%, rgba(60,116,189,0.5480392840730042) 35%, rgba(60,116,189,0.6236695361738445) 100%);
  background: -webkit-linear-gradient(90deg, rgba(60,116,189,1) 0%, rgba(60,116,189,0.5480392840730042) 35%, rgba(60,116,189,0.6236695361738445) 100%);
  background: linear-gradient(90deg, rgba(60,116,189,1) 0%, rgba(60,116,189,0.5480392840730042) 35%, rgba(60,116,189,0.6236695361738445) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c74bd",endColorstr="#3c74bd",GradientType=1); -webkit-box-shadow:  3px 3px 3px #2c568b,
             -3px -3px 3px #3c74bd;
  box-shadow:  3px 3px 3px #2c568b,
             -3px -3px 3px #3c74bd;
  width: 100%;
  height: auto;
  font-size: 2.8em;
  font-weight: bolder;
  transition: 0.3s ease-in-out;
  z-index: 4;
}
#optionGeneral,
#optionCommunes,
#optionBulles,
#optionPastilles {
  display: none;
  flex-flow: row wrap;
  align-items: space-around;
  justify-content: flex-start;
  width: 10em;
  height: auto;
  padding: 5% 0 5% 5%;
  z-index: 4;
}
section {
  display: flex;
  flex-flow: row wrap;
  align-items: space-around;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  background-color: rgba(26, 84, 161, 0.5);
}
p {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 5.5em;
  height: 2.8em;
  padding-right: 1em;
  padding-left: 1em;
  margin-top: 2%;
  margin-bottom: 2%;
  font-size: 0.4em;
  color:rgb(216, 216, 216);
  -webkit-text-stroke-width: 1.2px;
  -webkit-text-stroke-color: rgb(41, 64, 141);
  text-shadow: 0.5px 0.5px 1px rgba(236, 236, 236, 0.2), 0 0 1em rgba(253, 253, 253, 0.2), 0 0 0.2em rgba(194, 194, 194, 0.2);
  -webkit-box-shadow: 3px 3px 3px #2c568b,
           -3px -3px 3px #3c74bd;
  box-shadow: 3px 3px 3px #2c568b,
           -3px -3px 3px #3c74bd;
  border-radius: 5% 5px 5px 5px;
  background-color: #2f5b94;
  z-index: 4;
}
input[type="color"] {
  -webkit-appearance: none;
  width: 3em;
  height: 3em;
  background: -o-linear-gradient(305deg, #386caf, #2f5b94);
  background: linear-gradient(145deg, #386caf, #2f5b94);
  box-shadow:  3px 3px 3px #2c568b,
             -3px -3px 3px #3c74bd;
  border: 4px solid #d3d3d3;
  transform: scale(1);
  transition: 0.3s ease-in-out;
  box-sizing: border-box;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 0.5em;
  padding: 0;
  z-index: 4;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  padding: 0;
  }
  input[type="color"]::-webkit-color-swatch-wrapper {
  border: none;
  border-radius: 50%;
  padding: 0;
  }
input[type="color"]:hover {
  transform: scale(1.1);
  border: 3px solid rgb(242, 242, 250);
  z-index: 5;
}
span {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  width: 4.5em;
  margin: 0.5%;
  z-index: 4;
}
#legendes {
  display: flex;
  flex-flow: row wrap;
  align-items: space-around;
  justify-content: space-around;
  width: 30%;
  height: 10%;
}
.vide {
  width: 0;
  height: 100%;
}

@media screen and (max-width: 1560px) {
aside {
  width: 100%;
    }
#optionGeneral,
#optionCommunes,
#optionBulles,
#optionPastilles {
  width: 90%;
}
input[type="color"] {
  width: 2.8em;
  height: 2.8em;
  border-radius: 50px;
}
span {
  width: 4.2em;
}
}
@media screen and (max-width: 750px) {
aside {
  width: 100%;
  height: 100%;
} 
input[type="color"] {
  width: 3em;
  height: 3em;
}
span {
  width: 4.2em;
}
p {
  width: 5em;
  height: 2em;
}
#optionGeneral,
#optionCommunes,
#optionBulles,
#optionPastilles {
  display: none;
  flex-flow: row wrap;
  align-items: space-around;
  justify-content: flex-start;
  width: 100%;
  height: auto;
}
.vide {
  width: 0;
  height: 0;
}
}
@media screen and (max-width: 400px) {
  span {
    width: 3.8em;
  }
  input[type="color"] {
    width: 2em;
    height: 2em;
  }
}