* {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-color: black;
  }

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

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

.kehys>*
  {
  border: solid 1px grey; 
  overflow: auto;
  background-color: rgba(255,255,255,0.2);
  }

header
  {
  grid-area: header;

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

nav
  {
  grid-area: menu;
  }

nav>*
  {
  position: relative;
  bottom: 0;

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

main
  {
  grid-area: main;
  }

#vasen
  {
  grid-area: left;
  padding: 2px;
  }

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



footer
  {
  grid-area: footer;

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

  color: #aab;
  font-size: 0.8rem;
  }

h1
  {
  color: #dde;
  font-size: 2rem;
  }

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

@media screen and (max-width: 600px) 
  {

  }

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