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

html, body
  {
  height: 100%;
  }

body
  {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #337;
  background-color: #377;
  }

.kortti
  {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 50px auto 50px;

  background-image: url("./bg.jpg");
  background-size: cover;

  width: 500px;
  height: 700px;

  max-width: 100%;
  max-height: 100%;

  border: outset 3px #333;
  border-radius: 10px;

  box-shadow: 0 0 25px #ccc;

  padding: 1vw;
  }

.kortti>*
  {
  border: solid 1px gray;
  border-radius: 5px;

  padding: 5px;

  background-color: rgba(255,255,255,0.8);
  }

h1, a
  {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  }

h2 
  {
  font-size: 1.3rem;
  margin: 10px 0 10px;
  }

ol, ul
  {
  list-style-position: inside;

  padding-left: 2em;
  text-indent:  -1em;

  overflow: auto;
  }

li
  {
  margin: 10px 0 10px;
  }

em
  {
  font-style: italic;
  }

a {color: blue; text-decoration: none;}
a:link {color: blue; text-decoration: none;}
a:visited {color: blue; text-decoration: none;}
a:hover {color: blue; text-decoration: none;}
a:active {color: blue; text-decoration: none;}

p
  {
  margin: 10px 0 10px;
  }

.ext 
  {
  font-size: 1.0rem;
  padding: 10px 0 10px;
  margin: 10px 0 10px;
  border: solid 1px gray;
  border-radius: 5px;
  color: #0fd;
  }

.navi
  {
  display: flex;
  gap: 5px;
  }

.navi>*
  {
  flex-grow: 1;
  border: solid 1px #777;
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
  xxxbackground-clip: padding-box;
  }

.navi>*:first-child {background-image: url("./edel.png");}
.navi>*:nth-child(2) {background-image: url("./ylos.png");}
.navi>*:last-child {background-image: url("./seur.png");}


@media (pointer: coarse) 
  {
  * {font-weight: 100;}

  .kortti
    {
    border: none;
    border-radius: 0;
    }

  h2
    {
    font-weight: 300;
    }

  .korttiotsikko
    {
    font-weight: 300;
    }
  }