@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto&family=Tilt+Neon&display=swap');


body{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: bold;
  
}

h1{
  font-size: 2em;
}


#app {
 height: 100vh;
  display: grid;
  grid-template-rows: 80px auto 80px;
  grid-template-columns: 1fr;

}


#map {
  height: 100vh;
  width: 100vw;
 
  overflow: hidden;
}





header {
  grid-row-start: 1;
  grid-row-end: 2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #4BA598;
  color: aliceblue;

  
}

#ViewSection {
  grid-row-start: 2;
  grid-row-end: 3;
 
 overflow: auto;

 display: flex;
 flex-direction: column;
 align-items: center;
 
}

nav {
  grid-row-start: 3;
  grid-row-end: 4;
  
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: aliceblue;
  background-color: #4BA598;


}



.pollenView{

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content:space-around;
 
}


.pollencard{
 width: 49%;
max-width: 500px;
}

.pollenIndicator{

  width: 100%;

 

}



#locationList{
  color: aliceblue;
  background-color: #4BA598;

  padding: 5px;
  padding-bottom: 1em;
 width: 100%;
  z-index: 3;
  position: absolute;

}





#locationList div{
  font-size: 1.5em;
  margin-top: 1em;

}



.settingsCard {
width: 80%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px;
  margin-top: 1em;
}

.settingsCard h3 {
  font-size: 1.5em;
  margin-bottom: 20px;
}


.settingsCard div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.settingsCard p {
  display: inline-block;
}

#settingsLocationList{
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px;
 
  margin-top: 1em;

}

#settingsLocationList h3 {
 
  font-size: 1.5em;
  margin-bottom: 20px;
}

.settingsLocation{
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  background-color: #4BA598;
  color: aliceblue;
  padding: 20px;
}





/*   switch '/

The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #EC9AAA;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color:  #4BA598;
}

input:focus + .slider {
  box-shadow: 0 0 1px #5c5c5c;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.hidden{
  display: none;
}



/*loader*/
/* HTML: <div class="loader"></div> */
/* .loader {
  margin-top: 8em;
  width: 15px;
  aspect-ratio: 1;
  position: relative;
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4BA598;
}
.loader::before {
  box-shadow: -25px 0;
  animation: l8-1 1s infinite linear;
}
.loader::after {
  transform: rotate(0deg) translateX(25px);
  animation: l8-2 1s infinite linear;
}

@keyframes l8-1 {
    100%{transform: translateX(25px)}
}
@keyframes l8-2 {
    100%{transform: rotate(-180deg) translateX(25px)}
} */


/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  margin-top: 60%;
  width: 40px;
  aspect-ratio: 1;
  position: relative;
}
.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  margin: -8px 0 0 -8px;
  width: 16px;
  aspect-ratio: 1;
  background: #3FB8AF;
  animation:
    l1-1 2s  infinite,
    l1-2 .5s infinite;
}
.loader:after {
  background:#FF3D7F;
  animation-delay: -1s,0s;
}
@keyframes l1-1 {
  0%   {top:0   ;left:0}
  25%  {top:100%;left:0}
  50%  {top:100%;left:100%}
  75%  {top:0   ;left:100%}
  100% {top:0   ;left:0}
}
@keyframes l1-2 {
   80%,100% {transform: rotate(0.5turn)}
}