@import url("https://puuli.fi/lib/leaflet/leaflet.css");
@import url("https://puuli.fi/lib/leaflet/MarkerCluster.css");
@import url("https://puuli.fi/lib/leaflet/MarkerCluster.Default.css");

* {box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui; font-size: 16px; font-weight: 400;}

:root 
  {
  --teematDisplay: block;
  --mapDisplay:    none;
  --infoDisplay:   none;
  }

html, body {height: 100%;}

body 
  {
  padding: 10px;
  background: rgb(46,80,68);
  }

#kuva
  {
  aspect-ratio: 1/1;
  }

.kehys
  {
  display: grid;
  grid-template-areas:
    "header header header"
    "menu   menu   menu"
    "left   main   right"
    "footer footer footer";
  grid-template-columns: 150px auto 200px;
  grid-template-rows: 50px 33px auto 20px;
  gap: 2px;

  margin: 0 auto;
  padding: 4px;
  height: 100%;
  width:  1400px;
  max-width: 100%;
  background-color: #ccc;
  }

.kehys>*
  {
  border: solid 1px grey; 
  overflow: auto;
  background-color: #eee;
  }

header
  {
  grid-area: header;

  display: grid;
  justify-content: center;
  align-items: center;
  }

nav
  {
  display: flex;
  align-items: stretch;
  grid-area: menu;
  }

nav>*
  {
  border: solid 1px grey;
  border-radius: 2px;
  margin: 2px;
  padding: 2px 8px;
  cursor: pointer;
  }

#paluu
  {
  aspect-ratio: 1 / 1;
  }

main
  {
  grid-area: main;
  }

form
  {
  grid-area: left;
  padding: 2px;
  }

form>button
  {
  width: 100%;
  margin-bottom: 2px;
  border: solid 1px #aaa;
  border-radius: 2px;
  background-color: #cff;
  cursor: pointer;
  }

form>button:hover
  {
  background-color: #bee;
  }

#info
  {
  grid-area: right;
  padding: 1px;
  }

ul :not(.taso1)
  {
  margin-left: 6px;
  }

.taso2 *
  {
  font-size: 12px;
  }

#kuva
  {
  height: 100px;
  }

#sää
  {
  display: grid;

  xxxdisplay: none;

  grid-template-areas:
    "l_ikoni  lämpö  ikoni"
    "suunta   nopeus ikoni"
    "s_ikoni  sade   sade";
  grid-template-columns: 1fr 2fr 4fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px;
  }

#sää * {font-size: 12px; background-size: contain; background-repeat: no-repeat; background-position: center; padding: 0px;}

#l_ikoni {grid-area: l_ikoni; background-image: url("images/lämpömittari.png");}
#lämpö   {grid-area: lämpö;}
#nopeus  {grid-area: nopeus;}
#suunta  {grid-area: suunta;}
#suunta>img {background-color: white; aspect-ratio: 1 / 1;}
#s_ikoni {grid-area: s_ikoni; background-image: url("images/sade.png");}
#sade    {grid-area: sade;}
#ikoni   {grid-area: ikoni;}

#suunta>img {border-radius: 100%;}

footer
  {
  grid-area: footer;

  display: grid;
  justify-content: right;
  align-items: center;

  font-size: 0.7rem;
  padding: 0 5px;
  }

#map
  {
  overflow: hidden;
  }

.osm
  {
  font-size: 10px;
  }

.valittu, .valittu:hover
  {
  background-color: yellow;
  }

h2
  {
  font-size: 16px;
  }

h3
  {
  font-size: 14px;
  }

ul
  {
  list-style-type: circle;
  list-style-position: outside;
  }

li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}

.vale
  {
  color: #777;
  text-decoration: line-through;
  }

/*-----------------------------------------*/

@media screen and (max-width: 600px) 
  {
  .kehys
    {
    grid-template-areas: "header" "menu" "main" "footer";
    grid-template-columns: auto;
    grid-template-rows: 50px 50px auto 20px;
    }

  nav>*
    {

    }

  #teemat {display: var(--teematDisplay); grid-area: main;}
  #map    {display: var(--mapDisplay);}
  #info   {display: var(--infoDisplay); grid-area: main;}

  #teemat>button
    {
    height: 50px;
    font-size: 1.3rem;
    }
  }

/*-----------------------------------------*/