html,body {
  font-family:"Public Sans",sans-serif;
  background-image: url("https://datatuomioistuin.fi/img/back.png");
  /* background-color: rgb(255,255,255); */
}


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

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
  /* border: 1px solid black; */
}

.rtfm {
	width: 25%;
	float: left;
	padding-right: 20px;
	padding-bottom: 5px;
}

.ingressi {
	font-family: "Special Elite","Public Sans",sans-serif;
	font-size: 1rem;
}

p.fl::first-letter {
    color:black;
	font-size: 2rem;
    float: left;
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;	
    padding-left: 0.5rem;	
	margin-right: 0.5rem;
	background-color: white;
	border-radius: 0.33rem;
	box-shadow: 3px 3px 0 gray;
}

/* wrapperin komponentit*/
.header {
      /* border: 1px solid black; */
      position: sticky;
      top: 0;
      background-color: rgb(255,255,255);
      align-self: center;
      grid-area: hd;
      color: black;
      text-align: center;
      width: 100%;
	  max-width:1200px;
      font-family: "Public Sans",sans-serif;
	  font-size: 1.5rem;
	  font-weight: 100;
      }

.headerL {
    /* border: 1px solid black; */
    position: grid;
    top: 0;
    background-color: rgb(255,255,255);
    /* align-self: top; */
    grid-area: hdl;
    color: black;
    text-align: left;
    line-height:1;
    width: 100%;
	max-width:600px;	
    font-family: "Special Elite","Public Sans",sans-serif;
	font-size: 1rem;
    }

 .headerR {
      /* border: 1px solid black; */
      position: grid;
      top: 0;
      background-color: rgb(255,255,255);
      /* align-self: top;*/
      grid-area: hdr;
      color: black;
      text-align: right;
      line-height:1;
      width: 100%;
	  max-width:600px;
      font-family: "Public Sans",sans-serif;
      /* font-size: calc(8px + 0.5vw); */
	  font-size: 0.85rem;
      }

 .content {
	/* border: 1px solid black; */
    grid-area: main;
    color:black;
    text-align: left;
    line-height: 1.5rem;
	align-self:top;
    width: 100%;
	max-width: 1200px;
	font-size: 1rem;
    font-family: "Public Sans",sans-serif;
    }

 .lmargin {
    /* border: 1px solid black; */
    grid-area: lmarg;
    color: black;
    text-align: left;
    /* align-self:top; */
    width: 100%;
    }

 .rmargin {
	/* border: 1px solid black; */
	grid-area: rmarg;
    color: black;
    text-align: left;
	/* align-self:top; */
    width: 100%;
    }

.footer {
      grid-area: ft;
      align-self: center;
      color:black;
      text-align:center;
      width:100%;
      font-family: "Special Elite","Public Sans",sans-serif;
      /* font-size: calc(12px + 1vw); */
	  font-size: 1.5rem;
      }

@media screen and (max-width: 600px) { .header {font-size:1.1rem; } }
@media screen and (min-width: 601px) { .header {font-size:1.5rem; } }
@media screen and (min-width: 768px) { .header {font-size:1.65rem; } }
@media screen and (min-width: 992px) { .header {font-size:2rem; } }
@media screen and (min-width: 1199px) { .header {font-size:2.4rem; } } 

@media screen and (max-width: 600px) { .content {font-size:1rem; } }
@media screen and (min-width: 601px) { .content {font-size:1rem; } }
@media screen and (min-width: 768px) { .content {font-size:1rem; } }
@media screen and (min-width: 992px) { .content {font-size:1rem; } }
@media screen and (min-width: 1199px) { .content {font-size:1rem; } }

/*
@media screen and (max-width: 600px) { .header {font-size:calc(12px + 2vw); } }
@media screen and (min-width: 601px) { .header {font-size:calc(12x + 2vw); } }
@media screen and (min-width: 768px) { .header {font-size:calc(16px + 2vw); } }
@media screen and (min-width: 992px) { .header {font-size:calc(18px + 2vw); } }
@media screen and (min-width: 1199px) { .header {font-size:calc(25px + 1.3vw); } } 

@media screen and (max-width: 600px) { .content {font-size:calc(16px + 0.5vw); } }
@media screen and (min-width: 601px) { .content {font-size:calc(18px + 0.5vw); } }
@media screen and (min-width: 768px) { .content {font-size:calc(18px + 0.5vw); } }
@media screen and (min-width: 992px) { .content {font-size:calc(18px + 0.5vw); } }
@media screen and (min-width: 1199px) { .content {font-size:calc(18px + 0.5vw); } }
*/

.wrapper {
  width: 100%;
  max-width:1200px;
  margin: 0 auto;
  display: grid;
  /* border: 1px solid black;  */
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-template-areas:
    "lmarg hd   hd   hd   hd   hd   hd   rmarg"
    "lmarg main main main main main main rmarg"
    "lmarg ft   ft   ft   ft   ft   ft   rmarg";
}

.wrapperArticle {
  width: 100%;
  max-width:1200px;
  margin: 0 auto;
  display: grid;
  /* border: 1px solid black; */
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-template-areas:
    "lmarg hdl  hdl  hdl  hdr  hdr  hdr  rmarg"
    "lmarg main main main main main main rmarg"
    "lmarg ft   ft   ft   ft   ft   ft   rmarg";
}