* {box-sizing: border-box; margin: 0px; padding: 0px; border: none; font-family: system-ui, sans-serif; font-size: 16px; font-weight: 400; cursor: default; user-select: none; text-align: center;}

:root {color-scheme: light dark;}

main 
  {
  xxxdisplay: flex;

  background-color: light-dark(#ddd, #555);
  padding: 1%;
  }

h1 {font-size: 2rem;}

.pisteet
  {
  display: flex;

  border: solid 1px red;

  padding: 1px;
  }

.pelaajataulu
  {
  border: solid 1px pink;
  xxxwidth: 100px;
  min-width: 5px;
  }

.pelaaja
  {
  border: solid 1px green;
  }

.kierrokset
  {
  border: solid 1px yellow;
  padding: 20px 0;
  }

.kierrossolu
  {
  display: flex;
  height: 30px;
  xxxborder: solid 1px blue;
  }

.luvattusolu
  {
  display: flex;
  align-items: center;
  place-content: center;

  border: solid 1px #770;
  width: 30px;
  }

.saatusolu
  {
  display: flex;
  align-items: center;
  place-content: center;

  border: solid 1px #077;
  width: 30px;
  }

.tulossolu
  {
  display: flex;
  align-items: center;
  place-content: center;

  border: solid 1px orange;
  }

/*==================================*/

@media (pointer:fine) 
  {
  html {height: 100%;}

  body 
    {
    height: 100%;

    display: flex;
    place-content: center;

    padding: 1%;
    }

  main 
    {
    height: 100%;
    width: 800px;
    max-width: 100%;

    border-radius: 5px;
    }
  }