@font-face {font-family: tuhru; src: url(fontit/tuhru2.otf);}

* {box-sizing: border-box; margin: 0; padding: 0; font-family: tuhru; font-size: 38px; font-weight: 900; color: #448;}

html, body {height: 100%; background-color: #aaa;}

body
  {
  padding: 20px;

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

  background-image: url("img/tausta.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  }

.vihko
  {
  width: 1200px;
  height: 100%;
  padding: 1rem;
  background-color: rgba(250,250,250,80);
  border-radius: 20px;

  overflow: auto;
  }

h1, h1>span
  {
  font-size: 2rem;
  color: #37a;
  font-weight: 900;
  text-align: center;
  margin-bottom: 16px;
  }

h2 
  {
  font-size: 1.5rem;
  color: #37a;
  font-weight: 900;
  text-align: center;
  margin-bottom: 16px;
  }

.leipäteksti, .leipäteksti>span
  {
  font-size: 1rem;
  color: #274;
  font-weight: 900;
  }

h1>span, .leipäteksti>span 
  {
  color: #f80;
  font-weight: 900;
  }

p
  {
  margin-bottom: 1rem;
  }

a 
  {
  text-decoration: none;
  color: #00e;
  font-weight: 900;
  }

img
  {
  float: right;
  border-radius: 20px;
  margin-bottom: 10px;
  }

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

@media screen and (max-width: 800px) 
  {
  .vihko
    {
    grid-template-columns: 5px auto; 
    grid-template-areas: "sauma sivu1";
    }
  }

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